Cara Menciptakan Dan Memasang Widget Multi Tab Pada Sidebar

Baca Juga

Bismillah. Pada kesempatan kali ini, Saya akan Membagikan Cara Membuat dan Memasang Widget Multi Tab pada Sidebar Blog. Waktu itu aku sedang memperganteng blog aku ini. Kalau aku memasang Widget Populart Pos di Sidebar blog maka Otomatis akan Berjejer Kebawah, maka dari itu akan memakan tempat. Ditambah lagi memasang Labels di Sidebar blog berjejer kebawah, Makin memakan daerah lagi. Lalu ditambah lagi memasang Archive Blog di Sidebar Blog Berjejer Kebawah makin makan daerah lagi. Maka dari itu aku memasang Widget Multi Tab Sidebar sehingga blog saya terasa rapih. Oke, pribadi saja ke pada dasarnya pribadi kita praktekan.^.^

Cara Pertama :

1. Buka Blogger- Kemudian Login.

2. Dashboard - Template.

3. Edit HTML.

Proses Pembuatan :

1. Temukan (CTRL+F ) Kode ]]></b:skin> atau </style>

2. Copy & Paste instruksi berikut ini, dan Letakkan diatas kode ]]></b:skin> atau </style>

/* Multi Tab Widget */ .multitab-section{background:transparent;text-transform:uppercase;width:100%;max-width:337px;z-index:-999} .multitab-widget{list-style:none;margin:0 auto;background:#444;padding:10px 10px 40px;border-radius:4px 4px 0 0;border-bottom:4px solid #ff5050;width:100%} .multitab-widget li{list-style:none;padding:0px;margin:0;float:left} .multitab-widget li a{background:transparent;display:block;padding:10px 0;font:13px merriweather sans,sans-serif;font-weight:700;text-shadow:0 1px 1px #000;color:#999} .multitab-tab{border:0;width:33.3%;text-align:center} .multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;} .multitab-widget li a.multitab-widget-current{padding:12px 0;margin:0;background:#ff5050;text-decoration:none;text-transform:uppercase;border-radius:4px 4px 0 0;text-shadow:0 1px 1px #000;color:#fff}

3. Temukan lagi kode <div class='sidebar-inner'> atau <div id='sidebar-wrapper'>
4. Copy & Paste instruksi berikut ini, dan Letakkan dibawah kode <div class='sidebar-inner'> atau <div id='sidebar-wrapper'>.

<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> <div class='multitab-section'> <ul class='multitab-widget multitab-widget-content-tabs-id'> <li class='multitab-tab'><a href='#multicolumn-widget-id1' title='Popular'><i class='fa fa-star fa-fw'/>Popular</a></li> <li class='multitab-tab'><a href='#multicolumn-widget-id2' title='Label'><i class='fa fa-tags fa-fw'/>Kategori</a></li> <li class='multitab-tab'><a href='#multicolumn-widget-id3' title='Arsip'><i class='fa fa-tasks fa-fw'/>Arsip</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'> </b:section> </div> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'> <b:section class='sidebar' id='sidebartab2' preferred='yes'> </b:section> </div> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'> <b:section class='sidebar' id='sidebartab3' preferred='yes'> </b:section> </div> </div>

Wajib Baca :

title='Popular'> . title='Label'> . title='Arsip'> : Anda dapat mengganti judul, contohnya Recent Comment.

6. Simpan Template.
7. Buka Tata Letak/Layout.
8. Tambahkan Gadget.

Demikianlah Tutorial Blogger kali ini, jikalau terjadi kesalahan, atau anda kurang mengerti?! Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, buka tata letak tambahkan gadget jikalau sudah ditambahkan silakan lihat homepage anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat dan Memasang Widget Multi Tab Pada Sidebar