Cara Memasangan Widget Multi Tab di Blog

Cara Memasangan Widget Multi Tab di Blog

Jalak Ikal 05 June 0 komentar
Untuk anda yang mempunyai Banyak Widget yang di pasangan di Blog nya,tentu nya dengan anda memasangan banyak widget di blog akan mempengaruhi terhadap blog terutama loading nya,sedang yang di utamakan di dalam blog adalah salah satu nya dengan mempercepat loading blog,sehingga dengan loading blog yang cepat akan membuat para pengunjung nyaman untuk berada di blog dan terus mencari artikel yang mereka cari

Tetapi lain hal nya dengan Loading blog yang lelet membuat para pengunjung blog menjadi kesal bahkan dengan begitu akan meninggalkan blog kita tanpa alasan,maka dari itu loading blog merupakan paktor yang mendukung keberhasilan blogger,oleh karena itu salah satu untuk membuat loading blog kita menjadi cepat,yaitu untuk tidak menyimpan widget blog terlalu banyak

Namun jika anda menginginkan memasang widget dalam jumlah banyak anda bisa menggunakan Widget Multi Tab yang dimana Widget Tersebut tersimpan dengan 3 widget sehingga akan mengurangi jumlah widget yang ada di blog,dan akan mengurangi masalah dari loading Page blog kita

Tutorial Pemasangan Widget Multi Tab di blog

Widget Multi Tab ini mungkin sudah anda lihat di berbagai blog yang anda kunjungi dan banyak sekali Style dari Widget Multi Tab ini yang di pasang di blog mereka,disini juga saya akan berbagai kode penerapan Widget Multi Tab untuk di gunakan di Blog khusus nya di bagian widget,untuk pemasangan widget Multi Tab ini bisa anda ikuti langkah-langkah nya sebagai berikut
  • Langkah pertama untuk penerapan Widget Multi Tab ini silahkan login ke blogger
  • Setelah itu klik Template yang berada di bagian Kiri Blogger
  • Kemudian klik Edit Html
  • Setelah anda berada di bagian edit html silahkan anda cari kode </b:skin> lalu kemudian silahkan anda letakan kode berikut sebelum kode </b:skin> tesebut
/* Multi Tab Widget */
.multitab-section {width:100%}
.multitab-widget {list-style:none;margin:0;padding:0}
.multitab-widget li {float:left;margin:0;padding:0;list-style:none;cursor:pointer}
.multitab-widget li a {background:-moz-linear-gradient(top,#bbbbbb,#cccccc);font-family: 'Cabin', sans-serif;font-weight:normal;font-size:14px;font-style:italic;color:#000000;margin:0;padding:5px 0;display:block;text-decoration:none}
.multitab-tab {width:33.334%;text-align:center;border:0}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none}
.multitab-widget li a.multitab-widget-current {background:-moz-linear-gradient(top,#356ba4,#3a76b4);color:#ffffff;padding:5px 0;margin:0;text-decoration:none}
.multitab-widget-content {margin:0;padding:26px 0 0 0}

  • Setelah itu silahkan anda cari kode </body> lalu letakan kode jQuery berikut sebelum kode tersebut
<script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>

  • Langkah selanjut nya silahkan anda cari kode <div id='sidebar-wrapper'> kemudian letakan kode berikut setelah kode tersebut
<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>

  • Lalu kemudian Save template
Nah itulah cara pembuatan Widget Multi Tab di blog semoga artikel nya bisa membantu sobat blogger semua,selamat mencoba saja dan salam blogger.

loading...
Ratings: 
Posted by Jalak Ikal, Published at 05 June and have 0 komentar

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi