Cara Membuat Menu Tabview Versi 2

Huff… setelah berhasil postingin artikel buat menu Tabview versi 1 sekarang lanjut ke versi 2. Pada versi ini, menu tabview tidak menggunakan setting default seperti Bang Kendhin, tapi kali ini menu tabview menggunakan teknik Forward dan Back. Waaahhh… keren gak niih? Cara membuatnya juga tidak terlalu berbeda dengan versi 1. Oh ya, kalo blog kamu udah menggunakan tabview versi 1, kamu tidak bisa menggunakan versi 2 ini, karena menu akan tidak berfungsi, untuk menggunakannya jelas harus mengganti semua kode yang telah dipasang untuk versi 1 dan diganti dengan versi 2. Gini nih caranya :

1. Login pada Blogger


2. Pilih Tata Letak/Layout


3. Kemudian Edit HTML


4. Klik Expand Widget Template: langkah terbaik adalah juga men-download template dengan cara klik Download Template Lengkap sebelum melakukan edit agar bisa kembali ke pengaturan awal jika terjadi kesalahan.


5. Cari kode ]]></b:skin> kemudian copy kode di bawah ini ke atasnya
   

   /* CSS for Shade Tabs. die-silver.blogspot.com */
   
   .shadetabs{
   padding: 3px 0;
   margin-left: 0;
   margin-top: 1px;
   margin-bottom: 0;
   font: bold 12px Verdana;
   list-style-type: none;
   text-align: left; /*set to left, center, or right to align the menu as desired*/
   }
   
   .shadetabs li{
   display: inline;
   margin: 0;
   }
   
   .shadetabs li a{
   text-decoration: none;
   position: relative;
   z-index: 1;
   padding: 3px 7px;
   margin-right: 3px;
   border: 1px solid #778;
   color: #2d2b2b;
   background: white url(gambar shade.gif) top left repeat-x;
   }
   
   .shadetabs li a:visited{
   color: #2d2b2b;
   }
   
   .shadetabs li a:hover{
   text-decoration: underline;
   color: #2d2b2b;
   }
   
   .shadetabs li a.selected{ /*selected main tab style */
   position: relative;
   top: 1px;
   }
   
   .shadetabs li a.selected{ /*selected main tab style */
   background-image: url(gambarshadeactive.gif);
   border-bottom-color: white;
   }
   
   .shadetabs li a.selected:hover{ /*selected main tab style */
   text-decoration: none;
   }
   
   .tabcontent{
   display:none;
   }
   
   @media print {
   .tabcontent {
   display:block !important;
   }
   }
   
   /* CSS for Inverted Modern Bricks II Tabs. die-silver.blogspot.com */
   
   .modernbricksmenu2{
   padding: 0;
   width: 362px;
   border-top: 5px solid #D25A0B; /*Brown color theme*/
   background: transparent;
   voice-family: "\"}\"";
   voice-family: inherit;
   }
   
   .modernbricksmenu2 ul{
   margin:0;
   margin-left: 10px; /*margin between first menu item and left browser edge*/
   padding: 0;
   list-style: none;
   }
   
   .modernbricksmenu2 li{
   display: inline;
   margin: 0 2px 0 0;
   padding: 0;
   text-transform:uppercase;
   }
   
   .modernbricksmenu2 a{
   float: left;
   display: block;
   font: bold 11px Arial;
   color: white;
   text-decoration: none;
   margin: 0 1px 0 0; /*Margin between each menu item*/
   padding: 5px 10px;
   background-color: black; /*Brown color theme*/
   border-top: 1px solid white;
   }
   
   .modernbricksmenu2 a:hover{
   background-color: #D25A0B; /*Brown color theme*/
   color: white;
   }
   
   .modernbricksmenu2 a.selected{ /*currently selected tab*/
   background-color: #D25A0B; /*Brown color theme*/
   color: white;
   border-color: #D25A0B; /*Brown color theme*/
   }
   
   .tabcontent{
   display:none;
   }
   
   @media print {
   .tabcontent {
   display:block !important;
   }
   }
   
   /* CSS for Indented CSS Tabs. die-silver.blogspot.com */
   
   
   .indentmenu{
   font: bold 13px Arial;
   width: 100%; /*leave this value as is in most cases*/
   }
   
   .indentmenu ul{
   margin: 0;
   padding: 0;
   float: left;
   /* width: 80%; width of menu*/
   border-top: 1px solid navy; /*navy border*/
   background: black url(gambar indentbg.gif) center center repeat-x;
   }
   
   .indentmenu ul li{
   display: inline;
   }
   
   .indentmenu ul li a{
   float: left;
   color: white; /*text color*/
   padding: 5px 11px;
   text-decoration: none;
   border-right: 1px solid navy; /*navy divider between menu items*/
   }
   
   .indentmenu ul li a:visited{
   color: white;
   }
   
   .indentmenu ul li a.selected{
   color: white !important;
   padding-top: 6px; /*shift text down 1px*/
   padding-bottom: 4px;
   background: black url(gambar indentbg2.gif) center center repeat-x;
   }
   
   
   .tabcontentstyle{ /*style of tab content oontainer*/
   border: 1px solid gray;
   width: 450px;
   margin-bottom: 1em;
   padding: 10px;
   }
   
   .tabcontent{
   display:none;
   }
   
   @media print {
   .tabcontent {
   display:block !important;
   }
   }



