dhtml tabview

easy, instant dhtml tabview

get it here: http://www.widgetbox.com/widget/dhtmltabview

blogspot / blogger dhtml tabview

# do NOT copy anything started with #
# view your blogspot html source
# note the widget ID that you want to build into tabview
# copy and paste this code right after </title> so that it looks like this:

<!--// dhtml tabview blogspot hack begins. (c) 2008 dennyhalim.com //-->
<link href='http://statics.mypolaris.com/tabcontent.css' rel='stylesheet' type='text/css'/>
<script src='http://statics.mypolaris.com/tabcontent.js' type='text/javascript'/>
<!--// dhtml tabview blogspot hack end. (c) 2008 dennyhalim.com //-->

# you can setup your own css if you like.
# Add a Page Element
# choose 'HTML/JavaScript'
# paste this code into it:

<ul id="posttabs" class="shadetabs"> 
<li class="selected"><a href="#" rel="LinkList2">Features</a></li> 
<li><a href="#" rel="Feed2">Posts</a></li> 
<li><a href="#" rel="Feed1">Comments</a></li> 
<li><a href="#" rel="Profile1">Me</a></li> 
<li><a href="http://it.dennyhalim.com/" title="get this blogspot dhtml tabview hack">!</a></li>

# replace everything in rel="your widget ID here"
# note the ul id.
# klik Save
# move this widget right before all your tabbed widgets
# Add a Page Element again
# choose 'HTML/JavaScript' again
# paste this code into it:

<script type="text/javascript">
//activate the dhtml tab
var myposts=new ddtabcontent("posttabs") //enter ID of Tab Container
myposts.setpersist(true) //toogle persistence of the tabs' state
myposts.setselectedClassTarget("link") //"link" or "linkparent"
</script><noscript><a href="http://wiki.dennyhalim.com/blogspot:hacks" title="get this blogspot hack">this dhtml tabview blogspot hack require javascript enabled browser</a></noscript>

# Save
# move this widget to the most bottom of your blogspot
# repeat it to build more tabviews from more widgets
# Save all changes
# Finish


<b:widget id='Slideshow1' locked='false' title='TITLE YOU ENTERED IN
THE WIDGET' type='Slideshow'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>

  <div class='widget-content'>
    <div class='slideshow-container' expr:id='data:widget.instanceId +
"_slideshow"' style='width:300px; height:200px;'> # change the width and height to suite your needs.
      <span class='slideshow-status'>Loading...</span>

  <b:include name='quickedit'/>
Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License