Home / Blog / Tips & Trik / Membuat Sidebar Multi Tab dengan Efek jQuery

Cara Download Membuat Sidebar Multi Tab dengan Efek jQuery Update Terbaru

Sedikit Info Seputar Membuat Sidebar Multi Tab dengan Efek jQuery Terbaru 2017 - Hay gaes kali ini team All About Android, kali ini akan membahas artikel dengan judul Membuat Sidebar Multi Tab dengan Efek jQuery , kami selaku Team All About Android telah mempersiapkan artikel ini untuk sobat sobat yang menyukai All About Android. semoga isi postingan tentang Artikel Blog, Artikel Tips & Trik, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Membuat Sidebar Multi Tab dengan Efek jQuery Terbaru
link: Membuat Sidebar Multi Tab dengan Efek jQuery

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Artikel Tentang Membuat Sidebar Multi Tab dengan Efek jQuery Terbaru dan Terlengkap 2017

Pada kesempatan kali ini saya akan membahas cara membuat Sidebar Multi tab dengan sedikit efek jQuery, seperti yang kita ketahui kebanyakan blog atau website memiliki banyak widdget pada sidebarnya, bisa mencapai 5 sampai 10 widget pada tiap website, misalnya popular post, label, recent post dll.
Sidebar multi tab ini ada dua macam yaitu dengan cara Edit HTML dan tanpa Edit HTML.
Perbedaanya:
  1. Dengan Edit HTML, widget bawaan blogger seperti popular post, label, archive, follower dll yang asli punya blogger bisa dimasukan kedalam sidebar multi tab ini, karena memanfaatkan fungsi asli penambahan widget yaitu pada layout » tambah gadget.
  2. Dengan Tanpa Edit HTML, widget bawaan dari blogger seperti yang saya sebutkan diatas tidak bisa dimasukan kedalam sidebar multi tab ini, karena hanya bisa menambahkan widget dari luar blogger seperti Fb-like box, twitter-box dll, sehingga membuat loading agak lama.
Dan yang akan kita bahas disini yaitu sidebar multi tab dengan melalui Edit HTML. Fungsi dari sidebar multi tab ini adalah untuk meminimalisir penggunaan ruang pada sidebar sehingga widget terlihat tidak terlalu banyak. Ada cara lain untuk meminimalisir widget pada blog atau website kita, bisa dengan cara membuat sidebar accordion atau sidebar buka tutup. Kode script dan css sidebar multi tab ini saya dapatkan dari template MyExtraNews buatan Mkr-Site yang sudah saya modifikasi sedikit.
Berikut cara pemasangannya:
1. Login akun blogger adan masing-masing
2. Letakkan kode berikut ini dibawah kode ]]></b:skin>

<style>

#sidebar-tab h2{display:none;}

#select-tab{margin:0 auto 10px}

#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}

#select-tab li{float:left;width:33.3%;text-align:center}

#select-tab a{line-height:32px;display:block;background-color:#666;color:white;font-weight:bold;text-decoration:none}

#select-tab .selected a,#select-tab a:hover{background-color:#860000}

#sidebar-main .widget1{background-color:#f7f7f7;width:100%;float:left;padding:5px}

#sidebar-main{overflow:hidden}

</style>
3. Kemudian letakkan kode berikut ini dibawah kode <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>

<div id='sidebar-tab'>

<div id='tab'>

<div class='tab-widget-menu clear'>

<ul id='select-tab'>

<li class='tab1'><a href='#tab1'>Popular Post</a></li>

<li class='tab2'><a href='#tab2'>Comments</a></li>

<li class='tab3'><a href='#tab3'>Archive</a></li>

</ul>

</div>

<div id='sidebar-main'>

<div class='widget1' id='tab1'> 

<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>

</b:section>

</div>

<div class='widget1' id='tab2'> 

<b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'>

</b:section>

</div>

<div class='widget1' id='tab3'> 

<b:section class='sidebar' id='tab4-srchive' showaddelement='yes'>

</b:section>

</div>

</div>

</div>

<script type='text/javascript'>

//<![CDATA[

$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > 
div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function()
{$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$
"#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});

//]]>

</script>

</div>
4. Silahkan anda sesuaikan sendiri, anda bisa mengganti tulisan Popular Post, Comment dan Archive sesuai dengan widget yang ingin anda tambahkan nanti.
5. Simpan Template
  1. Untuk menambahkan widget kedalamnya caranya seperti biasa, anda tinggal masuk pada menu Tata Letak » Tambah Gadget.
Penting!!
Bagi anda yang sudah memakai sidebar dengan efek accordion dengan cara edit HTML, lebih baik nonaktifkan accordionya jika ingin memakai sidebar multi tab ini, atau bisa juga membuat elemen khusus dengan ID berbeda untuk sidebar multi tab atau accordion, sehingga kedunya bisa berjalan normal.
Itulah cara Membuat Sidebar Multi Tab dengan Efek jQuery, semoga bermanfaat

Itulah sedikit Artikel Membuat Sidebar Multi Tab dengan Efek jQuery terbaru dari kami

Semoga artikel Membuat Sidebar Multi Tab dengan Efek jQuery yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai All About Android. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Artikel Tentang Membuat Sidebar Multi Tab dengan Efek jQuery Terbaru

Share this