Karya-Reza

Mengerti Kebutuhan Pengunjung

Select Menu
  • Home
  • Seputar Dunia Blogging
  • Template Untuk Blog
  • Widget Blog
  • Dan Lainnya
    • Tukar Link !
    • Daftar Banner Yang Sudah Tukar Link
  • Error Page
Home » Seputar Dunia Blogging » Widget Blogging » Membuat Sidebar Multi Tab dengan Efek jQuery Di Blog

Thursday, June 26, 2014

Membuat Sidebar Multi Tab dengan Efek jQuery Di Blog

Reza Syahputra Rizal
23 Comments
Seputar Dunia Blogging, Widget Blogging
Thursday, June 26, 2014
Sidebar Multi Tab
Membuat Sidebar Multi Tab dengan Efek jQuery Di Blog - Mungkin dalam suatu
Kesempatan anda pernah menemukan keganjalan , yaitu melihat widget dengan multi
tab , atau bisa juga disebut Sidebar Multi Tab , sibedar ini langsung tergabung Di tata letak
Dan Untuk Menambahkannya cukup tambah Widget Pada Tata Letak

Berikut Langkah-Langkah nya :

1. Cari Kode ]]></b:skin>

2. Letakan Kode Dibawah Ini Diatas ]]></b:skin>
#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}

3. Cari Kode <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>

4. Letakan Kode Dibawah Kode Tersebut :
 <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>

5. Silahkan anda sesuaikan sendiri, anda bisa mengganti tulisan Popular Post, Comment dan Archive sesuai dengan widget yang ingin anda tambahkan nanti.


6. Simpan Template 
Untuk menambahkan widget kedalamnya caranya seperti biasa, anda tinggal masuk pada menu Tata Letak » Tambah Gadget.

Share

Like

G+

Tweet

Tweet
23 Komentar untuk "Membuat Sidebar Multi Tab dengan Efek jQuery Di Blog"

Berkomentarlah Sesuai Isi Artikel Diatas :)

Klik Untuk Komentar
Fajar
Balas
Fajar June 26, 2014 at 11:49 PM
delete

keren sidebarnya...
btw support html 5 gk?

Unknown
Balas
Unknown June 26, 2014 at 11:50 PM
delete

wah mantap gan nice post
ini yang saya cari cari
thx for info

Unknown
Balas
Unknown June 26, 2014 at 11:51 PM
delete

Mantap, kebetulan blog saya belum ada sidebar seperti ini...

Deancooel
Balas
Deancooel June 26, 2014 at 11:52 PM
delete

Nah ini mas yang saya cari, kebanyakan widget di blog.
Ijin coba dulu mas

riqq
Balas
riqq June 26, 2014 at 11:58 PM
delete

Keren Gan :-bd Izin Coba =D

Unknown
Balas
Unknown June 27, 2014 at 12:00 AM
delete

Wahh mantap nihhh gan..!


izin Coba ya ^_^

Khoirul Alim
Balas
Khoirul Alim June 27, 2014 at 12:08 AM
delete

Thanks infonya gan (y)

Unknown
Balas
Unknown June 27, 2014 at 1:05 AM
delete

Keren gan,, tapi blog saya ga cocok kayak nya pake itu

Dian Anarchyta
Balas
Dian Anarchyta June 27, 2014 at 1:06 AM
delete

Pertamax ah di amankan dulu..

Emanon
Balas
Emanon June 27, 2014 at 2:07 AM
delete

Nah ini yang ane cari buat bahan percobaan template :D kalau misalkan tabnya lebih dari 3 bisa gak?

aanto228
Balas
aanto228 June 27, 2014 at 2:11 AM
delete

ini tu bisa membuat tampilan blog lebih terlihat indah, hehehe, thanks for share

dzulkifli
Balas
dzulkifli June 27, 2014 at 2:13 AM
delete

wah, kereen nih gan.........
ijin coba ya :-D

Unknown
Balas
Unknown June 27, 2014 at 2:23 AM
delete

tab nya bisa di ganti ga gan ?
contoh nya
popular post | label | arsip
gitu... :D

Udhy
Balas
Udhy June 27, 2014 at 8:42 AM
delete

keren gan, ane coba dulu :-d

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal June 27, 2014 at 8:06 PM
delete

Suport Ko Gan :D

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal June 27, 2014 at 8:06 PM
delete

ok gan :-d

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal June 27, 2014 at 8:07 PM
delete

ok gan :-d

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal June 27, 2014 at 8:08 PM
delete

Ok Silahkan :D :-d

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal June 27, 2014 at 8:08 PM
delete

Pertamax Gagal mbak , diambil sama yang palng atas :-d

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal June 27, 2014 at 8:09 PM
delete

kemungkinan bisa gan ,coba aja :-d

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal June 27, 2014 at 8:10 PM
delete

ok gan :-d

Admin
Balas
Admin June 29, 2014 at 8:04 AM
delete

dari dulu cari yg kayagini gk tau apa namnya skrng baru tau trnyata namnya Sidebar Multi Tab saatnya praktikan di blog

Aldy Madani
Balas
Aldy Madani July 18, 2014 at 10:32 PM
delete

Kode "(<)aside id='sidebar(-)wrapper'(>)" Atau "(<)div id='sidebar(-)wrapper'(>)" Kok Gk Ada Gan Di Template Saya ? (dikasih tanda () biar nggak kebaca scriptnya pas komen)

Berkomentarlah Sesuai Isi Artikel Diatas :)

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)
  • Contact Me !

Contact Me !

  • Semua Niche

    Popular Posts

    • Membuat Menu Rocking Rolling Rounded Di Blog
    • Membuat Navigasi Halaman Dengan Keyboard
    • Fianetcakep Blogger Template Download
    • Blue Awesome Template Seo Dan Rensponsive
    • Harderly Blogger Template
    • Minima Colored Blogger Template
    • Memodifikasi Widget Popular Post Tampil Lebih Menarik
    • Memodifikasi Tampilan Demo Dan Download
    • Membuat Sidebar Multi Tab dengan Efek jQuery Di Blog
    • Download KanBai BTemplate Blog

    Berlangganan

    Dapatkan Informasi Dari Blog Karya-Reza Melalui Email

    Follow blog

    Subscribe To

    Posts
    Atom
    Posts
    Comments
    Atom
    Comments

    About Me

    Reza Syahputra Rizal
    View my complete profile

    © 2025 Karya-Reza Published By Karya-Reza powered by Blogger.com.
    All Right Reserved By Blog Dian Anarchyta.