25 de jan de 2013

Menu social com efeito para seu blog


Um blog pode sim sobreviver sem páginas sociais mas que é melhor tê-las para uma melhor divulgação não resta dúvidas. E são tantas redes socias, para compartilhar fotos, opinião, compartilhar postagens, vídeos e por aí vai. Que tal então este modelo de widget enxuto, com um efeito bonito para seu blog, e ainda por cima fácil de instalar ?


Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.



<div id="GIB-social-hover">



<div id="links"><a href="AQUI O ENDEREÇO DE SEU TWITER" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-GVPx4HMrNDY/UK9uv3rA0iI/AAAAAAAAIO4/yfuiRGXLeVU/s1600/twitter.png" /></div></a>

<a href="AQUI O ENDEREÇO DE SEU FACEBOOK" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-DX-Bx5WR6zE/UK9whE-OCzI/AAAAAAAAIPg/9k_zjlDPF8s/s1600/FB.png"  /></div></a>

<a href="AQUI O ENDEREÇO DE SEU GOOGLE PLUS" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="http://4.bp.blogspot.com/-eP0U9g8fm0Q/UK9wYNQ4CmI/AAAAAAAAIPY/UWYbc7e9-go/s1600/google.png" /></div></a>

<a href="AQUI O ENDEREÇO DE SEU PINTEREST" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-nEZw_TpzSoU/UK-TOH8OEEI/AAAAAAAAISg/bDcBgt2yEe4/s1600/pin.png" /></div></a>

<a href="AQUI O ENDEREÇO DE SEU FEEDBURNER" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="http://4.bp.blogspot.com/-yOEZQT7it74/UK9wClCPwpI/AAAAAAAAIPQ/EK4CB92xQ98/s1600/rss.png" /></div></a>
</div></div>

<style>/*Menu social---------------------------------------------------------------------------*/
.tota { margin:10px auto; }
#GIB-social-hover{position:relative;width:100%;height:215px;
background:#404040 url("http://4.bp.blogspot.com/-CNgQWNU8Sg4/UK91PeHlvjI/AAAAAAAAIRM/56SruW6DBQ0/s1600/vintage.png");}
#GIB-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
#GIB-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}
#GIB-social-hover #links{position:absolute;bottom:0;width:100%;}
#GIB-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);
-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;
}
#GIB-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}
#GIB-social-hover a.twitter:hover{background:#79dbff;}
#GIB-social-hover a.facebook:hover{background:#6e9bee;}
#GIB-social-hover a.google:hover{background:#cccccc;}
#GIB-social-hover a.pinterest:hover{background:#cb2027;}
#GIB-social-hover a.rss:hover{background:#ffae42;}
#GIB-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}
#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}
#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}
.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}
.home-highlight p{margin:0;}
.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}
.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}
.home-highlight:hover .home-highlight-title{color:#3a3534;}
#home-featured{min-height:400px;margin-bottom:37px;}
#home-featured .home-divider{margin-top:0;}
#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}
#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}
.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}
.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}
.featured-theme-entry-content .button{margin-top:15px;}
.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}
.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}
#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}
#featured-theme-slider .flex-direction-nav{margin:0;}
#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}
#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}
#featured-theme-slider{}

</style>


Um comentário:

  1. no meu blog não ficou colorido quando passo o mouse :(
    ficou transparente!!!

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube