Botões Com Redes Sociais Fixado No Canto da Página do Blog - Versão #2

Nesta postagem compartilho com vocês mais um elemento para deixar seu blog ainda mais com cara de um site moderno e com um bom Design.

Como vocês podem ter notado na imagem ao lado, os botões estão amarelos, mas, você podem modificar a cor e deixar da cor principal da sua página. 

Se você tem noção de cores em HTML veja nossa tabela de cores para ter uma ideia de qual cor colocar nos botões.

TABELA DE CORES EM HTML

Para colocar em seu site é bem simples...

Entre em "Layout" - "Adicionar um Gagdget" - "HTML/JavaScript" e cole o código

<style>

.pinterestjo:hover, .twitterjo:hover, .facebookjo:hover, .googlejo:hover {background-color: #FFF073;

border-radius: 50px;}

.pinterestjo, .twitterjo, .facebookjo, .googlejo {

font-size: 13px;

color: #222;

width: 30px;

height: 30px;

z-index: 9;

margin: 5px;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

float: left;

padding: 4px;}




/* wwww.dicashot.blogspot.com */

.twitterjo{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglxObzVD_wnWa27tM-oruzWRT8-lxLHiM7Tr5m7CksGdtxgQYmsmeWEffxNzx3Ui61k4Wh3rCZE9G0rrSZJd48ZRDsspPXnKBvkrg2L0tRBOHJW4YACHMZkcNdmprebFYCDDv17fs6lrY/s1600/bg3.png)no-repeat center center;}

.facebookjo {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4J1odkj3SNFHIhIx5f8BXfz5epD1n5BX1vOLNafmASxcugDaD91GnlXS6LdbU69WfhxfIG8JmCnAbWzMDrlkMJSIQOCTDUecgqIQ_22QnFVuxCjF9pSF-gAgzU1VA8fvEtTE6oKU0FnU/s1600/bg1.png)no-repeat center center;}

.googlejo{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhclzQUxg3lsdMlNMcbi3zTBD2pjyNyqDCTaKKS3smUCgbALkgAbBXovYeKe56J8ol8hxjk-Fy0b1pveWPs14WUy2UzwkcA-_HO5BoMov3q7Ndqw_CKg8725iFjCYwb01z0Hdsejt7ZANI/s1600/bg2.png)no-repeat center center;}

.pinterestjo {

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLG-3yh0soqdb-jVfF0zj5yTN5XbRO9gR7Btkv1MkF7JfJrhjTIERIki5qz64g5v19jofjtHjMhyphenhyphenHwWDxJfzIiLbNpC1HI8pMJUUHi0vgIRd6xI8dinhqOeVd_SNqyG2Jrx81UyRNCjT1h/s1600/white_pinterest.png")no-repeat center center;}




/* wwww.dicashot.blogspot.com */

.social-network {

box-shadow: 0px 2px 1px rgba(0,0,0,0.1);

width: 50px;

position: fixed;

background: #F1A129;

top: 70px;

right: 0px;

border-radius: 3px 0px 0px 3px;

z-index:999;

}

</style>


<div class='social-network'>

<a href='#' target='_blank'><div class='facebookjo'></div></a>

<a href='#' target='_blank'><div class='twitterjo'></div></a>

<a href='#' target='_blank'><div class='googlejo'></div></a>

<a href='#' target='_blank'><div class='pinterestjo'></div></a>

</div>

Tendo colado o código, basta salvar e pronto!!!

É claro que se você quiser modificar a cor dos botões e simples. Destaquei no código em azul as partes para modificar a cor dos botões. O # em vermelho no código, é o link. Cole o link no lugar do # (jogo da velha).

Qualquer duvida, não deixe de perguntar.