Cara Menciptakan Widget Social Media Keren Di Blog

Hallo temen temen semua kembali lagi di
pada kesempatan kali ini aku 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 daerah untuk mempromosikan apapun. dan tutorial kali ini sangat cocok untuk blogger pemula yang ingin mempercantik blog nya dengan widget social media,
tanpa berlama usang lagi simak pembahasan nya:

1. Masuk ke sajian 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 risikonya akan menyerupai gambar diatas

sepakat sekian dulu pemahasan kali ini supaya bermanfaat, mohon maaf kalau masih banyak kekurangan dalam hal penulisan dan penjelasan.

kalau ada hambatan hubungi Infoterlengkap.com

Advertisement