CARA MEMBUAT circle social icon fonts button DI BLOGSPOT

circle social icon fonts button for blogger

* buka blog you
* pilih template
* edit HTML
* cari kode ini ]]></b:skin>
* dan copy kode dibawah dan letakka diatas kode ]]></b:skin>

.social {
  position: absolute;
  width: 100%;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
}

.social .link {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px dashed white;
  background-clip: content-box;
  padding: 10px;
  transition: .5s;
  color: #D7D0BE;
  margin-left: 15px;
  margin-right: 15px;
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.2);
  font-size: 20px;
}

.social .link span {
  display: block;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.social .link:hover {
  padding: 20px;
  color: white;
  margin-left: -5px;
  transform: translateX(10px) rotate(360deg);
}

.social .link.google-plus {
  background-color: tomato;
  color: white;
}

.social .link.twitter {
  background-color: #00ACEE;
  color: white;
}

.social .link.facebook {
  background-color: #3B5998;
  color: white;
}

.social .link.tumblr {
  background-color: #677685;
  color: white;
}

.social .link.vk {
  background-color: #55769B;
  color: white;
}

.social .link.wordpress {
  background-color: #7F9EB9;
  color: white;
}

.social .link.blogspot {
  background-color: #F4833D;
  color: white;
}

* kemudian tambahkan kode di bawah ke dalam html/javascript

<div class="social">
  <a href="https://www.facebook.com/ivankvalentine" class="link facebook" target="_parent"><span class="fa fa-facebook">f</span></a>
  <a href="https://twitter.com/ivankGribatako" class="link twitter" target="_parent"><span class="fa fa-twitter">t</span></a>
  <a href="http://google.com/110561987544809067837" class="link google-plus" target="_parent"><span class="fa fa-google-plus">g+</span></a>
  <a href="http://vavik96.tumblr.com" class="link tumblr" target="_parent"><span class="fa fa-tumblr">tb</span></a>
  <a href="http://vk.com/" class="link vk" target="_parent"><span class="fa fa-vk">vk</span></a>  
  <a href="http://ivankgribatako.blogspot.co.id/" class="link blogspot" target="_parent"><span class="fa fa-blogspot">B</span></a>
</div>

>>> CATATAN <<<
{ Ganti warna merah dengan url sosmed mu }
"" silahkan di simpan / save ""

### GOOD LUCK GUYS ###

QUEEN TRICK BLOG

CARA MEMBUAT circle social icon fonts button DI BLOGSPOT

Entri Populer

Label