How To Add Attractive Menubar With Icons For Blogger /*

Blog Top Sites

How To Add Attractive Menubar With Icons For Blogger




1. Log in to blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag
#bloggertrix-bar{ margin:10px;} #bloggertrix-bar .link a{ float:left; padding:8px; background-color:#eeeeee; display:block; margin-right:9px; text-decoration:none; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; font-family:Tahoma, Geneva, sans-serif; font-size:15px; color:#666; font-weight:bold; text-shadow:1px 1px 1px #fff; } #bloggertrix-bar .link a:hover{ background-color:#d2cece; text-shadow:1px 1px 1px #fff; } /*menubar by bloggertrix.com */
5. Now Find this code  by using Ctrl+F <div id='content-wrapper'>

6.  Paste below code Before <div id='content-wrapper'> code

<div id="bloggertrix-bar">
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs4FAsqZV9WBd4aat84YiTWwd9GmMx2MfSXZV30HUSIwH4WKEU2HqM93kUeYqDU_Xw6mvNuGtVCuV7KMwYJrEVcEVdrO8B3fXOVT-Uy-BbBUDJRSYcyIRhC-5dGR2Fo9RPHraWuIKVl9U/s1600/www.bloggertrix.com_home.png" vspace="0" width="16" /> Home</a></div>
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgrHPlWXaBPmgaBzqPqd56fkjIWo1n-zfXh2Y-AZ6Mhyhp8yqAWYtJnKW1fQW8QfNAsCIJddso-b7Y2AjogXYL_vllDOBhOhKwKTsdxxEE6N8GWCuNv8QNB3nH9rOKx-L6GQ3MIgb7eic/s1600/www.bloggertrix.com_contact.png" vspace="0" width="16" /> Contact</a></div>
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjespS7N_604P1Qg8kK7l5ZrcDWmZSLjwwXQI7rVjAwuSIp0pQRb04TksyIlSV26uaIinX6JMgEYZQEFQK5N5wkmlF0bKvl6oo4lks7n2wbMuJnp9KifM8xUx8xAZuucaFC4JU1djkXgnQ/s1600/www.bloggertrix.com_+Help.png" vspace="0" width="16" /> Forum</a></div>
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb4OFtAtlzsP6iarqb7KLOEtkm2sG9ic3DkCEhTR_agQIDbfGw9UzIctLcfdmXmLl4yN2p87Qy9CZC8BoTv6IhkHLP9I1AfBBtEsJ409i_2K2lr7hwsyGsjXP3qNBZUxjLcj5a4JHBZl8/s1600/www.bloggertrix.com_design.png" vspace="0" width="16" /> Advertise</a></div>
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGhG-PF8OZrhDcYL2-wbn6jEJIb5OctBXj2DYCskezJiTHgAFg3JEUiQjrfV8upHBiqHsx9CBmGOPV1nXpw6lH2OwAl4eAZqjxBGwtpgMEqdeV6iBSMfmV8U-6374PjzcxbPyX-giJbxM/s1600/www.bloggertrix.com_001.png" vspace="0" width="16" /> Rss</a></div>

<div class="link">
<a href="http://www.bloggertrix.com"><img align="absbottom" alt="" border="0" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZxdQUMGh4bUnzlFk68qR6yYkGzh6eOjcJJt4a0JLGPlRxcj4Uxp6U1-dUgHLGfDsRsMC1xDyYG6GTkkkJ0p0S2rzbOTUdNAGXz7loBNQHLvK9eEsyFoi3Vua3BkiN9j1qjFqGU_vPKLg/s1600/www.bloggertrix.com-add.png" vspace="0" width="16" /> Add This</a></div>


</div>

*Replace Link With your URL
*Replace Names with as your like.

7. Now save your template
 you are done.
MADE BY BLOGGER TRIX

0 commentaires:

Enregistrer un commentaire