Pretty Simple Tab Navigation

Banyak orang selalu mengatakan; Lihat dulu baru beli ! Prinsip seperti itu kelihatannya sangat tepat untuk Simple Tab ini. Mungkin begitu mendengar atau melihat makna dari kata tersebut yang muncul di benak pikiran adalah sebuah tab yang tak mungkin akan menarik untuk dilihat apalagi digunakan di blog. Oleh karena itu tak perlu basa-basi karena ini bukanlah ajang iklan rokok. Seperti orang bilang "tak kenal maka tak sayang", maka silahkan buka dulu lewat demo ! Tolong setelah membukanya buanglah anggapan bahwa sederhana sama artinya dengan tidak cantik dan menarik !

D E M O

Langkah untuk membuat Simple Tab :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS berikut dan letakkan di atas ]]></b:skin>
   

   Kode CSS Simple Tab :

   #GRnavi{
           height:36px;
           border:0 solid !important;
           border-bottom:5px double #222 !important;
           text-align:center;
           display:inline-block;
           margin:0;
           padding:0;
           list-style:none;
           border-radius:0 !important;
   }
   #GRnavi li{
           margin:0 0 0 -3px;
           display:inline-block;
           background:#666;
           border-radius:0 !important;
   }
   #GRnavi a:link,#GRnavi a:visited{
           float:left;
           background:#eee  url(https://lh4.googleusercontent.com/-Pxn1o8txVYI/T2ONd3O1nBI/AAAAAAAAAbc/6-cEWpavqJ8/h120/gradblueH-31x30.gif) left center repeat-x;
           font-size:12px;
           font-family:Arial;
           line-height:20px;
           font-weight:bold;
           padding:6px 10px;
           margin:0;
           border:1px dotted #000;
           border-bottom:3px solid #aaa;
           border-radius:0 !important;
           text-decoration:none;
           color:#66FFFF;
           text-shadow:1px 1px 1px #000;
           transition:0.4s ease-in 0.2s;
           -o-transition:0.4s ease-in 0.2s;
           -moz-transition:0.4s ease-in 0.2s;
           -webkit-transition:0.4s ease-in 0.2s;
           -ms-transition:0.4s ease-in 0.2s;
           opacity:0.8;
           filter:alpha(opacity=80);
   }
   #GRnavi a:hover{
           background:#555 url(https://lh6.googleusercontent.com/-Ray6QZEY4UE/T2OTimFkEZI/AAAAAAAAAb4/jdpBRsVc7cU/h120/gradRed-H-2x38.gif) top right repeat-x;
           color:#CCFF66;
           opacity:0.9;
           filter:alpha(opacity=90);
           border-bottom:3px solid #000;
   }
   #GRnavi a:visited{
           color:#888;
   }

7. Klik "Simpan Template (Save Template)".
8. Klik "Design (Rancangan)" » Elemen Laman | Tambah Gadget.
9. Tambahkan kode berikut melalui Add a Gadget dan Gunakan Elemen di bawah header blog.
   

   x Simple Tab :

   <ul id="GRnavi">
        <li><a href="Link-1" title="title-1">Home</a></li>
        <li><a href="Link-2" title="title-2">Link title-2</a></li>
        <li><a href="Link-3" title="title-3">Link title-3</a></li>
        <li><a href="Link-4" title="title-4">Link title-4</a></li>
        <li><a href="Link-5" title="title-5">Link title-5</a></li>
        <li><a href="Link-6" title="title-6">Link title-6</a></li>
        <li><a href="Link-7" title="title-7">Link title-7</a></li> 
   </ul>

Catatan/Keterangan :

1. Ganti link-1 s/d link-7, title-1 s/d title-7 dan link-title-1 s/d link-title-7.
2. Gunakan xHTML pada Croscoll Elemen (Elemen di bawah Elemen Header blog).
,li>Jika membutuhkan panduan menyimpan kode, backup template dan cara mencari kode di template serta cara menambah gadget, silahkan buka Special Tutorials di menu sebelah kiri.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update � Setu   KLIWON,Maret,17,2012

� Happy Blogging - gubhugreyot �