Cara membuat tab View Modern

Tutorial kali ini kita akan belajar lagi tentang desain template (cieh)? Bagaimana menambahkan elemen halaman atau kolom full widget pada sidebar template blogger dengan menggunakan CSS, XHTML dan JavaScript hanya dalam empat langkah simple, kita juga bisa dengan mudah mengganti warna dan widget langsung pada area dashboard. Berikut sebuah screenshot simple hasil dari tuturial ini:
 
 .   

Tampilannya mirip tab view sederhana yang triknya pembuatannya pernah saya bahas sebelumnya hanya saja selain perbedaan yang sudah saya sebutkan diatas kolom widget ini ketika menu diklik tingginya akan menyesuaikan dengan tinggi widget. Untuk menguji dan meyakinkan sobat. Sekalian saya minta saran dan kritik teman-teman untuk kedua tampilan terbaik template sederhana itu!!!

O ya saya sarankan untuk mengetes tutorial ini pada minima template atau backup template sobat sebelum bereksperimen dengan template sobat saat ini.

Oke sekarang ikuti langkah-langkah berikut:
 
Cara menambahkan elemen halaman baru atau kolom full widgets pada sidebar template blogger/ 
Cara membuat tab view versi dua:

• Loggin ke akun blogger anda, pada dashboard klik layout > edit html dan letakkan script berikut sebelum tag

  </span></code></span></span><span class="fullpost"><script src='http://sites.<a href="http://ipanrock.blogspot.com/2011/05/cara-membuat-tab-view-modern.html" id="Y3531447S4" style="color: rgb(36, 145, 255); text-decoration: underline;">google</a>.com/site/amatullah83/js-indahnyaberbagi/tabview-v2.js.js' type='text/javascript'/></span><span class="fullpost"><span class="fullpost"><code><span class="fullpost">

• Selanjutnya cari kode berikut
  just below there add the following code
  

  </span></code></span><span class="fullpost"><code><div class='tabber'> <br> <b:section class='tabbertab' id='tab1' maxwidgets='1'/> <br> <b:section class='tabbertab' id='tab2' maxwidgets='1'/> <br> <b:section class='tabbertab' id='tab3' maxwidgets='1'/> <br> </div></code></span><span class="fullpost"><code><span class="fullpost">

  Kode diatas hanya untuk tiga tab jika ingin lebih tinggal tambah kode serupa, tapi ingat id tab harus unik tidak boleh sama.
