New Multi-Tabbed Widgets For Blogger / BlogSpot Blogs

Earlier I have posted a hack on “How to create a multi-tabbed widget for blogger“, although that’s working completely fine, but if you think, it needs to be upgraded then have a look on these widgets [See these widgets in action here].

Although these new widgets look much advanced than the previous one, but you don’t have to worry on the coding part, as it has already been made easy by DynamicDrive and BloggerStop.

So here’s all the code required to put this widget in your blog:

STEP 1:
Download these two files from DynamicDrive:
1. tabcontent.css
2. tabcontent.js

And then upload these two files to MyDataNest.com (You need to register first)
After uploading the files, copy the DIRECT LINKS to these files.

STEP 2:
Log in to Blogger
Go to Lauout -> Edit HTML tab
Then find for this code:

</head>

Then immediately ABOVE / BEFORE it, paste this code:

<link rel=”stylesheet” type=”text/css” href=”http://DIRECT_LINK_FROM_MYDATANEST/tabcontent.css” />
<script type=”text/javascript” src=”http://DIRECT_LINK_FROM_MYDATANEST/tabcontent.js”>
/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Via http://BloggerStop.Net
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

Replace the code in RED, with the DIRECT LINKS you got in Step 1.

Save the template, and
Click on “Page Elements” tab.
Then click on “Add a Gadget“, and select it as “HTML/JavaScript” type.

In the new widget, paste any of the 3 codes displayed below (the screen-shots are displayed above the codes, and demo link has already been given above ):

Code Here:

<ul id=”countrytabs” class=”shadetabs”>
<li><a href=”#” rel=”country1″ class=”selected”>Tab 1</a></li>
<li><a href=”#” rel=”country2″>Tab 2</a></li>
<li><a href=”#” rel=”country3″>Tab 3</a></li>
<li><a href=”#” rel=”country4″>Tab 4</a></li>
<li><a href=”https://bloggerstop.net”>Blogger Widgets</a></li>
</ul>

<div style=”border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px”>

<div id=”country1″ class=”tabcontent”>
Tab content 1 here<br />
</div>

<div id=”country2″ class=”tabcontent”>
Tab content 2 here<br />
</div>

<div id=”country3″ class=”tabcontent”>
Tab content 3 here<br />
</div>

<div id=”country4″ class=”tabcontent”>
Tab content 4 here<br />
</div>

</div>

<script type=”text/javascript”>

var countries=new ddtabcontent(“countrytabs”)
countries.setpersist(true)
countries.setselectedClassTarget(“link”) //”link” or “linkparent”
countries.init()

</script>
<a href=”https://bloggerstop.net/” target=”_blank”><span style=”font-size: x-small;”>Blogger Widgets</span></a>

Code Here:

<div id=”flowernote” style=”display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white”>
Arbitrary DIV 1
</div>

<div id=”flowernote2″ style=”display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white”>
Arbitrary DIV 2
</div>

<div id=”flowernote3″ style=”display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white”>
Arbitrary DIV 3
</div>

<div style=”border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px”>

<div id=”tcontent1″ class=”tabcontent”>
Tab content 1 here<br />
</div>

<div id=”tcontent2″ class=”tabcontent”>
Tab content 2 here<br />
</div>

<div id=”tcontent3″ class=”tabcontent”>
Tab content 3 here<br />
</div>

<div id=”tcontent4″ class=”tabcontent”>
Tab content 4 here<br />
</div>

</div>

<div id=”flowertabs” class=”modernbricksmenu2″>
<ul>
<li><a href=”#” rel=”tcontent1″ class=”selected”>Tab 1</a></li>
<li><a href=”#” rel=”tcontent2″ rev=”flowernote,flowernote2″>Tab 2</a></li>
<li><a href=”#” rel=”tcontent3″>Tab 3</a></li>
<li><a href=”#” rel=”tcontent4″ rev=”flowernote3″>Tab 4</a></li>
<li><a href=”https://bloggerstop.net”>Blogger Templates</a></li>
</ul>
</div>
<br style=”clear: left” />

<script type=”text/javascript”>

var myflowers=new ddtabcontent(“flowertabs”)
myflowers.setpersist(true)
myflowers.setselectedClassTarget(“link”) //”link” or “linkparent”
myflowers.init()

</script>
<a href=”https://bloggerstop.net/” target=”_blank”><span style=”font-size: x-small;”>Blogger Widgets</span></a>

With Auto-scrolling tabs…
Code Here:

