true pillager: Making TabView + Subpoint

Many ways to create a TabView, but in this tutorial I tried to explain how to create a TabView plus subpoint with direct application methods on blogger template.

Before making TabView this model, we first must know the width of the sidebar, a place where TabView will be added.
Step by step how to create a TabView + subpoint.

1. Login to Blogger.
2. Before editing your template, you may want to save a copy of it. Download Full Template
3. Click on the layout, then Edit HTML.
4. Without checking the "Expand Widget Templates" add the following code before the code ]]></ b: skin>.

/** tabview **/

div.TabView div.Tabs { height: 24px;margin-left:14px; overflow: hidden;} div.TabView div.Tabs a { float: left; display: block; width: 90px; text-align: center; height: 24px; padding-top:2px; margin:2px; vertical-align: middle; background:#8BEDF9;border:1px solid #2C4755; text-decoration: none; font-family: "Arial", Tahoma; font-size:11px; font-weight: bold; color: #000; } div.TabView div.Tabs a:hover{background-color: #2C4755; color: #fff;} div.TabView div.Tabs a.Active{background-color: #DEFCFF; color: #000;} div.TabView div.Pages { background:#ffffff; clear: both; border-top: 1px solid #2C4755; overflow: hidden;font-family:"Arial", Tahoma, Verdana;} div.TabView div.Pages li { border-bottom:1px solid #6D7B8D; background:#ffffff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-AQUgTE57d5UABy7Z83lx2AgjPDFGOcReLiHReLBAd7B0v9VCxQyv5nyuvbbx6nqVbPyb1dDOeToR-CBHcoW_puQtUulPBp4B2X2RLFUXPBo4qYPwxY1MZ7dzPHzyXWntqN1TKezeiAAW/s320/arrow_icon2.png") no-repeat 0px .25em ; margin:0; padding:0 0 .30em 17px; line-height:1.7em } div.TabView div.Pages div.Page {height: 100%; padding: 0px; overflow: hidden;} div.TabView div.Pages div.Page div.Pad {padding: 3px 5px;}

Please set the value and color according to taste.

5. Then add this JavaScript file, among ]]></b:skin> and </head>.

<script type='text/javascript'>

//<![CDATA[

// <script>

// 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); }

//]]>

</script>

Next save the template.

6. Still in the layout, click the page element and then added the gadget and enter the code below.

<div action="tabview.html" <form method="get"> id="TabView" class="TabView"> <div style="width: <a> 315px;" class="Tabs"> Title tab 1 </ a> <a> Title tab 2 </ a> <a> Title tab 3 </ a> </ div> <div style="width: 315px; height:200px;" class="Pages"> <div class = "Page"> <div class="Pad"> Enter your brief description here .... <a href="url link"> title of your link </ a> </ li> <a href="url link"> title of your link </ a> </ li> <li> < a href = "url link"> title of your link </ a> </ li> </ div> </ div> <div class="Page"> <div class="Pad"> <div class = "Page" > <div class="Pad"> Enter your brief description here .... <a href="url link"> title of your link </ a> </ li> <a href="url link"> title of your link </ a> </ li> <li> < a href = "url link"> title of your link </ a> </ li> </ div> </ div> <div class="Page"> <div class="Pad"> Write your brief description here .. .. <a href="url-link"> title of your link </ a> </ li> <a href="url link"> title of your link </ a> </ li> <li> <a href="url link"> title of your link </ a> </ li> </ div> </ div> </ div> </ div> </ form> <script type="text/javascript"> tabview_initialize ( 'TabView'); </ script>