• Sekarang tambahkan kode CSS berikut diatas ]]>                  
  

  </span></code></span></span><span class="fullpost">/* start tab styles */ </span><br> <span class="fullpost">.tabberlive{ </span><br> <span class="fullpost">margin:0; </span><br> <span class="fullpost">padding:5px; </span><br> <span class="fullpost">clear:both; </span><br> <span class="fullpost">background:#F2F2F2; </span><br> <span class="fullpost">border:1px solid $tbbxbrcolor; </span><br> <span class="fullpost">-moz-border-radius-topleft:15px; </span><br> <span class="fullpost">-moz-border-radius-topright:15px; </span><br> <span class="fullpost">-moz-border-radius-bottomleft:15px; </span><br> <span class="fullpost">-moz-border-radius-bottomright:15px; </span><br> <span class="fullpost">-webkit-border-top-left-radius:15px; </span><br> <span class="fullpost">-webkit-border-top-right-radius:15px; </span><br> <span class="fullpost">-webkit-border-bottom-left-radius:15px; </span><br> <span class="fullpost">-webkit-border-bottom-right-radius:15px; </span><br> <span class="fullpost">} </span><br> <span class="fullpost">.tabbernav { </span><br> <span class="fullpost">margin:0px; </span><br> <span class="fullpost">padding: 5px 0; </span><br> <span class="fullpost">border-bottom: 1px solid $tbbxbrcolor; </span><br> <span class="fullpost">font-family:Arial,Helvetica,sans-serif; </span><br> <span class="fullpost">font-size:12px; </span><br> <span class="fullpost">font-weight:bold; </span><br> <span class="fullpost">} </span><br> <span class="fullpost">.tabbernav li { </span><br> <span class="fullpost">list-style:none; </span><br> <span class="fullpost">margin:0; </span><br> <span class="fullpost">display:inline; </span><br> <span class="fullpost">} </span><br> <span class="fullpost">.tabbernav li a { </span><br> <span class="fullpost">padding:7px 0.5em; </span><br> <span class="fullpost">margin-right:4px;  </span><br> <span class="fullpost">border-bottom:none; </span><br> <span class="fullpost">background:$tbbxcolor2; </span><br> <span class="fullpost">text-decoration:none; </span><br> <span class="fullpost">color:$tbbxcolor1; </span><br> <span class="fullpost">-moz-border-radius-topleft:15px; </span><br> <span class="fullpost">-moz-border-radius-topright:15px; </span><br> <span class="fullpost">-webkit-border-top-left-radius:15px; </span><br> <span class="fullpost">-webkit-border-top-right-radius:15px; </span><br> <span class="fullpost">} </span><br> <span class="fullpost">.tabbernav li a:hover { </span><br> <span class="fullpost">color:$tbbxcolor2; </span><br> <span class="fullpost">background:$tbbxcolor1; </span><br> <span class="fullpost">border-color:$tbbxbrcolor; </span><br> <span class="fullpost">text-decoration:none; </span><br> <span class="fullpost">} </span><br> <span class="fullpost">.tabbernav li.tabberactive a, </span><br> <span class="fullpost">.tabbernav li.tabberactive a:hover { </span><br> <span class="fullpost">background:$tbbxcolor1; </span><br> <span class="fullpost">color:$tbbxcolor2; </span><br> <span class="fullpost">border-bottom: 1px solid $tbbxcolor1; </span><br> <span class="fullpost">} </span><br> <span class="fullpost">.tabberlive .tabbertab { </span><br> <span class="fullpost">padding:7px;  </span><br> <span class="fullpost">border-top:0; </span><br> <span class="fullpost">background:$tbbxcolor1; </span><br> <span class="fullpost">-moz-border-radius-bottomleft:15px; </span><br> <span class="fullpost">-moz-border-radius-bottomright:15px; </span><br> <span class="fullpost">-webkit-border-bottom-left-radius:15px; </span><br> <span class="fullpost">-webkit-border-bottom-right-radius:15px;} </span><br> <span class="fullpost">.tabberlive .tabbertab h2, </span><br> <span class="fullpost">.tabberlive .tabbertabhide { </span><br> <span class="fullpost">display:none; </span><br> <span class="fullpost">} </span><br> <span class="fullpost">.tabbertab .widget-content ul{ </span><br> <span class="fullpost">list-style:none; </span><br> <span class="fullpost">margin:0 0 10px 0; </span><br> <span class="fullpost">padding:0; </span><br> <span class="fullpost">} </span><br> <span class="fullpost">.tabbertab .widget-content li { </span><br> <span class="fullpost">border-bottom:1px solid $tbbxbrcolor; </span><br> <span class="fullpost">margin:0 5px; </span><br> <span class="fullpost">padding:2px 0 5px 0; </span><br> <span class="fullpost">} </span><br> <span class="fullpost">/* end tab styles */ </span><span class="fullpost"><code><span class="fullpost">

  Dalam kode CSS diatas terdapat 4 variables named tbbxbgcolor, tbbxbrcolor, tbbxcolor1 and tbbxcolor2 jadi kita akan mudah mengganti warna tab konten langsung pada dashboard. Terakhir kita tambahkan code variable berikut pada bagian atas template variable definitions:

  <Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8"> <br> <Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc"> <br> <Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff"> <br> <Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa"></span></code><span class="fullpost"><code><span class="fullpost">

  Sekarang simpan template! Klik elemen halaman/ page elemen jika sobat berhasil akan melihat kolom seperti screenshot berikut.
   
  Sobat bisa menambahkan sebuah widget setiap klik nomer yang ada, jadi sobat dapat menambahkan sekian widget pada 1 kolom dengan mudah. Jangan lupa setelah melihat preview/ pratinjau blog untuk menyimpan atau save template.
  Untuk mengganti warna tab menu, background atau border masuk pada menu layout (tata letak) klik tab font dan warna seperti screenshot berikut.
  

Posted in: Tutorial