Hot Gadget : Making A Tab View

Today Tutorial blog and Blogger hack  TabView is a easy ways to give information to the readers especially for the blog with limited space. You can fill TabView with shoutmix, twitter, recent comment, or else.

 

With this Tutorial blog we will make TabView easy, so please keep your focus, now we begins:

• Go to Layout, choose Edit HTML
• Backup your blog and Expand widget Template
• Copy-Paste code below and put above the

  ]]></b:skin>

  div.TabView div.Tabs
  {
  height: 24px;
  overflow: hidden;
  }
  div.TabView div.Tabs a
  {
  float: left;
  display: block;
  width: 90px; /*width of main menu*/ text-align: center;
  height: 24px; /* height of main menu */
  padding-top: 3px;
  vertical-align: middle;
  border: 1px solid #F4F4F4; /* border colour from above */
  border-bottom-width: 0;
  text-decoration: none;
  font-family: "Times New Roman", Serif; /* Type of Fonts */
  font-weight: 900;
  color: #F4F4F4; /* Colour of fonts*/
  }
  div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
  {
  background-color: #FFFFFF;/* background colour*/
  }
  div.TabView div.Pages
  {
  clear: both;
  border: 1px solid #F4F4F4; /* line colour menu*/
  overflow: hidden;
  background-color: #FFFFFF; /* backgorund colour */
  }
  div.TabView div.Pages div.Page
  {
  height: 100%;
  padding: 0px;
  overflow: hidden;
  }
  div.TabView div.Pages div.Page div.Pad
  {
  padding: 3px 5px;

   

  • Noe put this code before tag </head>

  <script src="http://h1.ripway.com/khantry/javascript/tabview.js" type="text/javascript"></script>

   

  • Then Save
  • Now back to Layout and add a gadget
  • Choose HTML/Javascript and COpy-Paste code below

  <form action="tabview.html" method="get">
  <div class="TabView" id="TabView">
  <div class="Tabs" style="width: 350px;">

  <a>Tab 1</a>

  <a>Tab 2</a>

  </div>
  <div class="Pages" style="width: 350px; height: 250px;">
  <div class="Page">
  <div class="Pad">

  Code Here 1.1 <br />

  Code Here 1.2<br />

  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Code Here 2.1 <br />
  Code Here 2.2<br />
  </div>
  </div>
  </div></div>
  </form>
  <script type="text/javascript">
  tabview_initialize('TabView');
  </script>

   

  Then Save, Now please look this explanation :

  • You can change this width: 350px and  height: 250px
  • Change the blue code with your Text or title
  • Change the red code with your Javascript eg: shoutmix code, image, or else

  That’s tutorial blog today, hope you enjoy this, if there’s any error just tell me and i will give you a hand.

  Thanks for coming in tutorial blog and blogger hack

Enter your email To get Update this blog for free:

Delivered by FeedBurner

Related Posts by Categories