Membuat Tab Menu Sendiri Dan Menerapkan Di Blog

Baiklah Bozzz.... Kali ini saya akan share bagaimana cara membuat Tab menu pada blog dengan kreasi kita sendiri, Bahan2 Cuma ada tiga macam.
1. Kode Css
2. Kode HTML
3. Button Menu (Tab Button)
Lihat dulu gambar ini, apakah seperti demikian Menu yang anda maksud?

 

Atau Lihat Demo Berikut ini 

DEMO

Kalo Memang Itu yang dimaksud, ikuti langkah2 berikut ini

1. Log In ke blogger anda, Masuk ke dasbor

2. Masuk ke Tab Template> Edit HTML

3. Cari Kode ]]></b:skin> Dan Letakan kode CSS berikut ini Tepat diatas kode ]]></b:skin>

 Kode CSS:

    body {

        margin:0;
        padding:0;
        font: normal 11px/1.5em Verdana;
}
h2 {
        font: normal 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}
/*- Menu ripswaytabs--------------------------- */
    #ripswaytabs {
      float:left;
      width:100%;
      background:red;
      font-size:12px;
      line-height:normal;
      }
    #ripswaytabs ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
      }
    #ripswaytabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #ripswaytabs a {
      float:left;
      background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbiFL9D1NcoHg19QymG5zMlNPDB0ldKB_kKS9qcAFUJGyEOuEqYAcV7W82A4I9y6n7QjXiEhP4ss-ZPeyXVxdh1tE4kSyGEdb6GaGLVApTiFssol2yWEH910Wgu0EToblIufwK7zR-Xu0/s1600/ripswaytabsleft.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #ripswaytabs a span {
      float:left;
      display:block;
      background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidQ122PRBeBQcChpLgsRhBN-bcDH2atwNKXu0q1-GV0MnDN42nxa-5jB1K5feL2e_vfgcentFYMLR4TGk1iO50sR2U9uLpoFZDFTVLZdZ5GBjdsCmy-Qeax4582oGjBocHaDfcZk79EJM/s1600/ripswaytabsright.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #ripswaytabs a span {float:none;}
    /* End IE5-Mac hack */
    #ripswaytabs a:hover span {
      color:#FFF;
      }
    #ripswaytabs a:hover {
      background-position:0% -42px;
      }
    #ripswaytabs a:hover span {
      background-position:100% -42px;
      }
        #ripswaytabs #current a {
                background-position:0% -42px;
        }
        #ripswaytabs #current a span {
                background-position:100% -42px;
        }

4. Klik Simpan
5. Tetap Pada Dasbor, Kemudian Klik Tata Letak
6. Add Gadget/Elemen baru, Pilih HTML/Javascript
Masukan Kode Berikut ini

<div id="ripswaytabs">
<ul>
<li><a href="http://ripsway1.blogspot.com/"><span>Home</span></a></li>
<li><a href="http://ripsway1.blogspot.com/"><span>Artikel</span></a></li>
<li><a href="http://ripsway1.blogspot.com/"><span>Tutorial</span></a></li>
<li><a href="http://ripsway1.blogspot.com/"><span>Nasional</span></a></li>
<li><a href="http://ripsway1.blogspot.com/"><span>Trik &amp; Tips</span></a></li>
<li><a href="http://ripsway1.blogspot.com/"><span>Kontak Kami</span></a></li>
<li><a href="http://ripsway1.blogspot.com/"><span>Tentang Kami</span></a></li>
</ul>
</div>

7. Klik Simpan

Simpan Artikel Membuat Tab Menu Sendiri Dan Menerapkan Di Blog Dengan Link : https://neoblogku.blogspot.com/2012/11/membuat-tab-menu-sendiri-dan-menerapkan.html

Judul : Membuat Tab Menu Sendiri Dan Menerapkan Di Blog.
Kategori : Koleksi Tab Menu / Membuat Menu blog / Tab menu
Ditulis oleh : Unknown Pada Sunday, November 11
Bagikan Ke : Facebook / Twitter