<div id=”pettabs” class=”indentmenu”>
<ul>
<li><a href=”#” rel=”dog1″ class=”selected”>Tab 1</a></li>
<li><a href=”#” rel=”dog2″>Tab 2</a></li>
<li><a href=”#” rel=”dog3″>Tab 3</a></li>
<li><a href=”#” rel=”dog4″ id=”myfavorite”>Tab 4</a></li>
<li><a href=”https://bloggerstop.net”>Blogger Widgets</a></li>
</ul>
<br style=”clear: left” />
</div>

<div style=”border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em”>

<div id=”dog1″ class=”tabcontent”>
Tab content 1 here<br />
</div>

<div id=”dog2″ class=”tabcontent”>
Tab content 2 here<br />
</div>

<div id=”dog3″ class=”tabcontent”>
Tab content 3 here<br />
</div>

<div id=”dog4″ class=”tabcontent”>
Tab content 4 here<br />
</div>

</div>

<script type=”text/javascript”>

var mypets=new ddtabcontent(“pettabs”)
mypets.setpersist(true)
mypets.setselectedClassTarget(“link”)
mypets.init(2000)

</script>
<a href=”https://bloggerstop.net/” target=”_blank”><span style=”font-size: x-small;”>Blogger Widgets</span></a>

69 thoughts on “New Multi-Tabbed Widgets For Blogger / BlogSpot Blogs

  1. Hi snam

    The codes for the widgets are different, so you have to replace the previous code, with the new one, if you want to use this. OR you can also use both of them at the same time if you want.

  2. Hi snam welcome back!

    I have removed that “myfaorite” code for you !

    —-
    And I can see content even in the first tab….subscribe via rss, subscribe via email etc.

    But I suggest u not to use that auto-scroll widget, because that suits more for photos-sideshow as it cannot be easily controlled by visitors !
    —-
    Regards
    Sai

  3. Then can you tell me which code I need to change to change the color of the green tabs? And how do I remove the space between the green tabs? Thanks for your help!

  4. Hi snam,
    I need the exact blog link, so that i can chk the widget in action, anyways I chkd all 5 blogs of yours, and found the widget in 2 blos:
    test blog and allaboutmylot,
    and in both of them it is working in perfectly fine condition, in case you get some problem in the widget, then do not modify anything in the template, but remove and add again the code in the HTML/JavaScript widget !

  5. While placing it in the right sidebar, the tabs are exceeding the width of your sidebar, so instead of writing, “total weekly” or “total monthly”, write it as “weekly” or “monthly” !

    And to place it right below search bar, you have to first add a widget below search widget (from EDIT HTML section), then in this new widget you have to add the multi-tabbed widget code !

  6. But then I would have 2 weekly and "weekly" and "total weekly" are different things. I guess I will abbreviate or something.

    Could you please tell me what code I use to create a new widget? Is it like < b:widget etc.?

    Thank you so much again!

  7. I like the "auto-scrolling tabs". When I followed your instruction, it worked well on the bottom of my blog 'http://pfge-pfge.blogspot.com&#39;.

    Because I like very much the color of its tab and function that I can put any title in it, I applied it as a button to the titles of widgets (ex '▽ FEEDJIT') on the sidebars by using the code "<h2><div class='indentmenu' id='pettabs'><ul><li><a href='javascript:void(0);' onclick='javascript:ElementToggle ("HTMLxxx");'><data:title/></a></li></ul><br style='clear: left'/></div></h2>", it worked too.

    However, the original "auto-scrolling" function was gone (on the buttom of my blog).

    My question is:

    How do I modify the code to get the oringial function back while I apply some of its code to the rest part of my blog? Is it OK to apply some part of its code like I did?

  8. @pfge

    Yes you can use it for other parts of your blog, if you are experienced in it,
    but remember to give different id’s to different widgets, like in this case give id=’pettabs2′

    @wordtryst
    welcome dude!
    To change the color, you have to change the images of the tabs, in the file ‘http://dsai.588.googlepages.com/tabcontent.css’ (in the first code)……you’ll find the links to images of the tabs, change them to any other images of SAME DIMENSIONS, then reupload it at hotlinkfiles.com etc and replace in the code ….that’s it !

  9. May I ask you another question?

    I applied the same trick to 'older-link' and 'new-link' in the bottom of this page 'http://www.blogger.com/html?blogID=5978316026244932714&tpl=true&#39;, it worked again.

    But I tried applied to 'homepage-link', the position of it was changed from the center to the left.

    How do I put the 'homepage-link' back the center?

    The code I used was "<div class='indentmenu' id='pettabsHomepageLink1'><ul><li>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </li></ul><br style='clear: left'/></div>"

  10. Hmm okay, this is the code from a new untouched blog, :

    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
    <b:includable id='nextprev'>
    <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
    <span id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
    </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
    <span id='blog-pager-older-link'>
    <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
    </span>
    </b:if>

    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:else/>
    <b:if cond='data:newerPageUrl'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </b:if>
    </b:if>

    </div>

    save your present code in text pad, replace with this one, and then modify this new code…

  11. OK!

    I replaced the ‘main-wrapper’ code with the new one you provided, and only modified the ‘homepage-link’ code with my trick, left ‘older-link’ and ‘newer-linker’ codes intact.

    Again, the ‘homepage-link’ was moved to the left from the center. Please see the bottom of this page ‘http://pfge-pfge.blogspot.com/2009/02/blog-post.html’.

  12. I just put this mod to use on my site yesterday! I had a bunch of clutter on the bottom of my blog, and now love how people have a choice to see it all instead of seeing all these links and picks everywhere! I think it all lessens my page’s load time due to not everything being ‘all out there’ at the same time. Very helpful mod :3

    ~DS

  13. It seems for a few days now that my tabs are broken; as in everything is listed and enclosed in a big box. Sometimes it fixes, sometimes it doesn’t. I looked thought my code and can’t figure it out. Is it something to do with the Googlepages to Googlesites migration of your files?

    ~DS

  14. Welcome back Martene,

    Actually the tabs are not broken…..but the files being used in the code :
    http://dsai.588.googlepages.com/tabcontent.css
    http://dsai.588.googlepages.com/tabcontent.js

    are both hosted on my account, which is being used by many people and so you are seeing this frequent bandwidth exceeding problem.

    So to avoid this problem, whenever the bandwidth again comes in to control, download those two files and save them on to your PC.
    Them upload them to HotLinkFiles.com or SigMirror.com and get the DIRECT LINKS and then replace the link in the code above with the new DIRECT LINK you just got !

    Regards
    Sai

  15. In part 1, instead of the code in Step #2, use this code:

    <div id="tabs">
    <ul>
    <li><a href="#fragment-1"><span>Best Posts</span></a></li>
    <li><a href="#fragment-2"><span>My Pictures</span></a></li>
    <li><a href="#fragment-3"><span>Recent Posts</span></a></li>
    <li><a href="#fragment-4"><span>Tab #4</span></a></li>
    <li><a href="#fragment-5"><span>Tab #5</span></a></li>
    </ul>
    <div id="fragment-1">
    <span style="text-align:left;">
    <p>First tab is active by default:</p>
    </span>
    </div>
    <div id="fragment-2">
    <center><a href="http://tinypic.com&quot; target="_blank"><img src="http://i29.tinypic.com/29ggyu0.jpg&quot; border="0" alt="Image and video hosting by TinyPic"></a></center>
    </div>
    <div id="fragment-3">
    Content of Tab #3
    <br/><span style="font-size: xx-small;"><a href="https://bloggerstop.net&quot; target="_blank">Blogger Widgets</a></span>
    </div>
    <div id="fragment-4">
    <span style="text-align:left;">
    <p>This is your 4th tab</p>
    </span>
    </div>
    <div id="fragment-5">
    <span style="text-align:left;">
    <p>And this one is your 5th tab</p>
    </span>
    </div>
    </div>

    PS: Use small tab names for the 4th & 5th tabs, to fit them perfectly or else the font size of the tabs has to be decreased.

  16. Sai, Thanks, I know, I was thinking the same thing about getting the matching widget, it looks good. Ok, now I need to know how to make the font smaller. Sorry to bother you. I tried to figure it out but I didn't notice any code that looked like it was for font size.

    How do I get the content to go into those tabs now?

  17. BTW, I got creative and added another tab on my own and made everything fit the way I wanted it to so I don't need to change the font size afterall, but if it's not too complicated it would be nice to know how to do it, no worries if your busy. I do need to know how to get the content in those tabs now. Thanks Again! You're awesome! –Kelly

  18. Thanks Kelly.

    In the part 1 -> Step #1, immediately after the code highlighted in RED, and before the code in Blue, paste this code:

    #tabs, #tabs a {
    font-size: 12px;
    }

    so the new code will be:



    margin-bottom: -1px;
    overflow: visible;
    }
    #tabs, #tabs a {
    font-size: 12px;
    }

    #fragment-1 {
    background: #999900; //Background color of content area 1 (tab 1)

    To add your own content in the tabs, please read the latest conversation between me and Nancy, and of course feel free to ask any of your doubts.

  19. Kelly,

    I was just going through your blog…It's good that your hubby is recovering. Hope he'll be absolutely healthy very soon.
    Also, it's a good decision that you have started a blog to share your life. You'll get a lot of suggestions, good wishes and help from the entire world now.

    I'm from India, where even now in most parts of the country alternate medicine is given a priority over allopathy. I'm a biotechnologist, but believe me I have seen MIRACLES (if that is what you call something, that science cannot answer completely) using alternate therapies.
    By alternate medicine, I mainly mean ayurveda, homeopathy(not much of help…but still it does work) and Yoga (& not going too deep to complicate it).

    If you have even 1% faith in what I'm telling, then please ask him to do at least some simple breathing exercises of Yoga (At least for 30min.-1hr a day). There are several breathing exercises and all of them will certainly help.
    To start with, ask him to do anulom-vilom pranayam (pranayam means breathing exercise) [video]. (If he isn't able to sit for long, then don't worry ask him to do this exercise while on the bed itself.)

    PS: I was going to comment on your blog, but your comment-form is not present on your blog, please activate it, so that people can share their views with you.

  20. Sai, Thanks, I didn't know that my comment thing on my blog wasn't working. I appreciate it. Will you try to make a comment now to see if it works for me? I think I fixed it. Thanks for the tips on the breathing, I will show it to my husband. He is actually doing really well now. He was in the hospital for 6 weeks and has been home from the hospital for 2 weeks now. He is re learning how to walk again. He is doing physical therapy 3 times a week. I have written so many stories about him, his health, our family, our kids, our crazy dogs etc… Just everything that has happened through this ordeal and it is on his website. A friend of mine started it for him, then when she went on vacation, I took over writing the "blogs" (journal entries) and it took off and now there's like over 4000 hits. I know that's not much in the big scheme of things but for our tiney little community it was a big deal.

    http://www.caringbridge.org/visit/richardjuell/journal

    I'm finding out that it is very similar to a blog, and I guess lots of people have enjoyed my stories because they say they want more and requested I start a blog as my husband gets better. I was a little resistant at first because I don't have time with 4 young kids but I know I need to write about our family's life and save that for our future generations, it's also therapeutic for me so I gave in. I really appreciate your help, I'm going to try to get the content in the tabs now, I'm sure I'll be back. –Kelly

  21. Kelly, nice to know that he's recovering fast. Good luck for your Macha Picchu trip 🙂
    BTW your comment-form is still not visible, that is because at the time of publishing that post, by default it was selected in your blog that new posts should not have comments. Anyways to correct it (from your second post onwards), while writing the post, at the bottom of the post-editor, there's a link 'post options' click on it and under "Reader Comments" select the radio button "Allow".
    Your journal at Carinbridge is also great, but of course at Blogger, you have your own domain with freedom to tweak the template as much as possible 🙂
    In case of any problem you find on Blogger or if you want to share something about your blog, then you're always welcome here !
    Moving on to your next comments at collapsible multi-tabbed widget…

  22. Hi there! Great tutorial! I've got only a very small, basic knowledge of programming, but this was perfect for helping me organize my blog the way I'd like.
    It looks perfect in Safari… but the tabs are completely ignored in IE or Firefox (everything is shown at once, flat & in line). I'm doing my best to figure out what I did incorrectly (the example tabs don't have that problem, so I'm sure I tweaked something that shouldn't have been tweaked), and I'd love some advice if you could point me in the right direction!
    Thanks so much!!
    Tess
    http://www.cozylittlecave.com

  23. OK- I think I may have fixed the problem! It appears that most browsers weren't able to pull the style sheet, but I changed where I was hosting it & I believe it's showing up correctly now! 🙂 Thanks though!

  24. Hi,
    I tried all the steps and went with the last or number 3 tabs, but no dice. I made a test blog to try it on, even downloaded the 2 files .js and .ccs on Sigmirror.com and placed the links, but I don´t think it works with "Add A Gadget" because it´s not in place as you can see on this test blog.
    Am I doing something wrong here?
    Thanks in advance, you seem to be the only one that provides this widget on the internet, in English anyway, so Im thankful.
    http://mexvideo.blogspot.com/

Leave a Reply

Your email address will not be published. Required fields are marked *