Redes Sociais Com Efeito Tooltip Bola - Exclusivo

Nesta postagem compartilho com vocês este código das redes sociais com tooltip bola pouco popular na net, por que geralmente as pessoas usam mais em seus blogs o tooltip normal. Este além de ser bem chamativo, deixa o design do blogger mais bonito.

Para colocar no blogger... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag

]]></b:skin>

Tendo encontrada a tag, cole ACIMA dela o seguinte código

.nav-tt{
 padding: 0;
 width: auto;
 height: auto;
 margin: 10px auto;
 
}
.nav-tt li{
 float: left;
 list-style: none;
}
.nav-tt li a{
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    outline: none;
 position: relative;
 z-index: 2;
    text-indent: -9000px;
    text-decoration: none;
}
.nav-tt li .gplus{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUStn_hofl90pTTnDJ4ZC6ypHY9V13T_YyhHwHdkQSWrKThI-ByqnXeDVRkvyDMvHo4dwvKgXjL6444v8D5C93DF0jkHIYs7Rm_UmVWev_-4jzwPjjQI3C6cw6YEHoEJ_fj7DY21B1jXxj/s128/google_plus.png) no-repeat;
}
.nav-tt li .twitter{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1grzGbZ4MncuvOUWVwv7Jkh7JApTy6qmSKMMgvpuXysWQhNHvbwISb4A4lawGXbXGV9I9azx2ECKIRD4ihILxLjDO2bnd9_hH4IUsQtZd1Co2hYoeGFfhB3ZdrXCJvblbzN2TUePwdpmr/s128/twitter_1.png) no-repeat;
}
.nav-tt li .pinterest{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz92LRTm2Ahgq3I2_BwOsCTEreCd9mROQQPvNvQ52dh5-sw7Cf-IrTgdsSxtjgVTtlcBhlpV9UWxTrrLDzW1boIBRFAWqRgMCp51gt9Cbve5UEp04uHhB-V81KQDY6IDAnepuWf1jGnusf/s128/pinterest.png) no-repeat;
}
.nav-tt li .facebook{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifn01X6pyMis4ZKbOayBucpQaUuOXlMYak_56s5R-hEqKn2Fha-rBR2g5oa8GK493qV8fVy2DKx9bUUkkTUQqh8KrfLqrQ8-ETMP8KeYqDbsqojYsaAgBUujm06a8IPvk0fIr-mAUpi4sJ/s128/fb_1.png) no-repeat;
}
.nav-tt li .linkedin{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4uQgFXkXs_qjcY9RFhsEIKcnnnnHIhHE0MK-zzlKE-hdlwlsd_oj4w1Br7rNaYwtQkgscmJjg1LZsWvKCaQVZqCTdPSAkAxk26-VWfdPg9hYHR-y1bQxxzUuz2bVHHuX82OEXK2xVy8na/s128/linkedin.png)no-repeat;
}
.nav-tt li .youtube{
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQh6RGL37vn3WXNfNk8WRY4KvmXCkFuA-wZ1-1gyG0gVCJMlIePaKdivZi1DC8AbXXY-BPWfRc1lKeP8JE5bkm2XsA3eJsA3R6zolSdTdHcE7rPfMUEMaK0xwp6GOvnYqrcjuoP350ylnR/s128/you_tube.png) no-repeat;
}
.nav-tt li .mail{
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR59FCu3rQB644ipc5adrvJtRx3N9bXml61AXHM8LpwXIQTBEWKjQu421YnoYEVph5GrDe6eC0woMkc8DEgPjaOnM6ySpArfa2Eqtz3GSnb8AGJHnVob7eSX7-cd_joAiFAzrXFWHz4PPg/s32/email.png) no-repeat;
}
.nav-tt li .rss{
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqMCVHdqZhp5KVQgB8FvI6dKPhew3pG46xAlNJWEN2FhjwjEd2TWDX99bhCavDU61pmtQpHMv4n4ffEPebED_WlCHP_msQ-KVE19aQL9uybqgiC_9HKKyetOhjk4-t2X1esNjaDj6bYq9q/s128/rss.png) no-repeat;
}
.nav-tt li a span{
 width: 80px;
 height: 80px;
 line-height: 80px;
 padding: 10px;
 left: 50%;
 margin-left: -60px;
 font-family: Georgia, serif;
 font-weight: 400; 
 font-style: italic;
 font-size: 14px;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 text-align: center;
 border: 5px solid #fff;
 background: rgba(255,255,255,0.5);
 text-indent: 0px;
 position: absolute;
 pointer-events: none;
 border-radius: 50%;
 bottom: -40px;
 opacity: 0;
 box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
 
}
.nav-tt li a span:before,
.nav-tt li a span:after{
 content: '';
 position: absolute;
 bottom: -15px;
 left: 50%;
 margin-left: -9px;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 11px solid rgba(0,0,0,0.1);
}
.nav-tt li a span:after{
 bottom: -13px;
 margin-left: -10px;
 border-top: 10px solid #ffffff;
}
.nav-tt li a:hover span{
 opacity: 0.9;
 bottom: 50px;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}

Tendo colado o código, salve e feche por que esta parte já está finalizada.

Agora, entre em "Layout" - "Adicionar um Gadget" e cole o seguinte código

<ul class='nav-tt'><li><a class='twitter' href='#' target='_blank'><span>Twitter</span></a></li>
<li><a class='gplus' href='#' target='_blank'><span>Google Plus</span></a></li>
<li><a class='facebook' href='#' target='_blank'><span>Facebook</span></a></li>
<li><a class='youtube' href='#' target='_blank'><span>Youtube</span></a></li>
</ul>

Coloque o link das redes sociais no #.

Tendo feito isto no código, basta salvar e pronto!!!