Menu vertical effect widget blogger

- 11:17:00
cara menbuat menu vertical effect widget blogger

| Demo | |

Hoje vamos mostrar como adicionar menu vertical com um efeito bem legal isso vai fazer a diferença e também ajuda para que o visitante possa encontrar o menu com mais facilidade na sidebar do Blogger se deseja adicionar isso a seu blogger template siga os passos abaixo:


Como adicionar menu vertical effect widget Blogger

Faça login no Blogger va no menu modelo então editar/HTML
com as Teclas combinadas CTRL+F busque por ]]></b:skin> ou </style> copie e cole 
o código CSS antes disso.

<style type='text/css'>
#apriliana-nav { 
margin: 0; 
padding: 0; 
font-family: Verdana, Helvetica, Arial, sans-serif; 
}
#apriliana-nav { 
width: 300px; 
}
#apriliana-nav ul { 
list-style: none; 
text-indent: 0px; 
}
#apriliana-nav li { 
margin-top: 0px; 
border-bottom: 1px solid #414141; 
}
#apriliana-nav a { 
font-family:Verdana, Geneva, sans-serif; 
font-size: 15px; 
font-weight:bold; 
font-variant: inherit; 
text-transform:uppercase; 
padding: 0px; 
color:#CCC; 
display: block; 
padding: 13px 50px; 
height: 26px; 
line-height: 26px; 
text-decoration: none; 
background:#333 url(http://1.bp.blogspot.com/-ajlWgyGZgjk/UiX0wp6VUaI/AAAAAAAADSI/R4DmpDf5onc/s1600/menu-bg.png) no-repeat; 
text-shadow: 1px 1px 1px #111; 
-webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
-moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
-o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
-ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715); 
}
#apriliana-nav a:hover { 
background: #5e5e5e url(http://1.bp.blogspot.com/-8u6hsdoTEOU/UiX0wdeLrEI/AAAAAAAADSE/0MRS8eDrgJU/s1600/hover-bg.png) no-repeat; 
font-size: 14px; 
padding: 13px 60px; 
-webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
-moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
-o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
-ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715); 
}
#apriliana-nav a:visited { 
background:url(http://1.bp.blogspot.com/-8u6hsdoTEOU/UiX0wdeLrEI/AAAAAAAADSE/0MRS8eDrgJU/s1600/hover-bg.png) no-repeat;    
}
#apriliana-nav a:active { 
background:url(http://1.bp.blogspot.com/-8u6hsdoTEOU/UiX0wdeLrEI/AAAAAAAADSE/0MRS8eDrgJU/s1600/hover-bg.png) no-repeat;    
</style>

Código HTML coloque isso entre <body> ou </body> ou diretamente na sidebar do Blog.

div id='apriliana-nav'> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">Widgets</a></li> 
<li><a href="#">SEO</a></li> 
<li><a href="#">Adsense</a></li> 
<li><a href="#">Templates</a></li> 
<li><a href="#">Apps</a></li> 
</ul> 
</div>


Salve e pronto.
.


EmoticonEmoticon

 

Start typing and press Enter to search