Posts | Comments |

Easiest Way to Make Tabbed Sidebar for Blogger

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.

The Feature of my trick are :

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

Small screenshot from Tabbed Sidebar with Dante’s css style. Demo you can see from this DEMO

image

 

For this post I only give you the CSS and script, Complete Explanation about this you can read from Bloggertuts

CSS

Script

You only have to change this part :

var starttab=0;
var endtab=2;
var sidebarname=”sidebar“;

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

Only That after that Insya Allah you will see Script Automatic Generated HTML structure for Tabbed and will show Animated Jquery.

I hope This will be usefull insya Allah, Complete Explanation in here The Easiest Way to Make Tabbed Sidebars on Blogger

Related Articles :

Comments (28)

 

  1. Alhamdulillah berhasil saya terapkan disini

    Bolehkah sy share kembali?

  2. Roziq says:

    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!

  3. Raju says:

    Thank you Mr. Farhan, it works perfectly and I would like to blog about it.

  4. Raju says:

    Thank you Mr. Farhan, It works great and I would like to blog abbout it.

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

  6. Join Smith says:

    thanks you for sharing , good luck to you

  7. curupkami says:

    makasih tutorialnya ..:D
    berhasil hehe

  8. MasWafa says:

    sob, aku kok jadi lebar banget gitu ya ???

  9. doaib says:

    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.

  10. BEBEN says:

    Jadi begini Mas…blog aku tuh pengen dijadiin semacam centrenya ahli tutorial gitoh…ihihihihi kek si blogger display gitooo..hohohohooh sip sip kan Bos

  11. LOL1ds says:

    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 :).

    • admin says:

      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

  12. Tjiliwoeng says:

    Makasih tuk kreatifitasnya ya. Sukses

  13. Ocim says:

    coba dulu ah kang, mudah2an cocok ma blog saya

  14. sabirinnt says:

    oohh gitu ya, saya coba dulu ya…thank’s atas share ilmunya

  15. makasih udah ngasih ilmunya, mudahan jadi pahala mas yaa…kunjungi juga gubuk saya yang sederhana…tks

  16. BEBEN says:

    sayang hack dr hoctro gak support buat .com, hanya .blogspot…kalo support aku tempel deh ini webnyah Kk Abu ^.^ abseeeeeeeeeN

    • admin says:

      Wah kagak ngatri maksudnya gimana nih ben ?

      • BEBEN says:

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

  17. Talib says:

    great work akhi Abu farhan! Baraka Allah fik

  18. kelik says:

    can u help me to make image slider like in http://gamezine-lite.blogspot.com/. thx be4 :)

  19. BEBEN says:

    wkwkwkwkwkwk si CHOEN ada juga ke sinih wkwkwkwkwkwk

  20. choen says:

    yup ini lebih mulus banget. ngomong2 gimana yah gw bisa dapet email Abu, atau Abu email gw aja :)

Leave a Reply