6. Perhatikan tulisan yang berwarna merah di atas, menu yang ditunjukkan warna merah di atas bisa diubah sesuai keinginan. Kalo kita mengerti CSS, ada banyak kode yang bisa dimodifikasi.


7. Langkah berikutnya yaitu menyisipkan kode berikut sebelum kode </head>
   

   <script type="text/javascript" src="http://www.geocities.com/ridwanox/tabcontent.js"/ 



8. Kemudian Simpan Template


9. Lalu pergi ke Page Elements


10. Trus PIlih Add a Gadget --> HTML/Javascript di tempat yg akan kamu letakkan Manu Tab View ini.


11. Kemudian Copy paste kode di bawah ini yang nantinya akan menjadi Tabview kamu :
    

    <ul id="countrytabs" class="shadetabs">
    <li><a href="http://die-silver.blogspot.com/" rel="country1" class="selected">Tab 1</a></li>
    <li><a href="http://die-silver.blogspot.com/" rel="country2">Tab 2</a></li>
    <li><a href="http://die-silver.blogspot.com/" rel="country3">Tab 3</a></li>
    <li><a href="http://die-silver.blogspot.com/" rel="country4">Tab 4</a></li>
    <li><a href="http://ourblogtemplates.com">My Templates</a></li>
    </ul>
    
    <div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
    
    <div id="country1" class="tabcontent">
    Tab content 1 here<br />
    Tab content 1 here<br />
    </div>
    
    <div id="country2" class="tabcontent">
    Tab content 2 here<br />
    Tab content 2 here<br />
    </div>
    
    <div id="country3" class="tabcontent">
    Tab content 3 here<br />
    Tab content 3 here<br />
    </div>
    
    <div id="country4" class="tabcontent">
    Tab content 4 here<br />
    Tab content 4 here<br />
    </div>
    
    </div>
    
    <script type="text/javascript">
    
    var countries=new ddtabcontent("countrytabs")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()
    
    </script>
    
    <p><a href="javascript:countries.cycleit('prev')" 
    
    style="margin-right: 25px; text-decoration:none">
    <img src="rhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfF1ho6HaPNz-79gaiBlnHllLNp085ZRA-QYz5OZgXvfMl59eMKtKdsT89m0yWw_uYvNfbUt6-w0EEjxEkrMbNsTYj4UG7PnrqdK7w6wBfYcv3CbjjLMfQLjtHxOpyr3rmyq3DT1wymus/s1600/roundleft.gif" border="0" /> Back</a> 
    <a href="javascript: countries.expandit(3)">
    Click here to select last tab</a> 
    <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNt6URNLWOPaUGnEJ7Dk8-Kv0WD07xSnAIYPyVu7lUcXtG-XFTuDSQlKC6H_k8xYHigLKxJK-Bal-TXyN2hC8RWusZr8OeNyekYYLTTtkPV-CjY520JJb72JKAMiRz12ip7-y3f00R8rI/s1600-h/roundright.gif" border="0" /> Forward</a></p>
    
    <hr />



12. Simpan deh… :D

:) Keterangan :
- Angka atau text yang berwarna biru (450px) adalah ukuran lebar tabview.
- Kode yang berwarna Hijau adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah link alamat tautan yang akan kamu tuju dari tabview tsb.
- Kode yang berwarna oranye adalah isi konten tabview kamu. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip-kedip. tambahkan menu tersebut dibawahnya.

Nah, kalo berhasil jadinya gini bro:


Keren gak niih? Hehe… :D
Semoga berhasil kawand :r :D !!!