How to Create Horizontal Tabs Menu in Blogger Template ?

This is Trick to make your blog presentation beautiful, add horizontal menu in your blogger header but how ? Learn this tab implementation i...

This is Trick to make your blog presentation beautiful, add horizontal menu in your blogger header but how ? Learn this tab implementation in few steps.


You have to work on three parts design button, create CSS and HTML code. Now create "Horizontal tabs menu" in blogger.




Create some Image whch match with your Template or Use Following Image for your Templates


blackleft.gifblackright.gif
greenleft.gifgreenright.gif
redleft.gifredright.gif
unguleft.gifunguright.gif
yellowleft.gifyellowright.gif
blueleft.gifblueright.gif
whiteleft.gifwhiteright.gif


1. Login to Blogger, chose "Lay out --> Template --> Edit HTML"
2. Don't forget to backup your template first.
3. Check the "Expand Widget Templates" checkbox.
4. Try to find this code ]]></b:skin>, if you found it then put the code below above it

/*credits : http://howtoraj.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /*Under Line, you can change or delete it */
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /* Menu position*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://blogoholic.info/files/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("http://blogoholic.info/files/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E; /*Text menu color*/
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

you can change the bold text with other image, for example, if you want to chose my red menu image the code will be like this:

background:url("http://blogoholic.info/files/menu/redleft.gif") no-repeat left top;

background:url("http://blogoholic.info/files/menu/redright.gif") no-repeat right top;

5. Then copy the code below

<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://trick-blog.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Blog Dictionary</span></a></li>
<li><a href="http:/trick-blog.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

change http://howtoraj.blogspot.com with your own link, and change the bold text with your own text.

6. Next step is to put the tabs menu into your blog, this more difficult because we have different templates. There are some methods to do this, Here is the methods, you can chose and try for any methods.

Method Step - I :
Find this code :<div id="content-wrapper">. if you found it, paste the above code (code number five) above it. Preview your template, if it looks good save your editting, but if it's not good try to put above this code </div>, you will find many codes like that, try to put the code above it and preview your your blog, do it more often until it's suitable for your template.
If you have nice with your menu position, is unnecessary to do method II but if you feel difficult to apply  Method - I you can try method II

Method Step - II :

Find the below code :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

change the green text so that to become like this:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

Save your setting, the go to "Page Elements" and click "Add page Element " on the header area, chose "HTML/JavaScript" then put the number five code above into "content" box, then click "save" and preview your new blog.

Source : Trick and Tips Blog

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 Horizontal Tabs Menu in Blogger Template ?
How to Create Horizontal Tabs Menu in Blogger Template ?
http://blogoholic.info/files/menu/horizontal.jpg
YourDataPlan - Telecom Updates & News - Jio, 4G,3G,LTE, Mobiles Data Plan
http://www.getfreedataplan.com/2008/11/how-to-create-horizontal-tabs-menu-in_2627.html
http://www.getfreedataplan.com/
http://www.getfreedataplan.com/
http://www.getfreedataplan.com/2008/11/how-to-create-horizontal-tabs-menu-in_2627.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