Skip to main content

Multi Tab Widget For Blogger/Blogspot Blogs(easiest way)

Multi tab Widget(tab view widget)  is a must widget for every blog beCoz of it's unbeaten features.It is by far most easy way of getting tab view there are hundreds available on the net just use google which include editing CSS at 2 or more places and playing with javascrpts but this one is sure for simple and surely working.


Instructions-

1.Copy the code given below and paste it in notepad.





    <style type="text/css">
    div.TabTampil div.TTs
    {height: 24px; overflow: hidden; }
    div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
    { background-color: #0084ce; }
    div.TabTampil div.Halamans
    { clear: both; border: 1px solid #0084ce; overflow: hidden; background-color: #ffffff;}
    div.TabTampil div.Halamans div.Halaman
    { height: 100%; padding: 0px; overflow: hidden; }
    div.TabTampil div.Halamans div.Halaman div.Alas
    { padding: 3px 5px; }
    div.TabTampil div.TTs a
    { border-left:1px solid #0084ce; border-right:1px solid #0084ce; border-top:1px solid #0084ce; border-bottom:0px solid#0084ce; float: left;
    display: block; width: 79px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
    font-size: 11px; font-weight: 900; color: #000000}
    </style>

    <form action="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a>

    <a>Tab 3</a></div>
    <div style="width: 300px; height: 310px;" class="Halamans">

    <div class="Halaman">
    <div class="Alas">

  Tab 1 content goes here

    </div>
    </div>

    <div class="Halaman">
    <div class="Alas">

   Tab 2 content goes here

    </div>
    </div>

    <div class="Halaman">
    <div class="Alas">

    Tab 3 content goes here
   

    </div>

    </div>
    </div>

    </div></form>

    <script style="text/javascript" src="http://sites.google.com/site/tntbystc/Home/tabwidget-smart.txt?attredirects=0"></script>
    <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

2.Customize according to your need.

#0084ce : This is the background colour of the Tabs. The Default one is blue. If you want to change it to a different colour of your choice then use this colour chart
#0084ce :  This is the colour of the outline/frame of your multi tab widget. The default one is blue you can customize it to a colour of your choice using the same colour chart mentioned above.
#ffffff : This is the background colour of the main body of your widget. This is where you will add content in place of the texts Tab x content goes here The default one is white. Use again the colour chart to modify the colour. If you want a black background use #000000
#0084ce : This is the colour of the borders around those rectangular tabs. The default one is blue.
#000000 : This is the colour of the text/font that you will write to name your tabs. In other words, it’s the colour of your tab titles. The default one is black. If you want to choose a Black background colour for your tabs then choose a white coloured font/text i.e #ffffff
Tab 1 , Tab 2 , Tab 3 : Replace these with your tab titles

Tab 1 content goes here :
Tab 2 content goes here :
Tab 3 content goes here : Here goes the codes of your content/widgets, which can be your recent comments widget, recent posts widget, any written text, a picture etc. For example, to add a recent comments widget to the first tab, name Tab 1 as Comments and replace Tab 1 content goes here with the HTML code of your recent comments widget.




3.Adding it to sidebar.



  • Log into your blogger account



  • Go to Layout > Page Elements

     






  • Click on Add a Gadget
  • Then Choose HTML/JavaScript Widget from the widget list that blogger provides.
Now paste your customized code into this widget by leaving the title empty. Hit Save and You are Done!

Comments

Post a Comment


Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,
Admin

Popular posts from this blog

Best DoFollow Blog directories list for seo

List of Dofollow Blog directories,
Note: some items have profile information some do not, doesn’t matter, they’re all DoFollow Blog directories so submit your blogs to them all.
DOFOLLOW BLOG DIRECTORIES

Bloghop.com
Year Site Created: 2000
Indexed Pages in Google: 103,000
Backlinks in Yahoo: 542,700
PageRank: 6
Link Status: Dofollow
Quantcast Rank: 200,223
Editorial Policy: Yes
Spam in index: No
Submission rules: From the website:
We will reject: Spam blogs, hate blogs, stolen blogs, links to non-blog websites, links to illegal or illicit topics like child pornography. Blogs with under 5 posts are no longer accepted, but they might be waitlisted for later review if they look cool.
Commercial blogs are fine, but they must be “fun and useful.” Because of the huge amount of robot-generated blogs being submitted, blogs with the following will not be approved for listing: Acne, Mesothelioma, Real Estate, Lawsuits, Insurance, Gambling, SEO, Web Marketing, Medical Procedures and En…

Get ip-address widget for your blogger

Here is a unique collection of  IP address widgets which shows your visitors their Ip address,operating system,country,browser and the version of the browser.It is cool thing to display  ip address to your visitor's specially if you have TECH related blog.
Now you can get these any of these widgets and add these to your blogs by following these steps -

Get Ip Address Widget for your blog

1 .Choose any widget they are in different size and shapes,choose any according to your blog requirement.
2. Login to blogger dashboard ,and the click on Layout - > page Elements .
3. ADD a new HTML/Javascript gadget anywhere in your blog.
4. Copy any code from below(all are working) and paste in to HTML / Javascript gadget and then save your gadget.
5 Done,Your widget is Now live


1 .Square Ip Address Widget (Height=125px, Width=125px)<!--Ip Address Widget Starts--><span style="display: block; text-align: center;"><a href="http://myfundoo-blog.blogspot.com">…

27 Photography Blogger Templates for your Photo blog

This collection contain 27 different templates with unique banner unique design to each template, you’ll definitely find a Photography blogger template for you and your blog.The list includes Photoblog and Gallery style Blogger templates that you can use for showcasing your photos and design portfolio.Photo gallery blogger template

Don't forget to check out my previous collection of  33 music style blogger templates themes and xmls and
16 football/soccer blogger templates
1. Tequilas Flamejantes – DarkBlack color, Dark background. Gallery Blogger Templates 4 column, Right sidebar Fixed width, 1 sidebar.Photography Blogger Templates
This template for Gallery, Photo , blogs
DemoDownload 2.Tequilas Flamejantes – lightPhoto Gallery Blogger Templates This template for Photo gallery blogs Fixed width, Right sidebar. Yellow color, Light background. 4 column, 1 sidebar
DemoDownload 3. Photoplus Light Photography Blogger TemplatesFixed width, No sidebar. Light color, White backg…