CARA MEMBUAT SOCIAL ICON BUTTON FULL COLOR DI BLOGSPOT

SOCIAL ICON BUTTON FULL COLOR FOR BLOGGER

Keren banget nich dan cocok banget buat di terapkan
di blog you, makin terasa penuh warna,...

Demo Lihat Disini

* buka blogmu
* pilih template
* edit HTML
* cari kode ini ]]></b:skin>
* kemudian copy kode dibawah dan letakkan diatas kode ]]></b:skin>

.button {
  width: 180px;
  height: 25px;
  padding: 10px 25px;
  margin: 0 12px 12px 0;
  text-align: center;
  color: white;
  display: inline-block;
  float: left;
  border-radius: 4px;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  -webkit-transition: all .2s ease-out 0s;
  transition: all .2s ease-out 0s;
}
.button:hover > span {
  top: -20px;
  opacity: 0;
}
.button:hover > i {
  opacity: 1;
  font-size: 22px;
  top: 50%;
}

.brand-name,
.brand-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  position: absolute;
}

.brand-name {
  font-size: 15px;
  font-weight: 600;
  opacity: 1;
}

.brand-icon {
  opacity: 0;
}

.fbk {
  background-color: #3b5998;
}

.twitter {
  background-color: #55acee;
}

.google {
  background-color: #db4437;
}

.git {
  background-color: #999999;
}

.dribbble {
  background-color: #ea4c89;
}

.tumblr {
  background-color: #35465c;
}

.behance {
  background-color: #1769ff;
}

* kemudian tambahkan kode dibawah ke dalam HTML/JAVASCRIPT

<div class="mainWrap clear">
      <h2>Social buttons</h2><a href="#" class="button fbk"><span class="brand-name">Facebook</span><i class="brand-icon fa fa-facebook"></i></a><a href="#" class="button twitter"><span class="brand-name">Twitter</span><i class="brand-icon fa fa-twitter"></i></a><a href="#" class="button google"><span class="brand-name">Goolge</span><i class="brand-icon fa fa-google"></i></a><a href="#" class="button git"><span class="brand-name">Github</span><i class="brand-icon fa fa-github-alt"></i></a><a href="#" class="button dribbble"><span class="brand-name">Dribbble</span><i class="brand-icon fa fa-dribbble"></i></a><a href="#" class="button tumblr"><span class="brand-name">Tumblr</span><i class="brand-icon fa fa-tumblr"></i></a><a href="#" class="button behance"><span class="brand-name">Behance</span><i class="brand-icon fa fa-behance"></i></a>
</div>

>>> CATATAN <<<
[ Ganti warna hijau dengan url sosmed you ]
" silahkan di save / simpan "

*** SEMOGA BERHASIL GAN ***

QUEEN TRICK BLOG

CARA MEMBUAT SOCIAL ICON BUTTON FULL COLOR DI BLOGSPOT

Entri Populer

Label