Entri Populer

Followers

Diberdayakan oleh Blogger.
RSS

HOW TO CREATE MULTI TAB IN BLOGGER

Diposting oleh Unknown |

so guys here i share one of my skill, is how to create multi tab in blog
usually used on blogs whose content is solid .. so can save space .. 3 in 1 widget would happen ... just click tabnya just to move through the menu the next tab ... in the multi tab widget on each tab its script code you can embed Guest Book (Tab 1), the script code Contents (Tab 2), and Script Code Blogroll (Tab 3) or whatever it whatever you like ...

Insert code in the Script Menu Multi Tab HTML Code Blog Templates
1. As usual .. Login to Blogger> Design> Edit HTML (Get used to check expand widget templates) ..
2. Then Copy the script below ...

     /*----MULTItab----*/
     div.TabView div.Tabs
     {
     height: 35px;
     overflow: hidden;
     }
     div.TabView div.Tabs a
     {
     float: left;
     display: block;
     background-color: #56FCFA;
     -moz-border-radius:10px 0px 0px 0px;
     width: 125px;
     text-align: center;
     height: 35px;
     padding-top: 3px;
     vertical-align: middle;
     border: 0px solid #999999;
     border-bottom-width: 0;
     text-decoration: none;
     font-family: "Times New Roman", Serif;
     font-weight: 900;
     color: #000000;
     }
     div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
     {
     background-color: #56FCFA;
     text-shadow: 4px 4px 4px #aaa;
     font-size:12px;
     }
     div.TabView div.Pages
     {
     clear: both;
     border: 0px solid #999999;
     -moz-border-radius:0px 0px 0px 10px;
     text-shadow: 4px 4px 4px #aaa;
     font-size:14px;
     overflow: hidden;
     background-color: #56FCFA;
     }
     div.TabView div.Pages div.Page
     {
     height: 100%;
     padding: 0px;
     overflow: hidden;
     }
     div.TabView div.Pages div.Page div.Pad
     {
      padding: 3px 5px;
      }
      /*----end----*/

3. And paste it before ]]></ b: skin> ... like the example below ... 

     /*----MULTItab----*/
     div.TabView div.
     {
     height: 35px;
     overflow: hidden;
     }
     div.TabView div.Tabs a
     {
     float: left;
     display: block;
     background-color: #56FCFA;
     -moz-border-radius:10px 0px 0px 0px;
     width: 125px;
     text-align: center;
     height: 35px;
     padding-top: 3px;
     vertical-align: middle;
     border: 0px solid #999999;
     border-bottom-width: 0;
     text-decoration: none;
     font-family: "Times New Roman", Serif;
     font-weight: 900;
     color: #000000;
     }
     div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
     {
     background-color: #56FCFA;
     text-shadow: 4px 4px 4px #aaa;
     font-size:12px;
     }
     div.TabView div.Pages
     {
     clear: both;
     border: 0px solid #999999;
     -moz-border-radius:0px 0px 0px 10px;
     text-shadow: 4px 4px 4px #aaa;
     font-size:14px;
     overflow: hidden;
     background-color: #56FCFA;
     }
     div.TabView div.Pages div.
     {
     height: 100%;
     padding: 0px;
     overflow: hidden;
     }
     div.TabView div.Pages div.Page div.Pad
     {
     padding: 3px 5px;
     }
     /*----end----*/
     ]]></b:skin>
 4. Back to Wigdet Edit HTML ... Copy the code below again ...

     <script type='text/javascript'>
     function tabview_aux(TabViewId, id)
     {
     var TabView = document.getElementById(TabViewId);

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

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

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

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

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

     var Pages = TabView.firstChild;
     while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

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

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

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

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

     function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
     </script>

5. Paste the code right before </ head> ... like the example below ...
      <script type='text/javascript'>
     function tabview_aux(TabViewId, id)
     {
     var TabView = document.getElementById(TabViewId);

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

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

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

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

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

     var Pages = TabView.firstChild;
     while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

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

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

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

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

     function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
     </script>

     </head>
6. If completed and correct, in accordance with the steps above .. then click Save Template ...

Adding Multi Tab Menu Widget in Blog Page Element

1. Blogger> Design> Page Elements> Add a Gadget> HTML / Javascript ... (Please put this widget Menu Multiple Tab on the blog page that you want) ...
2. Then Copy the script below ...
     <form action="tabview.html" method="get">
     <div class="TabView" id="TabView">
     <div class="Tabs" style="width: 80;text-shadow: 4px 4px 4px #aaa;font-size: 12px;">
     <a>CHANGE THE NAME OF THIS MENU TAB 1</a>
     <a>CHANGE THE NAME OF THIS MENU TAB 2</a>
     <a>CHANGE THE NAME OF THIS MENU TAB 3</a>
     </div>
     <div class="Pages" style="width: 465px; height: 250px;">

     <div class="Page">
     <div class="Pad">
     CONTENT MENU TAB 1 - PASTE CODE SCRIPT BOOK GUEST LIST OR THE CONTENT OR      blogroll HERE YA ..
     </div>
     </div>

     <div class="Page">
     <div class="Pad">
     CONTENT MENU TAB 2 - PASTE CODE SCRIPT BOOK GUEST LIST OR THE CONTENT OR       blogroll HERE YA
     </div>
     </div>

     <div class="Page">
     <div class="Pad">
     CONTENT MENU TAB 3 - PASTE CODE SCRIPT BOOK GUEST LIST OR THE CONTENT OR      blogroll HERE YA ..
     </div>
     </div>

     </div>
     </div>
     </form>

     <script type="text/javascript">
     tabview_initialize('TabView');
     </script> 
3. If you already .. Save & Refresh your blog to see the results ... 

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS
Diposting oleh Unknown

1 komentar:

Unknown mengatakan...

please comment because I really appreciate all constructive criticism and suggestions

25 Oktober 2011 pukul 22.47

Posting Komentar

Langganan: Posting Komentar (Atom)