Easiest Way to Make Tabbed Sidebar for Blogger
October 10th, 2009
Bismillah, Alhamdulillah. After long time this trick I release, I have this idea when Webitect made tutorial for Tabbed Sidebar.
Until yesterday I didn’t make tutorial yet, because I’m busy and difficult for me to make good tutorial for this trick special for blogger.
I modified this trick special for Bloggertuts after that Dantearaujo made tutorial and CSS Style for this TAB and put it in bloggertuts.
Alhamdulillah he made great tutorial for this Trick, everyone will understand easily. You can read here
Actually between this Trick and Webitect is completely different I only got inspiration from that. Because they made for general website.
If you search from Google you will found many way to make Tabbed Sidebar but Difficult to implement in blogger, because we have to modify HTML or XML in Sidebar Part. This Trick is very easy only put CSS and JS. The JS will automatic make structure for Tabbed and we don’t have to modify in Sidebar Part.
So this trick will not mess up you html and disturb your sidebar. After put js You can change position or content of sidebar, it was very easy.
Here are some features of my method:
- Easy to install.
- No need edit html in Sidebar part.
- Automatically place your handpicked widgets inside tabs.
- Freedom to set what widgets stay out of the tabs.
- After implementing, Widgets are normally edited from Page Elements section.
The Final Result
If you want to see it working please check the live demo.
Step 1 – Placing the styles on your CSS
The style of the tabs can be easily changed anytime just using CSS, but this is not the main reason for this tutorial, It’s up to you to change or not, use your own CSS skills. We’ve made a general layout for it, to install it just place the following code right before the ]]></b:skin> line:
/* Tabbed Sidebar Widgets --------------------------------- */ .widget-wrapper2{ border:1px solid #494e52; background-color:#636d76; padding:8px; } .widget-tab { -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topright:5px; -webkit-border-radius-bottomleft:5px; -webkit-border-radius-bottomright:5px; -webkit-border-radius-topright:5px; background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important; border:1px solid #CFCFCF; font-family:Arial,Helvetica,sans-serif; padding:15px !important; } .widget-tab ul { margin:0px; padding:0px 20px 0px 20px; } .widget-tab ul li { list-style:none; border-bottom:1px solid #d6dde0; padding-top:10px; padding-bottom:10px; font-size:13px; } .widget-tab ul li:last-child { border-bottom:none; } .widget-tab ul li a { text-decoration:none; color:#3e4346; } .widget-tab ul li a small { color:#8b959c; font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; left:4px; top:0px; } .tab-content ul li a:hover { color:#a59c83; } .tab-content ul li a:hover small { color:#baae8e; } .active-tab{ background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important; border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important; border-style:solid !important; border-width:1px 1px 2px !important; color:#282E32 !important; } ul.tab-wrapper { margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; } ul.tab-wrapper li { -webkit-border-radius-topleft:5px; -webkit-border-radius-topright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top; border:1px solid #464C54; color:#FFFFFF; cursor:pointer; display:inline; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:9px; font-weight:bold; line-height:2em; list-style-image:none !important; list-style-position:outside !important; list-style-type:none !important; margin-right:1px; padding:8px 14px; text-align:center; text-decoration:none; text-transform:uppercase; }
Step 2 – Installing jQuery Library
This script needs the jQuery JavaScript library, if you already have it installed, you can skip this step, if you don’t just paste the code below right before your </head> line:
<!-- jQuery Call --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <!-- End of jQuery Call -->
Step 3 – Installing the Script
Ok now that you’ve made sure that you have jQuery installed, you need to install the script that will do all the magic for us, just place the following code right before your </head> line:
<script type="text/javascript"> var starttab=0; var endtab=2; var sidebarname="sidebar1"; </script> <script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js"></script>
Customizing
As you have noted you’ll get a few lines that can be customized, those are:
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
Very quickly: starttab is the starting number for your chosen widgets, it starts counting from 0. endtab is the number for your last included widget. sidebarname is your sidebar’s id, it is generally just “sidebar”, but just in case you have a different id, we’ll help you finding the right one to place here.
How to find your sidebar’s ID
Ok if you have installed the script and it is not working, you may have a different sidebar ID that is not only “sidebar”, use the following methods to find he right id of your sidebar.
Method 1 – Getting from the HTML
This one may be the fastest one, if you use Minima template, or any template derived from it, just go to Layout > Edit HTML > Search for “sidebar-wrapper” and you may get something like this:
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'>
Just take a closer look and you will find it id=’sidebar’.
Method 2 – Using Firebug
Firebug is the most wonderful Firefox extension for web developers, If you dont have it, just download it from here.
Method 3 – Using Web developer Firefox Plugin
This is another great extension, if you don’t have it, get it here.
Ok now that you have installed the script on your blog, you should be able to normally edit your widgets on your page elements section.
What are the Gadget Numbers
Here is a simple explanation for those who haven’t understand the numbers yet. Let’s say that you want make tabs out of your first 3 widgets, so your starting number will be 0 and your finishing number will be 2:
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
Check images below for better understanding:
In this case, Widget 3 and 4 will not get any tabs, because your finishing number was 2. Very easy huh?
Advices
- This script works for only one sidebar per blog.
- We have included a general styles for your tabs, however, you can use your CSS skills to customize them, but be aware that CSS related errors will not be supported here, make sure you do the right thing.
- All the tabbed widgets need to have a title.
48 Responses to “Easiest Way to Make Tabbed Sidebar for Blogger”
Leave a Reply
Sadly, doesn’t works with new templates of blogger template designer.. :(
[...] sidebars Only the first three widgets in the sidebar will be shown in tabbed sidebar. Thanks to Abu Farhan for this great [...]
good day to you sir, it’s not working in new version of firefox..
salam, apa yang harus aku lakukan kalo lebar Tabbed Sidebar for Blogger, tidak sesuai dgn blogku…
berapa maksimal gadget bisa ditaroh di tab?
trims pencerahnnya
dan satu lagi, setelah memakai tabbed tap, tampilan di IE menjadi hancur. bisakah diperbaiki
Lebar tergantung tulisan di h2 nya. saya tidak bisa cek kalau ga dipasang
demo and other links not working. Please check
Thanks
I Updated my post plesae check again
im not sure if i have done something wrong, but this tutorial isnt working. Blogger doesnt accept empty text in a gadget.
im not sure if i have done something wrong, but this tutorial isnt working. Blogger doesnt accept empty text inside a gadget.
wahh, kenapa ya? tabnya ga aktif.. saya cek juga demo yg diberikan mas abu farhan juga ga bisa? knp ya? apa ada kesalahn pada tutorial mas? emang sich sdh lama aku pakai gaya ini. tapi, anehnya koq skrang ga bisa lagi?
Sudah aktif lagi silahkan ganti linknya
langsung ke bloggertuts lah.,,, makasih mas abu dah share infonya…
trims banyak tipsnya, selalu penuh kejutan. Dan saya telah menggunakan sript page navigation + table of content dari Anda. Sangat-sangat membantu.
Will everything in the script be hidden from search engines because it’s Javascript?
still confused :’(
tq for sharing!
hello assalamualaikum…. how to make the jQuery menu slider contain recent post? will it work on blogger?
please share it. gw pengen bgt punya slide kyk gitu on my upcoming personal blog… ^^
u can email it to nick.zani@yahoo.com
or just share it on ur site.
thx
Assalamu’alaikum
mas numpang tanya nih,tolong dijawabanya ya mas?
gimana sih agar bisa menampilkan blokedspam diblog kita?
sukron atas jawabanya.
Assalamualaikum warahmatulloh
Akhi kalau ngutip sebagian artikel diweb nih boleh nggak ya?
sukron
Alhamdulillah berhasil saya terapkan disini
Bolehkah sy share kembali?
Assalamualaikum. Mz bntuin donk, I msh blm bs ngedit Pagnav trmask sidebar di template “smart shadow” yg dngr2 pagenav ma sidebarny ide dr pean. Makasih yow Mz!
Thank you Mr. Farhan, it works perfectly and I would like to blog about it.
Thank you Mr. Farhan, It works great and I would like to blog abbout it.
Terima kasih. atas tutorialnya… kalau saya buat di blog aku tampilannya tidak sesuai. tapi di blog lain dengan template berbeda hasilnya bagus. Tapi Ini tidak jadi masalah buatku karena aku punya tujuan lain yaitu agar beberpa widget tidak kelihatan.
thanks you for sharing , good luck to you
makasih tutorialnya ..:D
berhasil hehe
sob, aku kok jadi lebar banget gitu ya ???
Assalamo 3alikom wa rahmato’llah
Thank you brother Abu Farhan, you are the best blogger that make blogger looks easy.
Eid Moubarak dear brother hope you have nice times between your people.
Wa’alaikumsalam warohmatullahi wabarokatuh
Eid Mubarak, I hope usefull for all
Jadi begini Mas…blog aku tuh pengen dijadiin semacam centrenya ahli tutorial gitoh…ihihihihi kek si blogger display gitooo..hohohohooh sip sip kan Bos
Lho emang mau bikin domain baru atau di beben-koben itu aja?. masih bingung
gak ada duid ah bos buat domain sendiri mah. diblogspot aja deh…xixixixi blon keulik cari duid onlennya sih…heiheiheiheiei
malem Mas.. Menarik nich perlu di ujicoba nich :).
sekalian tanya gimana cara edit Post a comment [ u/komentar dan kotak komentar ] biar sejajar dgn Kotak artikel Tarkait… pada Template FB : modified mas Abu .F..???
trimakasih Pencerahannya :).
Coba cari ini
<iframe allowtransparency=’true’ class=’blogger-iframe-colorize’ frameborder=’0′ height=’275′ id=’comment-editor’ scrolling=’no’ src=” width=’100%’/>
ganti width nya jadi 450px atau terserah
dan cari css .index-comment –> ganti width nya juga semoga bisa
males buka2 xml nya fb main kira2 aja
Makasih tuk kreatifitasnya ya. Sukses
coba dulu ah kang, mudah2an cocok ma blog saya
oohh gitu ya, saya coba dulu ya…thank’s atas share ilmunya
makasih udah ngasih ilmunya, mudahan jadi pahala mas yaa…kunjungi juga gubuk saya yang sederhana…tks
sayang hack dr hoctro gak support buat .com, hanya .blogspot…kalo support aku tempel deh ini webnyah Kk Abu ^.^ abseeeeeeeeeN
Wah kagak ngatri maksudnya gimana nih ben ?
maksudnya tuh cuma support dg extention blogspot.com…nah skrg aku dah tambahin BOS, yg bisa Via RSS feed…ada enggak yg KK Abu Via RSSnya…entar dipasang…ixixixixi (trik hoctro tuh kek menampilkan headlines postingan kita kek ajaxnya si google..)
great work akhi Abu farhan! Baraka Allah fik
Wa fiika barakallahu
can u help me to make image slider like in http://gamezine-lite.blogspot.com/. thx be4 :)
Which Slider ? in that Template have two slider. But I’m sorry for this month I’m very busy, I’ll not make new hack for a while
wkwkwkwkwkwk si CHOEN ada juga ke sinih wkwkwkwkwkwk
yup ini lebih mulus banget. ngomong2 gimana yah gw bisa dapet email Abu, atau Abu email gw aja :)