Cara Memasangan Widget Multi Tab di Blog

adscblog

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.

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 05 Juni and have 0 komentar