Tab View Menu for Blogger

Tag
Diposkan oleh Unknown on Wednesday, January 26, 2011 di Wednesday, January 26, 2011


1. Enter the following code in the header between <head> and <head>

<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js" type="text/javascript">

2. Paste code below into an external JavaScript file named: tabView.js

/* Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
Technical support: http://www.php-development.ru/

YOU MAY NOT
(1) Remove or modify this copyright notice.
(2) Distribute this code, any part or any modified version of it.
    Instead, you can link to the homepage of this code:
    http://www.php-development.ru/javascripts/tabview.php.

YOU MAY
(1) Use this code on your website.
(2) Use this code as a part of another product.

NO WARRANTY
This code is provided "as is" without warranty of any kind, either
expressed or implied, including, but not limited to, the implied warranties
of merchantability and fitness for a particular purpose. You expressly
acknowledge and agree that use of this code is at your own risk.


If you find my script useful, you can support my site in the following ways:
1. Vote for the script at HotScripts.com (you can do it on my site)
2. Link to the homepage of this script or to the homepage of my site:
   http://www.php-development.ru/javascripts/tabview.php
   http://www.php-development.ru/
   You will get 50% commission on all orders made by your referrals.
   More information can be found here:
   http://www.php-development.ru/affiliates.php
*/

// ----- Auxiliary -------------------------------------------------------------

function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }

3. Paste code below into your external CSS file or in the <style> section within the HEAD section of your HTML document.

div.TabView div.Tabs {
  height: 24px;
  overflow: hidden;
}

div.TabView div.Tabs a {
  float: left;
  display: block;
  width:  90px;
  text-align: center;
  height:      24px;
  line-height: 28px;
  vertical-align: middle;
  background: url('http://javascript.internet.com/img/tab-view/tabs.png') no-repeat -2px -1px;
  text-decoration: none;
  font-family: "Times New Roman", Serif;
  font-weight: 900;
  font-size: 13px;
  color: #000080;
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {
  background: url('http://javascript.internet.com/img/tab-view/tabs.png') no-repeat -2px -31px;
}

div.TabView div.Pages {
  clear: both;
  border: 1px solid #404040;
  overflow: hidden;
}

div.TabView div.Pages div.Page {
  height: 100%;
  padding: 0px;
  overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
  padding: 3px 18px;
}

4. Paste this code into the BODY section (in the elements of a page=> add gadgets => HTML/JavaSript)

<div class="TabView" id="TabView">

<!-- *** Tabs ************************************************************** -->

<div class="Tabs" style="width: 350px;">
  <a>Basic Info.</a>
  <a>Categories</a>
  <a>Order Form</a>
</div>

<!-- *** Pages ************************************************************* -->

<div class="Pages" style="width: 450px; height: 250px; text-align: left;">

  <div class="Page">
  <div class="Pad">

  <!-- *** Page1 Start *** -->

<br>
You can put regular text on the tabs.
<p>
We have put together a collection of thousands of free JavaScripts that are available to you for use on your Web pages. The scripts are available, including a working JavaScript example of most of the scripts and the complete actual JavaScript code used.</p>
<p>
We also have a great JavaScript Forum where you can post script requests, script questions, and more.</p>


  <!-- *** Page1 End ***** -->

  </div>
  </div>

  <!-- *** Page2 Start *** -->

  <div class="Page">
  <div class="Pad">
<br>
Categories include:<br>
<table cellpadding="15" valign="top">
<tr>
<td>
• Cookies<br>
• CSS<br>
• Forms<br>
</td><td>
• Games<br>
• Generators<br>
• Image Effects
</td><td>
• Math Related<br>
• Miscellaneous<br>
• Navigation
</td></tr><tr><td>
• Page Details<br>
• Security<br>
• Snippets
</td><td>
• Time & Date<br>
• Tools<br>
• Tutorials
</td><td>
• Text Effects<br>
• User Details
</td>
</tr>
</table>

  <!-- *** Page2 End ***** -->

  </div>
  </div>

  <div class="Page">
  <div class="Pad">

  <!-- *** Page3 Start *** -->

  <br>
<p>
You can also use forms on the tab pages. <small><em>(This one is just an example; it doesn't work.)</em></small></p>

  <table>
  <tr>
    <td>Username: </td>
    <td><input style="width: 120px;" type="text"     name="username" /></td>
  </tr>
  <tr>
    <td>Password: </td>
    <td><input style="width: 120px;" type="password" name="password" /></td>
  </tr>
  <tr>
    <td> </td>
    <td><input type="submit" value="Submit" /></td>
  </tr>
  </table>

  <!-- *** Page3 End ***** -->

  </div>
  </div>

5. Add this to the end of your page:

<script type="text/javascript">
  tabview_initialize('TabView');
</script>

6. Done