1. Log in to blogger account
2. Now select "Layout" Like Below.
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code.

Add Glossy Navigation Bar


1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.

Select-template

3. Now you can see Live on blog, Click EDIT HTML Button"

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

5. Paste below code Before ]]></b:skin> tag

.btrix_glossymenu1{
position: relative;padding: 0 0 0 34px;margin: 0 auto 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJBothOcF2xjK4cSr5div42VOt3JS8wvLtGeetMsksgvL3wmkPvFixbTQihQY7wWZNTC_jncnsbo88KbtYJp0TI3U0Nwu9bYjjtBAJVwWT0_TiWNZ83fKgdMqI7Ir0CLhFc2pjfNYd8q4/s1600/btrix_menupu_bg.gif) repeat-x;
height: 46px;
list-style: none;
}
.btrix_glossymenu1 li{
float:left;
}
.btrix_glossymenu1 li a{
float: left;display: block;color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.btrix_glossymenu1 li a b{
float: left;display: block;padding: 0 24px 0 8px;
}
.btrix_glossymenu1 li.current a, .btrix_glossymenu1 li a:hover{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJL-yPq9tfEJwEgxY9ojyrTUVqCgPFvIpfflZaeoCCrJ4YtfVCE_8bNpOhR90RU_MWjAJuPkXqL_cWMh0ucVE5H1Q0LDON9K9CfQDOE4ZefvBlX10QEhbkTRLDL06bdE34z3tkPEzhsTg/s1600/btrix_menupu_hover_left.gif) no-repeat;
background-position: left;
}
.btrix_glossymenu1 li.current a b, .btrix_glossymenu1 li a:hover b{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6PR3537dkGoWdHVBasTaGUYcSa3Avi8Eciu_0WvxBZ4Ok-wY4giRLD4ecW77lUx6GV8hu1_QPl3v8-QZAM-7QCZWix3xKmPI8DwVUT0j5EvRnjaDLLhHw5HbFE-lfQqJaMwju0Ipl2iQ/s1600/btrix_menupu_hover_right.gif) no-repeat right top;
}

6. Go to blogger and click Layout

7. Click Add Gadget and select 'HTML/Javascript

8. Paste below code.

<ul class="btrix_glossymenu1">
<li class="current"><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>CSS</b></a></li>
<li><a href="#"><b>Forums</b></a></li>
<li><a href="#"><b>Webmaster Tools</b></a></li>
<li><a href="#"><b>JavaScript</b></a></li>
<li><a href="#"><b>Contact Us</b></a></li>
</ul>
Replace # with your links.

9. Now save your HTML/Javascript'. You are done.

LIVE PREVIEW


Share this


  • ដោយ:Admin
  • Tag:
  • ប្រភព: 1-Cambo Report Original
  • Date: