Cara Memasang Tombol Share Keren Di Atas Postingan

vivpos - Buat kamu yang senang merias blog dan sedang mencari widget share button yang di pasang diatas postingan, kali ini saya akan share tentang bagaimana cara memasang dan tentunya disertai dengan share buttonnya dengan teknik CSS stylist yang cantik. Tampilannya seperti gambar diatas ya. Yuk langsung saja disimak ya.

1. Untuk memasang widget ini, silahkan masuk ke-blogger.
2. Pilih Menu Template
3. Edit HTML
4. Masukkan kode dibawah ini, tepat diatas kode </style> atau ]]></b:skin>

.social-box{width:280px;padding:10px 9px;margin:0;overflow:hidden;background-color:#f2f2f2;border:1px solid #f2f2f2;text-align:center;}a.social-item-box{display:block;color:#4b4b4b;float:left;width:64px;overflow:hidden;margin:0;padding:4px 0;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEick9S2tG5EzOL0x3DItAbmmI7-ZedRsKV4zdui_663Jljf4e2wB8_CBCQSIcPbt9eNqLVE1SAWohjINoIh0NRsvH3U5urk69MOKuy5U8d7nvOFq7JQXPHrB9SPxzqrqzxejOtroZHBG3cZ/s1600/social-icon.png");background-repeat:no-repeat;}.social-item-outer{background:#f8f8f8;margin:0 0 0 8px;overflow:hidden;float:left;display:inline-block;}.social-item-outer:hover{background:#fff;}.social-item-outer:nth-child(1):hover{box-shadow:0px -2px 0px #E50700 inset;}.social-item-outer:nth-child(2):hover{box-shadow:0px -2px 0px #0084C5 inset}.social-item-outer:nth-child(3):hover{box-shadow:0px -2px 0px #6CAC00 inset;}.social-item-outer:nth-child(4):hover{box-shadow:0px -2px 0px #00C3B7 inset;}.social-item-outer:hover{box-shadow:0px -2px 0px #FF8168 inset;}.social-item-outer:first-child{margin-left:0px;}.facebook-box{background-position:7px 4px;}.rss-box{background-position:-73px 4px;}.twitter-box{background-position:-153px 4px;}.googleplus-box{background-position:-233px 4px;}.counter{margin:60px 0 0 0;font-family:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:16px;font-weight:500;}.social-title{color:#888;font-size:11px;}

5. Jangan dulu kemana-mana, sekarang masukkan Kode dibawah ini tepat diatas post:body kamu ya. Jika terdapat 2-3 data post:body, kamu bisa letakkan di ketiganya (Semuanya)

<div class='social-box'>
  <div class='social-item-outer'>
  <a class='social-item-box facebook-box' href='http://www.facebook.com'>
   <div class='counter'>
  76.098
</div>
<span class='social-title'>Fans</span>
  </a>
  </div>

  <div class='social-item-outer'>
  <a class='social-item-box twitter-box' href='http://twitter.com'>
   <div class='counter'>
  6.987
</div>
<span class='social-title'>Followers</span>
  </a>
  </div>

  <div class='social-item-outer'>
  <a class='social-item-box googleplus-box' href='http://plus.google.com'>
   <div class='counter'>
  4.987
</div>
<span class='social-title'>Followers</span>
  </a>
  </div>

  <div class='social-item-outer'>
  <a class='social-item-box rss-box' href='/feeds/posts/default'>
   <div class='counter'>
  398
</div>
<span class='social-title'>Subcribers</span>
  </a>
  </div>
</div>