Cara Membuat Social icon Rolling Button di blogspot
* buka blog mu dulu
* pilih template >>> edit HTML
* Cari kode ini ]]></b:skin>
* Copy kode dibawah dan letakkan diatas kode ]]></b:skin>
.pageWrap {
width: 300px;
margin: 0 auto;
text-align: center;
background: none;
}
li {
margin: 0 10px;
display: inline-block;
}
a.link {
width: auto;
margin: 0 auto;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
a.link span {
padding: 12px 15px 10px 15px;
font-family: "Gotham Rounded";
font-size: 12px;
background: #1e9650;
letter-spacing: 4px;
font-weight: light;
text-transform: uppercase;
text-align: center;
color: #ffffff;
text-decoration: none;
display: block;
}
a.link .base {
position: relative;
bottom: 0;
transition: all .25s ease;
}
a.link:hover > .base {
bottom: -34px;
}
a.link .hover {
background: #5ad282;
color: #0a8232;
position: absolute;
top: -100%;
transition: all .25s ease;
}
a.link:hover > .hover {
top: 0;
}
* kemudian tambahkan kode dibawah ke dalam HTML/Javascript<div class="pageWrap"> <ul> <li> <a href="#" class="link"> <span class="hover">Instagram</span> <span class="base">Instagram</span> </a> </li> <li> <a href="#" class="link"> <span class="hover">Twitter</span> <span class="base">Twitter</span> </a> </li> <li> <a href="#" class="link"> <span class="hover">Facebook</span> <span class="base">Facebook</span> </a> </li> </ul> </div>[ Catatan ]
Ganti warna merah dengan sosmed mu
* Silahkan di save / simpan
{ GOOD LUCK }
Baca Juga Artikel Terkait Lainnya