ADVERTISEMENTS
A tabbed navigation widget for your blog
Highlighting your recent posts, comments and label feeds is a great way of ensuring readers will stay on your blog for a longer period of time. However, featuring too much content in your sidebar or above the main posts column can often make your blog appear cluttered.
A more streamlined method for presenting such content is to use a tabbed navigation widget,
How to install Tab View Widget??
Log in to Blogger
Go to Lauout -> Edit HTML tab
Then find for this code:
Then immediately ABOVE / BEFORE it, paste this code:
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:
Code Here:
With Auto-scrolling tabs...
Code Here:
A more streamlined method for presenting such content is to use a tabbed navigation widget,
How to install Tab View Widget??
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://dsai.588.googlepages.com/tabcontent.css" />
<script type="text/javascript" src="http://dsai.588.googlepages.com/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://wondeful-tricks.blogspot.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>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 ):
<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="http://wondeful-tricks.blogspot.com">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 />Tab content 1 here<br />
</div>
<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br />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="http://wondeful-tricks.blogspot.com/" target="_blank"><span style="font-size: x-small;">Blogger Widgets</span></a>
<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 />Tab content 1 here<br />
</div>
<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />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="http://wondeful-tricks.blogspot.com">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="http://wondeful-tricks.blogspot.com/" target="_blank"><span style="font-size: x-small;">Blogger Widgets</span></a>
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="http://wondeful-tricks.blogspot.com">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 />Tab content 1 here<br />
<p><b><a href="javascript: mypets.expandit('myfavorite')">Click here to select tab with id="myfavorite"</a></b></p>
</div>
<div id="dog2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="dog3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="dog4" class="tabcontent">
Tab content 4 here<br />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="http://wonderful-tricks.blogspot.com/" target="_blank"><span style="font-size: x-small;">Blogger Widgets</span></a>
Thanks.. i try direct copy from dinamicdrive.com, always failed and from your blog,i can added the tabview. Btw, please correct your blog link (Blogger Widget) I think is not true (in my blog your blog link is true, i was corrected)
http://siteblogtheme.blogspot.com
:-)
Thank You Mr.Ireng_ajah for your support...
Blogger Widgets...
http://wondeful-tricks.blogspot.com???
or
http://wonderful-tricks.blogspot.com???
:-)
It is:
http://wonderful-tricks.blogspot.com
I have corrected it.. Thankyou once again..