Add Social Media Button with css3 tooltip Effect For Blogger
* buka blog mu dulu
* pilih template >>> edit HTML
* cari kode ini ]]></b:skin>
* copy kode dibawah dan letakkan diatas kode ]]></b:skin>
.nav-tt{
padding: 50;
width: 70%;
height: 70px;
margin: 80px auto 30px auto;
}
.nav-tt li{
float: left;
list-style: none;
}
.nav-tt li a{
display: block;
width: 40px;
height: 40px;
margin: 0 2px;
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/AVvXsEg-Zqu1d5mS8DI6gD7-97GBVxvFCAdpYH53t3L2ZHo1YvNJ_-qoHS79uQz5Gy8CErC2w6lCJ-ixw9keWAm5nT9acv710Sw0a7WfVoaM7op3DxajYZ9EV0FnFDSRKtiE0T95dXRFzUcLFMX1/s128/google_plus.png) no-repeat;
}
.nav-tt li .twitter{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhICfvbBVO0ZQVU4kBUWSOjyyCut6e5-o1dZf-BWoTAGcdUaIm5-yV1-i_gWWDHYZSJQdtqwZFAPvqw_boS_L6vBjRyH7QU9P8uIzI7X2fz5HI57RQMZ-vnalIUw_kBHPpVzvlyrONAAgB1/s128/twitter_1.png) no-repeat;
}
.nav-tt li .pinterest{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBwShoMygMlSUUmQDnqUOWYj2vV0ju4Is6P1B9SrqePXc_IKgwJh_EzNRfvBg4nT2ZtTUWaTrImhrnvesto8Toejxn_jmn3Xwje7MW_8X5AkeT8IRrpaEIYmF3oXqoIeS3HuGftY8shMv5/s128/pinterest.png) no-repeat;
}
.nav-tt li .facebook{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRrMq6uiyStW50Fgk4Nw6fQiOByGXgqg52f7miFLU6TiUq7FsUPwd7ygA5VEvPbqQlSD2WrT7UITJvRAktef96ybfFgAAAFbfGpscI3kcocLywURed3vSNkVGG0gWUOuWce-QOIWtkmOcN/s128/fb_1.png) no-repeat;
}
.nav-tt li .linkedin{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi6oVA_ThYwxwhzo9oN2cWgzrgGw2DDM7yT6gLIXXXgh0CDvBHr14iXmTwrFeyjs4vdoQ7vziQopdf9eCG0pMVw7-Ex3ZII-TCz3D-IFhcAfTG4yJIleON3jLpOP5HmcnNZB8giy1x38Pn/s128/linkedin.png)no-repeat;
}
.nav-tt li .tumblr{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOoJRQcynqDRtoOXOr4w8BUexRpbs8SgiBoqinbaTcxHpStMxTGtwE0ekhL4ueT2XBJlxFuqTzfxZVslBtuDa7OwfpDtsVdbzPuM6-bgnO1vuEyR_sShlb1W279zxYzWkM3v-iHO_cnamn/s128/tumblr.png) no-repeat;
}
.nav-tt li .youtube{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNeo3miEfdjp7RVh4WvfkHL63DPdqlcMZ94FOelZIfFGxud3_shBnLxKSmohJ-5e5VpAD1-8h8OWvxZHZcW3EROf_X86BpGaFKDg5jBAZ8Xj3aaxH8bfrr4jq8rhrlhdZFGx8tGECtORkY/s128/you_tube.png) no-repeat;
}
.nav-tt li .mail{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA-8PNDTyXhweBa5y8KVUL-7v6_tDWEudKzrErV2wQu83Lz-fKeRPF4Drr58Dq-3pW_XTq2EQsyyCZRQfRXOTja5Sfdrmz0TkjORvRXX9z1zrSmEuOE623XJZP-OM-WMc2isGP5DL_xNJZ/s32/email.png) no-repeat;
}
.nav-tt li .rss{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0PN3FgN9KWzL_z0Aj6yhWAT4vpkMPGErTKEXFfkR6W3l4KVWLxIZXMfuMy3oLB83KXqPkIscF4i50NMlnTwcuv2kzLQzk_JMBg6WmmuiihCpFpyHD08RDeVO7cmWq7mMgOnXpJ2EyEf_D/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: 'Alegreya SC', Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
color: #719DAB;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 5px solid #ffffff;
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);
}
* kemudian cari kode <data:post.body/>* copy kode dibawah dan letakkan dibawah kode <data:post.body/>
<div class="lordbuttons"> <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="linkedin" href="#" target="_blank"><span>LinkedIn</span></a></li> <li><a class="tumblr" href="#" target="_blank"><span>Tumblr</span></a></li> <li><a class="pinterest" href="#" target="_blank"><span>Pinterest</span></a></li> <li><a class="youtube" href="#" target="_blank"><span>Youtube</span></a></li> <li><a class="mail" href="#" target="_blank"><span>Mail</span></a></li> <li><a class="rss" href="#" target="_blank"><span>RSS</span></a></li> </ul></div>[ Catatan ]
Ganti warna merah dengan url sosmed mu
* terakhir silahkan di save template
### good luck guys ###
Baca Juga Artikel Terkait Lainnya