Advertisement

sexta-feira, 6 de janeiro de 2017

Menu Sidebar Blog status

sidebar-menu-status-blog


Hoje vamos compartilhar como adicionar um menu sidebar stats no seu Blogger por Cb isso é elegante e tem cores diferenciadas também util para navegação do Blog pode ser usado para um menu secundario  para adicionar isso siga os passos abaixo:

Para Adicionar no seu Template siga os passos:

Faça login no blogger template então vá no menu modelo editar HTML com as teclas combinadas CTRL+F busque por ]></b:skin>  e cole o seguinte código

sidebar-menu {text-shadow:none;position: fixed;height: 100%;width:215px;background: #2c3e50;transition:width 1s;overflow: hidden;font-family: 'Offside', sans-serif;z-index: 99;left:0;top:0}
.sidebar-menu:hover {background:#222}
.menuItem span {position: absolute;left:80px;top:20px;transition:color 1s;color:rgba(255,255,255,0);}
.sidebar-menu:hover .menuItem  span {color:rgba(255,255,255,1);}
.menuItem {color:#fff;position: relative;padding:20px;transition:border .5s, background .2s;}
.menuItem a {color:#fff;}
.menuItem:hover {background: #34495e;cursor: pointer;}
@media screen and (max-width:768px){
.sidebar-menu{display:none}
}

Agora procure por </body> e cole o seguinte código

<div class='sidebar-menu'>
<div class='menuItem'><i class='fa fa-home icon-large'/><span><a href='/'>Home</a></span></div>
<div class='menuItem'><i class='fa fa-comments icon-large'/><span><a href='#'>About</a></span></div>
<div class='menuItem'><i class='fa fa-bug icon-large'/><span><a href='#'>Kontak</a></span></div>
<div class='menuItem'><i class='fa fa-life-ring icon-large'/><span><a href='#'>Disclaimer</a></span></div>
<div class='menuItem'><i class='fa fa-exchange icon-large'/><span><a href='#'>Sitemap</a></span></div>
<div class='menuItem'><i class='fa fa-bullhorn icon-large'/><span><a href='#'>Advertise</a></span></div>
</div>

Agora adicione a fonte  procure por </head> acima disso copie e cole o seguinte código:

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

salve e pronto
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner

Hello, how may we help you? Just send us a message now to get assistance.