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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSOWRIwByXgUOvrsIbGkFsoKLFX0LjQhPwxEdhMCy1BoxRY3-y4jVKqF_cjSd5FDBzMMJl55UBCMOEvNUdq8y9eegb2UJJctuV4Rhurm1gR1oNBijM0n909N-P9hCmRtOriaHZ5Yd2T6WM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyYyWg9NdmE3bC4zi-NFP0-0u-E9TGSZIk8C3KmOKXHA-OloAwdLfRFL4J5XQ0XJCyMpGajSC1VfgYUDqyXyhM7mbd7A49h-qnVvkqnMplKBxk9X8HSHpyTI0KfZIX4KYO8IQDzp2Q9IiH/s1600/home.png)}
ul#UTnavdocbwh .mail a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZtNkBbJO4U96zlMCRPA5pW3T_5nenr3b5zgc4-9EaduPQ1m4E4z7AG5PYWhfkNqNhMVVxHSXwRKj8OSbCNl_fYGfkaJmifWpRK7Sw2DEQais7Z4Dr_qrMvxdA-7CwEXlz-MoBatD1JXSZ/s1600/mail.png)}
ul#UTnavdocbwh .link a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisU4YPkVubyKS8htb14HcFQ0FtLYd4M1yxKkWHCD4yoGsHeZ09WI4IVR89BVMzEM6NRjDsX0d6VbE3B1TlysaYPlCLJPO5sBvkej9HIpBbomENf_muWdgO64hZ-FY6hmwVF78nlWqG7SPu/s1600/link.png)}
ul#UTnavdocbwh .history a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBhS87hyphenhypheniFDIkGC8hTWZc4C-Pt7Qu5Di6dmKIUJnE6pGSsObssWcp4xb4YcNLEmJR5GfTKK7l66lPO0A9tl2oczrbWqderExNK0RgKd_ZArumTltV_k9MRYTj5chzMah1HvM1KEYxV7vmo/s1600/history.png)}
ul#UTnavdocbwh .google-plus a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJZjuNmerKOpYtLhaBcvn9uyQeE1Ju5_O6matRx_TfM2HGv0UyiLGFOSirLVRts19tInm3dX9mp-oAfK0DGCILMj1FEosu2_QqzIECMOOSritdaN1df_x27jMNcr5ddGeMARaOGzIyFAT/s1600/google-plus.png)}
ul#UTnavdocbwh .rss a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvMTwDc_uJdQmhx11sEjhpGHEBmOS5SsYis3268JfyPfJTAq25ydR2X_SLb50e8BPs_EIifGBFwz4gNuQatNXZfl75MLtS_FA8Gx7w9EuDWEi0LBKoa6SVjiRHkNV4aGqTh81nlQO0oVqB/s1600/rss.png)}
ul#UTnavdocbwh .rss a:hover{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLpFPeHoUyXilMFCiB-x-gPn0ndW2sLdC1V0WzrpvWMCj6qo8Mp9CmVH4pvkfamNJs2s6dKbjVaOreCgoa7IdOezn6AhH3ENmiHBmM8m-j1HFLjJz2c4Lmcn212kZZvy_TeqECq1oh33Me/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?
