adding social share icon rotating button for blogger
* login dulu yaa
* klik template
* edit HTML
* Cari kode nich ]]></b:skin>
* copy kode dibawah dan letakkan diatas kode ]]></b:skin>
.buttons {
margin-top: 20px;
}
.buttons > a {
position: relative;
font-size: 25px;
text-align: center;
display: inline-block;
color: white;
z-index: 1;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
border: 0 none;
line-height: 55px;
margin: 10px;
width: 55px;
height: 55px;
}
.buttons > a::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
border: 0 none;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s all ease-in-out;
-moz-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
transition: 0.5s all ease-in-out;
z-index: -1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: 1px solid white;
}
.buttons > a:hover::before {
background: #02c39a;
border-radius: 0;
border: 0;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
.buttons > a.phone:hover::before {
background: #02c39a;
}
.buttons > a.facebook:hover::before {
background: #3b5998;
}
.buttons > a.twitter:hover::before {
background: #1cadeb;
}
.buttons > a.google-plus:hover::before {
background: #d95232;
}
.buttons > a.github:hover::before {
background: #0d2636;
}
.buttons > a.email:hover::before {
background: #02c39a;
}
* kemudian cari kode </body>* dan copy kode dibawah dan letakkan diatas kode </body>
* atau kalian jg bisa masukkan ke dalam HTML
<div class="buttons animated"> <a href="tel:598967994" class="phone"><i class="fa fa-mobile-phone"></i></a> <a href="https://www.facebook.com/ivankvalentine" class="facebook" target="_blank"><i class="fa fa-facebook"></i></a> <a href="https://www.twitter.com/ivankGribatako" class="twitter" target="_blank"><i class="fa fa-twitter"></i></a> <a href="https://plus.google.com/110561987544809067837" class="google-plus" target="_blank"><i class="fa fa-google-plus"></i></a> <a href="https://github.com/" class="github" target="_blank"><i class="fa fa-github"></i></a> <a href="ivankgribatako.blogspot.com" class="email"><i class="fa fa-envelope"></i></a> </div>>>> CATATAN <<<
( Ganti warna merah dengan url sosmed mu )
[ silahkan di save ]
*** SELAMAT MEGERJAKAN ***
Baca Juga Artikel Terkait Lainnya