Mari Berlangganan

Masukan alamat Email kamu disini untuk mendapatkan artikel terbaru..!

Kamis, 05 Juli 2012

cara membuat tab menu diblog dengan Css designer

1. buka software Css tab design 2.
2. klik pada bagian Fill with samples >> pilih tab menu pilih tap menu yang sesuai dengan template tentunya.
belajar ngelog, tutorial blog terbaru, tab menu, membuat tombol  home, membuat tombol menu tab pada blog

3. jika sudah sesuai bergulir keatas klik Generate HTML & image simpan file di drive komputer anda dalam satu folder...lalu cari
dimana anda menyimpan file tadi dan ubah extensinya menjadi TXT ( pada file klik kanan >> open with >> notepad),

kita akan mendapatkan kode kira-kira seperti dibawah ini....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                        <title>Free CSS Navigation Menu Designs 1 at exploding-boy.com</title>
                        <style type="text/css">
<!--
    body {
        margin:0;
        padding:0;
        font: bold 11px/1.5em Verdana;
}

h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}



/*- Menu Tabs H--------------------------- */

    #tabsH {
      float:left;
      width:100%;
      background:#000;
      font-size:93%;
      line-height:normal;
      }
    #tabsH ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
      }
    #tabsH li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsH a {
      float:left;
      background:url("tableftH.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsH a span {
      float:left;
      display:block;
      background:url("tabrightH.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsH a span {float:none;}
    /* End IE5-Mac hack */
    #tabsH a:hover span {
      color:#FFF;
      }
    #tabsH a:hover {
      background-position:0% -42px;
      }
    #tabsH a:hover span {
      background-position:100% -42px;
      }

        #tabsH #current a {
                background-position:0% -42px;
        }
        #tabsH #current a span {
                background-position:100% -42px;
        }


-->
</style>
                </head>

                <body>
                        <h2>Tab Menu H</h2>
                        <div id="tabsH">
                                <ul>
                                        <!-- CSS Tabs -->
<li id="current"><a href="Home.html"><span>   Home      </span></a></li>
<li><a href="Products.html"><span>   Products     </span></a></li>
<li><a href="Services.html"><span>  Services      </span></a></li>
<li><a href="Support.html"><span>   Support       </span></a></li>
<li><a href="Order.html"><span>   Order       </span></a></li>
<li><a href="News.html"><span>   News   </span></a></li>
<li><a href="About.html"><span>   About    </span></a></li>

                                </ul>
                        </div>


                </body>
</html>

>>>
code warna hijau adalah file gambar yang ikut tersimpan pada langkah ketiga...
upload file gambar tersebut pada http://picasaweb.google.com/home dan ganti code warna hijau dengan Url gambar yang telah di upload.
perhatikan gambar. yang dilingkari adalah Url gambar 



4. sekarang loging di blogger anda dasbor >> rancangan >> edit HTML 
5. cari code </b:skin> ( pencarian lebih cepat tekan Ctrl+f  dan masukkan kata yang ingin dicari pada kotak find).
6. copy code warna merah di atas dan paste diatas code </b:skin>...
7. simpan.
8. lalu pilih tab elemen halaman pada blog anda tambah gadget >> pilih Html/javascript Copas code warna biru disini...
yang bercetak tebal bisa diganti dengan link tujuan anda
9. simpan



Tidak ada komentar:

Posting Komentar

Silahkan berkomentar dengan sopan dan jelas dan apabila komentar anda tidak sopan, kami anggap itu sebagai SPAM.