Barra De Navegação Estilo MAC Para Blogger
Nesta postagem apresento a vocês esta barra bem simples estilo MAC para deixar seu blog mais estiloso. Espero que gostem.
Para colocá-la no blogger... Entre em "Layout" - "Adicionar um Gadget" do tipo HTML/JavaScript e cole o seguinte código
<style>ul#UTnavdocbwh{background:url(http://4.bp.blogspot.com/-_WXMZ1lQEFo/TwKFr5-wQ5I/AAAAAAAABEc/ud9Wf4N8f60/s1600/alas.png) bottom no-repeat;list-style:none;margin-left:310px;opacity:.6;position:fixed;bottom:1%;width:400px;z-index:9;-moz-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;-o-transition:all .2s ease-out}
ul#UTnavdocbwh:hover{opacity:.9}
ul#UTnavdocbwh li{width:60px;display:inline;float:left;border:0}
ul#UTnavdocbwh li a{background-position:center;background-repeat:no-repeat;background-size:40px 46px;display:block;float:left;margin-top:-2px;width:50px;height:25px;padding-top:40px;text-decoration:none;text-align:center;-moz-transition:all .2s;-webkit-transition:all .2s;-o-transition:all .2s;opacity:.7}
ul#UTnavdocbwh li a:hover{background-size:64px 64px;opacity:1}
ul#UTnavdocbwh .home a{background-image:url(http://1.bp.blogspot.com/-X1JURh08jMg/TwG7rMUtHAI/AAAAAAAABCY/C37Zdrcxvk8/s1600/home.png)}
ul#UTnavdocbwh .mail a{background-image:url(http://4.bp.blogspot.com/-__NpWdTfOls/TwHGF5BFx5I/AAAAAAAABDg/Y2IrZuAjoX0/s1600/mail.png)}
ul#UTnavdocbwh .link a{background-image:url(http://2.bp.blogspot.com/-dMNLRT9s1XI/TwG7r5y3f-I/AAAAAAAABC8/a9p2YL804c0/s1600/link.png)}
ul#UTnavdocbwh .history a{background-image:url(http://2.bp.blogspot.com/-mvM3qTHMtqs/TwHGF_JbI3I/AAAAAAAABDo/eTIKnRhkr68/s1600/history.png)}
ul#UTnavdocbwh .google-plus a{background-image:url(http://3.bp.blogspot.com/-mYeLKUmSUIw/TwKh0NUSWAI/AAAAAAAABFA/ayWLLvn4n8Y/s1600/google-plus.png)}
ul#UTnavdocbwh .rss a{background-image:url(http://3.bp.blogspot.com/-wQYg4jyRlqk/TwG7r9_wIyI/AAAAAAAABDI/ChlSo4eaqts/s1600/rss.png)}
ul#UTnavdocbwh .rss a:hover{background-image:url(http://2.bp.blogspot.com/-BzMRJaMHyg8/TwG7rBcy2tI/AAAAAAAABCg/RUtxM3kqalo/s1600/rss1.png)}</style>
<ul id="UTnavdocbwh">
<li class="home" title="Inicio"><a href="http://dicashot.blogspot.com/"></a></li>
<li class="mail" title="Endereço de E-mail"><a href="mailto:Endereço do seu e-mail"></a></li>
<li class="link" title="Indice"><a href="Endreço da sua página indice"></a></li>
<li class="history" title="Página estatistica do blog"><a href="AQUI VEM A URL"></a></li>
<li class="google-plus" title="Google +"><a href="https://plus.google.com/112804133967399358173"></a></li>
<li class="rss" title="Assine nosso feed"><a href="Endereço do seu feed"></a></li>
</ul>
Tendo colado o código, faça as modificações nas partes destacadas de azul, salve e pronto!!!
Deixe seu comentário. O que você achou do gadget?
