Cara membuat Multi Tab di Widget Blogger

adscblog

Cara membuat multi tab di widget dengan mudah - Mungkin bagi anda para blogger sering melihat di blog yang anda kunjungi ada Widget yang mempunyai tiga kolom?,ya itu yang dinamakan Tab Widget yang dimana tab widget ini biasanya memiliki tiga kolom yang di antara nya Populer post,Labels atau juga Comment Post,tetapi penempatan itu semua tergantung kepada pemilik blog nya mau di isi apa saja tab widget tersebut

Namun secara gambaran saya disini seperti itu lah yang di maksud tab widget di blog yang sedang saya bahas disini,tab widget ini sangat keren apabila di pasang di widget anda karena dengan demikian penyimpanan widget di blog tidak kelihatan banyak walaupun pemasangan widget tersebut memiliki lebih dari lima widget

Walaupun cara ini di gunakan oleh para blogger untuk meringkas atau menyembunyikan widget-widget yang mungkin mengganggu atau juga tidak lihat di pandang maka dari itu widget yang di anggap tidak enak di pandang tersebut di simpan di bagian Multi Tab ini,namun dengan adanya widget multi tab ini malah tampilan blog semakin keren apalagi dengan warna dan juga logo nya yang muncul menggunakan font awesome yang semakin lucu

Nah oleh karena itu jika di widget blog anda sama seperti blog ini mempunyai beberapa widget yang ingin di ringkas maka apa salah nya jika anda juga menggunakan widget 3 kolom ini atau widget Multi Tab maka tampilan blog anda akan semakin keren

Cara Memasang Widget Multi Tab di blog

Jika anda tertarik denga widget multi tab yang saya share ini dan anda juga ingin menggunakan nya di blog sobat silahkan sobat blogger ikuti langkah-langkah cara pemasangan Widget multi tab atau widget tiga kolom di bawah ini

O ya sebelum anda memasang widget multi tab di widget blog anda pastikan terlebih dahulu di template anda sudah terdapat Font Awesome nya agar logo pada bagian Judul di bagian tab nya muncul karena jika tidak tersedia logo nya tidak akan nampak

Trik memasang widget tiga kolom di blogger

• Silahkan anda masuk ke bagian Dashboard Blogger anda
• Kemudian silahkan klik template > Edit Html
• Setelah itu silahkan cari kode </head> untuk memudahkan anda di dalam mencari kode tersebut,silahkan anda tekan tombol Ctrl+F secara bersamaan,kemudian letakan kode berikut sebelum kode tersebut

 <style type='text/css'>
/* Multi Tab Widget Sidebar */
.multitab-section{background:#fff;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-tab{border:0;width:33.3%;text-align:center;width: 100%;}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a{margin:-2px;font-size:12px;font-weight:50;text-transform:uppercase;line-height:40px;width:32.3%;list-style:none;text-align:center;display:inline-block;padding:3px 0;background:#3cc091;color:#fff;cursor:pointer;position:relative;transition:all .3s;overflow: hidden;}
.multitab-widget li a.multitab-widget-current{background: #35a47c;}
.multitab-widget .multitab-tab a:before{font-family:Fontawesome;text-align:center;margin-right:2px;}
.multitab-widget .multitab-tab a:nth-child(1):before {content:&#39;\f09e&#39; important;}
.multitab-widget .multitab-tab a:nth-child(2):before {content:&#39;\f09e&#39; !important;}
.multitab-widget .multitab-tab a:nth-child(3):before {content:&#39;\f0e6&#39; !important;}
</style>

• Setelah itu silahkan anda cari lagi kode seperti berikut

 <div id='sidebar-wrapper'>
atau
<asida id='sidebar-wrapper'>
atau juga sejenis nya

• Kemudian silahkan anda letakan kode berikut tepat di bawah kode tersebut

<div class='multitab-section'>
  <ul class='multitab-widget multitab-widget-content-tabs-id'>
    <li class='multitab-tab'>
      <a class='multitab-widget-current' href='#multitab-column-id1' title='Popular'><span>Popular</span></a>
      <a href='#multitab-column-id2' title='Labels'><span>Terbaru</span></a>
      <a href='#multitab-column-id3' title='Comment'><span>Comment</span></a>
    </li>
  </ul>
  <div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id1'>
    <b:section class='sidebar' id='multitab-sidebar1' preferred='yes'/>
  </div>
  <div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id2'>
    <b:section class='sidebar' id='multitab-sidebar2' preferred='yes'/>
      </div>
  <div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id3'>
    <b:section class='sidebar' id='multitab-sidebar3' preferred='yes'/>
  </div>
</div>

Hasil nya akan seperti ini

<div id='sidebar-wrapper'>
 ------kode di atas---------
--------
---------
---------
</div>

atau

<asida id='sidebar-wrapper'>
-------kode di atas-----
---------
--------
---------
</asida>

• Kemudian silahkan anda cari lagi kode </body> dan letakan kode berikut sebelum kode tersebut

<script type='text/javascript'>
//<![CDATA[
// Multi tab widget Sidebar
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>

• Kemudian Save template

Kemudian silahkan anda lihat hasil nya untuk penempatan nya silahkan anda sesuaikan denga yang anda inginkan,
Nah itulah cara membuat Multi tab di widget blogger semoga artikel nya bisa memabntu sobat blogger dan selamat mencoba

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 20 November and have 2 komentar