Thứ Năm, 26 tháng 11, 2015

How to Add Cool Vertical Menu for blogger

How to Add Cool Vertical Menu for blogger


Vertical,Menu,blogger,menu bar

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

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F 

4. Paste below code before ]]></b:skin> tag

/* www.bloggertrix.com*/
 
*{
 list-style:none;
 margin:0px;
 padding:0px;
}

#menu4 {
 width: 200px;
 border-style: solid solid none solid;
 border-color: #D76100;
 border-size: 0px;
 border-width: 0px;
 }
 
#menu4 li a {
   height: 32px;
   voice-family: "\"}\""; 
   voice-family: inherit;
   height: 24px;
 text-decoration: none;
 }
 
#menu4 li a:link, #menu4 li a:visited {
 color: #9E3C02;
 display: block;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFI8pyebg4fx3vQGpVdHEUAfWPV7CE05GYPVbxVsV8r_Tvk67zzWORlHF0G03FL9PlwiIKK5W19YDGAneIP_uDCJGbYL98T6pmPrnZHe3UhNiKJwVUxEKlQgRaEtDUUd9YaoctvbjcwQo/s1600/menu4.gif);
 padding: 8px 0px 0px 30px;
 }
 
#menu4 li a:hover {
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFI8pyebg4fx3vQGpVdHEUAfWPV7CE05GYPVbxVsV8r_Tvk67zzWORlHF0G03FL9PlwiIKK5W19YDGAneIP_uDCJGbYL98T6pmPrnZHe3UhNiKJwVUxEKlQgRaEtDUUd9YaoctvbjcwQo/s1600/menu4.gif) 0 -32px;
 padding: 8px 0 0 30px;
 }
 
#menu4 li a:active {
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFI8pyebg4fx3vQGpVdHEUAfWPV7CE05GYPVbxVsV8r_Tvk67zzWORlHF0G03FL9PlwiIKK5W19YDGAneIP_uDCJGbYL98T6pmPrnZHe3UhNiKJwVUxEKlQgRaEtDUUd9YaoctvbjcwQo/s1600/menu4.gif) 0 -64px;
 padding: 8px 0 0 30px;
 } 
/* www.bloggertrix.com*/

5. Now Go to Design >> Page Element

6. Click Add Gadget and select 'HTML/Javascript'

7. Paste below one of below code.

<div id="menu4">
 <ul>
   <li><a href="#1" title="Home">Home</a></li>
   <li><a href="#2" title="About">About</a></li>
   <li><a href="#3" title="Services">Services</a></li>
   <li><a href="#4" title="Portfolio">Portfolio</a></li>
   <li><a href="#5" title="Store">Download</a></li>
   
 </ul>

</div>


* Replace red #1 to #5 with your URL
* You can change Blue color words(Title) as your like.

10. Save it. you are done.

Không có nhận xét nào:

**

Đăng nhận xét