Wednesday, February 13, 2019

Cara Membuat Widget Social Media Keren Di Blog

Tags

Hallo temen temen semua kembali lagi di Sekadar Berbagi
pada kesempatan kali ini saya ingin membahas Cara Membuat Widget Social Media Keren Di Blog.
tentu saja bagi para blogger social media merupakan sebuah peluang dalam mempromosikan dan meningkatkan trafic blog, dikarenakan jaringan pada social media sangatlah luas dan sangat cocok dijadikan tempat untuk mempromosikan apapun. dan tutorial kali ini sangat cocok untuk blogger pemula yang ingin mempercantik blog nya dengan widget social media,
tanpa berlama lama lagi simak pembahasan nya:


  1. Masuk ke menu dashboard Blogger kalian
  2. Pilih Tata Letak -> Tambahkan Widget -> pilih HTML/JavaScript
  3. Kemudian masukkan script dibawah ini

<div class="metro-social">
<li><a class="fb" href="URL Facebook" target="_blank"></a></li>
<li><a class="tw" href="URL Twitter" target="_blank"></a></li>
<li><a class="gp" href="URL G+" target="_blank"></a></li>
<li><a class="fd" href="URL Feedberner" target="_blank"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>

Jangan lupa untuk "URL ....." Diganti dengan Link Social Media kamu
maka hasilnya akan seperti gambar diatas

oke sekian dulu pemahasan kali ini semoga bermanfaat, mohon maaf jika masih banyak kekurangan dalam hal penulisan dan penjelasan.

jika ada kendala hubungi admin@sekadarberbagi.com