Cara membuat Multi Tabbed Widget di BLogger

Widget ini dirilis oleh Mohammad Mustafa Ahmedzai pada bulan Juni 2011 dan merupakan salinan script widget Wordpress yang dibuat dan disesuaikan dengan Platform Blogger.  Script ini dapat diedit dan disesuaikan dengan template blogger versi baru serta penerapannya yang tidak begitu rumit, mudah-mudahan anda akan menyukainya.  Style dari Multi Tabbed Widget seperti gambar di bawah ini atau Anda bisa melihat live demo (klik tombol live demo).

Untuk mempraktekkannya ikuti langkah implementasi seperti di bawah ini sekarang!

• Login ke blogger dengan ID anda

• Klik menu Template pada sisi kiri halaman, sebaiknya backup terlebih dahulu template anda lihat artikel Cara Backup dan Restore Template Blogger

• Jika template sudah di backup, klik Template >> Edit HTML >> Proceed

• Cari kode ]]></b:skin>

• Copy kode dibawah ini dan paste diatas kode ]]></b:skin>

• /*----- MP Multi Tabbed Widget ----*/
  .tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
  .tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
  .tabs-widget li:first-child{margin:0}
  .tabs-widget li a{color:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMQmrXg5V2ssTPhxq2-dmNxf4so7oSbxCoXWmsVUAEkYoWtrMVLWcqJy-fAZRrXIkcbZi2HVITjPoBApqt8G3MbeUcYTVRnghIs_7rHl6H7LCxmC48Z8UqWjk-FsKVzxSXIVQ6uoofzVM/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 14px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
  .tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMQmrXg5V2ssTPhxq2-dmNxf4so7oSbxCoXWmsVUAEkYoWtrMVLWcqJy-fAZRrXIkcbZi2HVITjPoBApqt8G3MbeUcYTVRnghIs_7rHl6H7LCxmC48Z8UqWjk-FsKVzxSXIVQ6uoofzVM/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
  .tabs-widget-content{}
  .tabviewsection{margin-top:10px;margin-bottom:10px;}

• Sekarang cari kode <div id='sidebar-wrapper'> jika anda tidak menemukannya, hal ini karena setiap template memiliki kode HTM yang uniq dan mungkin berbeda dengan template yang saya gunakan, anda bisa mencari kode lain seperti ini <div class='column-right-outer'>

• Selanjutnya copy kode di bawah ini dan paste tepat di bawah kode tersebut di atas.

• <div class='tabviewsection'>
  
  <script type='text/javascript'>
              jQuery(document).ready(function($){
                  $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                  $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                  $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
   
                  $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                      $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                      $(this).addClass(&quot;tabs-widget-current&quot;);
                      $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                      var activeTab = $(this).attr(&quot;href&quot;);
                      $(activeTab).fadeIn();
                      return false;
                  });
              });
          </script>
  
  <ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
  <li><a href='#widget-themater_tabs-1432447472-id1'>Tab-Wid-1</a></li>
  <li><a href='#widget-themater_tabs-1432447472-id2'>Tab-Wid-2</a></li>
  <li><a href='#widget-themater_tabs-1432447472-id3'>Tab-Wid-3</a></li>
  </ul>
  
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
  <b:section class='sidebar' id='sidebartab1' preferred='yes'>
  </b:section>                                 
  </div>                      
                            
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
  <b:section class='sidebar' id='sidebartab2' preferred='yes'>
  </b:section>                                   
  </div>                      
                            
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
  <b:section class='sidebar' id='sidebartab3' preferred='yes'>
  </b:section>                                  
  </div>
  
  </div>
  
  <div style='height:5px;clear:both;'/>

• Simpan Template anda dengan menekan tombol Save dan periksa Layout blog pada Page Elements atau Halaman Tata Letak harusnya akan tampil seperti gambar di bawah ini

• Sebagai catatan anda dapat mengganti kode yang ditulis dengan warna biru dengan judul widgetyang anda inginkan, gunakan judul widget yang pendek saja untuk menyesuaikan dengan lebar side bar blog.

• Langkah terakhir adalah tempatkan widget yang ingin anda tampilkan pada Multi Tabbed Widget, jangan lupa untuk menyimpan perubahan pada Layout blog dengan menekan tombol Save Arrangement yang terletak di pojok kanan atas halaman Layout

• Periksa blog anda, jika sukses ucapkan Alhamdulillah