Cara Menciptakan Multi Tab Widget Di Sidebar Blog

Cara Memasang Widget Multi Tab Di Sidebar Blogger

Tutorial Cara Memasang Widget Multi Tab Beserta Icon Di Sidebar Blog . Hallo sobat, pada tutorial blog kali ini mas tamvan akan membuatkan sebauh widget multi tab yang fungsinya untuk membagi 3 widget jadi satu kolom..

Keuntungan memasang widget multi tab di sidebar blog mungkin dapat mengurangi jumblah widget yang sudah banyak supaya tidak terlalu ke bawah, sehingga tampilannjya jadi ribet...

Tampilan Widget multi tab iin ibarat berikut...


Untuk tutorial cara pembuatan widget multi tab di sidebar, silahkan ikuti tutorial sederhana berikut ini....

Cara Membuat Widget Multi Tab di Sidebar Blog

• Login ke blogger.com

• Terus Pilih Template, Edit HTML, Cari Kode </head>

• Kalo Udah Ketemu, masukan css berikut di atasnya

 <style type='text/css'> /* Multi Tab Widget Sidebar */ .multitab-section{background:#fff;text-transform:uppercase;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:13px;font-weight:400;text-transform:uppercase;line-height:40px;width:32.3%;list-style:none;text-align:center;display:inline-block;padding:5px 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:5px;} .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> 

• Selanjutnya Kita Memasang Javascript, cari arahan </body>, kemudian masukan script dibawah ini sempurna di atas arahan tadi

 <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> 

• Berikutnya kita akan menaro HTML penampil widget multi tab sidebarnya, silahkan cari arahan sidebar blog kalian misalnya ibarat ini <div id='sidebar-wrapper'> atau <aside id='sidebar-wrapper'>

• Copy dan masukan HTML berikut di bawah arahan sidebar tadi

 <div class='multitab-section'>   <ul class='multitab-widget multitab-widget-content-tabs-id'>     <li class='multitab-tab'>       <a href='#multitab-column-id1' title='Popular' class='multitab-widget-current'><span>Popular</span></a>       <a href='#multitab-column-id2' title='Labels'><span>Tags</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> 

• Kira-kira kesudahannya nanti ibarat berikut....

Silahkan sesuaikan goresan pena Popular, Tags, Comment. Dengan Widget yang kalian inginkan...
Jika Multi Tabnya tidak dapat di klik, silahkan masukan script berikut di atas </head>

 <script type='text/javascript'>        //<![CDATA[        if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}        //]]> </script> 

.. Dan Kalo iconnya tidak tampil, silahkan masukan script berikut di atas </head> juga

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> 

• Kalo sudah, tinggal save n done

• Sekarang tinggal mengisi widget tadi dengan widget ibarat Populat Post, Label / Komentar. Caranya.

• Masuk Ke Tataletak, Tambahkan Widget di kolom yang bertulisan multitab-sidebar1, multitab-sidebar2, multitab-sidebar3

• Tinggal Pilih, widget apa yang mau di pasang...

• Cukup hingga di sini...

Cukup sekian dan terima kasih, semoga artikel perihal Cara Membuat Multi Tab Widget Di Sidebar Blog ini bermanfaat..

Apabila ada yang mau di tanyakan, silahkan bertanya di kolom komentar...