How to add or install menu tab view in the blog - I myself sometimes confused , a lot of widgets that should be displayed in the sidebar of my blog but ultimately insufficient because the place is not my plug . To overcome all that we can put on how to how to create a menu tab view 3 columns which would save space , because we can put widgets on the blogs that we want in the view menu tab .Here's how to create a menu tab view in the blog :
1 . Sign blogger >> Click Template >> Edit HTML .
2 . Find the code ] ] > < / b : skin>
3 . Copy the code below and paste just above the code ] ] > < / b : skin>
div.TabView div.Tabs{height: 24px ;overflow: hidden ;}div.TabView div.Tabs a{float: left ;display: block ;width: 103px ;text-align : center ;height: 24px ;padding -top : 3px ;vertical - align: middle ;border: 0.5px solid # 000000 ;border-bottom - width: 0 ;text-decoration : none ;font : 12px Arial , " Times New Roman " , serif ;font-weight : 900 ;color: # 000080 ;}div.TabView div.Tabs a: hover , div.TabView div.Tabs a.Active{background-color : # CEF6CE ;}div.TabView div.Pages{clear: both ;background-color : # FFFFFF ;border: 0.5px solid # 000000 ;overflow: hidden ;}div.TabView div.Pages div.Page{height: 100 % ;padding : 0px ;overflow: hidden ;}div.TabView div.Pages div.Page div.Pad{padding : 3px 5px ;
}
Note the words:width: 103px ; = width tabs ( tab1 , tab2 , tab3 ) .background-color : # CEF6CE ; = color background tabs ( tab1 , tab2 , tab3 ) .
The next look for the code < / head> then paste the script code below just above </ head >
<script type='text/javascript'>tabview_aux function ( TabViewId , id ){var TabView = document.getElementById ( TabViewId ) ;/ / ----- ----- Tabsvar 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 ) ;/ / ----- ----- Pagesvar 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 ------------------------------------------ -------------------tabview_switch function ( TabViewId , id ) { tabview_aux ( TabViewId , id ) ; }tabview_initialize function ( TabViewId ) { tabview_aux ( TabViewId , 1 ) ; }< / script>
4 . Save / Save Template .
5 . Furthermore Click Layout >> Add a Gadget >> Select HTML / Java Script .
6 . Copy the code below in the box or boxes in HTML / Javascript
<FORM action="tabview.html" method="get"><div class="TabView" id="TabView">class="Tabs" <div style="width: 350px;"><a> Title Tab 1 < / a><a> Title Tab 2 < / a><a> Title Tab 3 < / a>< / div >class="Pages" <div style="width: 350px; height: 250px;"><div class="Page"><div class="Pad">Contents tab 1< / div >< / div ><div class="Page"><div class="Pad">Contents tab 2< / div >< / div ><div class="Page"><div class="Pad">Contents tab 3< / div >< / div >< / div >< / div >< / form><script type="text/javascript">tabview_initialize ( ' TabView ' ) ;< / script > <div style="text-align: center;"> <span style="font-size: 0px;"> < span style = " font-family : " Trebuchet MS " , sans - serif ; " > Supported by <a href="http://www.seowaps.com/" seowaps target="_blank"> < / a> < / span > < / span > < / div >
Note the red text width: 350px ; This is not entirely the box size per tab . Then the paper title is the one that 1,2,3 Tab tab title , the title image above example is recent post , recent comments, statistics . Then the Contents tab in 1,2,3 can fill html script , banners and other widgets script .. Until this is completed it is not so difficult way to add a menu tab view in the blog , just takes a little patience : D. Want your blog more beautiful ? You can also navigate the page number in the blog . Here's how to create a navigation page numbers at the blog . Please try good luck.
Judul Artikel "
