How To Create Tab View in Blogger Template ?

How to show different labels or post in blogger as Tab View. Trick blog has given a good solution for this. Create Tab View like below image...

How to show different labels or post in blogger as Tab View. Trick blog has given a good solution for this.




Create Tab View like below image for your blog template with easy steps, follow below



Steps to create tab view:



1. Login to blogger, go to "Layout --> Edit HTML"

2. Then find this code ]]></b:skin>

3. Insert the below code before ]]></b:skin> or in CSS tag.



div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 90px; /* Width top main menu */

text-align: center;

height: 24px; /* Height top main menu */

padding-top: 3px;

vertical-align: middle;

border: 1px solid #000; /* Top Main menu border color */

border-bottom-width: 0;

text-decoration: none;

font-family: "Times New Roman", Serif; /* Top main menu font */

font-weight: 900;

color: #000; /* Top main menu font color */

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #FF9900; /* Top main menu background color */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #6E6E6E; /* Content Border color */

overflow: hidden;

background-color: #FF9900; /* Content background color */

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 0px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}





4. You can change the code according to the text explanation.

5. The next step is put the code below before </head>



<script src='http://howtoraj.googlepages.com/tabview.js' type='text/javascript'/>





6. Then "save" it.

7. Go to "Page Elements" menu

8. Chose "Add Page Element" --> "HTML/Javascript" in place where you want to put this tab.

9. Insert this code :



<form action="tabview.html" method="get">

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

<div class="Tabs" style="width: 350px;">

Tab 1

Tab 2

Tab 3


</div>

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



<div class="Page">

<div class="Pad">

Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />

</div>

</div>



<div class="Page">

<div class="Pad">

Tab 2.1 <br />

Tab 2.2 <br />

Tab 2.3 <br />

</div>

</div>



<div class="Page">

<div class="Pad">

Tab 3.1 <br />

Tab 3.2 <br />

Tab 3.3 <br />

</div>

</div>



</div>

</div>

</form>



<script type="text/javascript">

tabview_initialize('TabView');

</script>





Tips To Remember :



- The number or the blue text(350px) Is size of the tabview.

- The green code is the main menu text

- The red code is the content of tabview. you can fill it with links, banner, widget, comment or anything.

- To add more menu, see on the blink code. Add the code under it.







Technology Updates On Mail


COMMENTS

Name

3G,9,4G,9,ADSENSE,3,aircel,4,airtel,16,Android,8,Announcements,1,Apple,12,Asus,2,BHIM,1,Blackberry,11,Blogger Hacks,10,Blogger Templates,56,broadband plan,7,Browser,8,BSNL,13,Computer Games,6,Coupon Code,1,Customer Support,32,D2H,1,Data Plan,25,Dell,1,Digital Banking,2,Do Not Call,7,Downloads,31,DTH,8,Electronic Items,8,facebook,12,featured,1,free antivirus,7,Gadget News,7,google news,21,google Tips,10,GPS,5,Hacks And Tricks,7,HCL Laptop,1,Hitachi,1,howto,8,HP,2,HTC,5,Idea,5,Internet,7,Intex,1,iPhone,25,iPhone Price List,1,Kerala,2,Laptop,24,LAVA,7,Lenovo,3,LG,6,micromax,1,Microsoft,1,Miscellaneous,174,MNP Change,1,mobile Applications,8,Mobile Number Portability,3,Mobile Phone Price,29,Mobile Phone Review,124,mobile tariff plan,63,Mobile Unlocking Code,1,Mobile Wallet,2,motorola,12,MS Office,1,MTNL,1,Nokia,30,Offbeat News,1,Orkut,1,Paypal,1,PayTm,1,phone,4,Price List,2,reliance communication,4,Reliance Communications,2,Reliance Jio,25,Resources,1,samsung,9,Samsung Mobile Price List,1,SEO,2,skype,2,social media,1,software,4,Sony Ericsson,2,Sony Phone Price List,1,spice,2,Tablet,1,tata DOCOCMO,4,Tata Indicom,3,TATA Sky,1,Tech Define,2,Tech News,474,toshiba,1,twitter,1,Uninor,1,Upcoming Products,3,UPI,1,USSD Codes,9,Verizon,1,videocon,2,Vodafone,6,vodaofne,4,Web Hosting,6,Whats App,3,Windows,22,Wordpress,2,Wordpress Pluging,1,Xbox,1,Xiaomi,3,YouTube Hacks,5,
ltr
item
YourDataPlan - Telecom Updates & News - Jio, 4G,3G,LTE, Mobiles Data Plan: How To Create Tab View in Blogger Template ?
How To Create Tab View in Blogger Template ?
http://1.bp.blogspot.com/_-HHcbL2aWiU/SJNTRSyu9mI/AAAAAAAAA2Y/hUsujRUjvmg/s320/tabview.jpg
http://1.bp.blogspot.com/_-HHcbL2aWiU/SJNTRSyu9mI/AAAAAAAAA2Y/hUsujRUjvmg/s72-c/tabview.jpg
YourDataPlan - Telecom Updates & News - Jio, 4G,3G,LTE, Mobiles Data Plan
http://www.getfreedataplan.com/2008/11/how-to-create-tab-view-in-blogger_1312.html
http://www.getfreedataplan.com/
http://www.getfreedataplan.com/
http://www.getfreedataplan.com/2008/11/how-to-create-tab-view-in-blogger_1312.html
true
4333792579372704303
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy