Widget Sosial Media untuk Blogger

Tweet

Widget Sosial Media untuk Blogger - Hai blogger, pada beberapa widget-widget pilihan yang sebelumnya, kali ini saya akan memberikan cara membuat widget sosial media keren untuk blogger yang cocok buat Anda.

Langkah Membuat Widget Sosial Media untuk Blogger :

1. Buka akun Blogger Anda
2. Masuk ke menu tata letak > add gadget > HTML/Javascript
3. Pastekan kode dibawah ini

<style>

.dcopy_widget{

margin-bottom:20px;

overflow:hidden;

clear: both;

border: 1px solid black;

width: 300px;

}

.dcopy_widget li{

line-height:15px;

float:left;

width:75px;

height:87px;

padding:7px 0 10px;

-moz-transition:.4s linear; -webkit-transition:.4s ease-out; transition:.4s linear;

list-style:none;

}

.dcopy_widget li a{display:block;text-align:center;}

.dcopy_widget li a strong{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTwnf6RkcAlooMABjksV0Bp8p3tBK4KhVFW1yKh02MBIQBoh2vUSJcRjwRNChFrp-yEEc71AZTzNzuMqkevdZzkaK3Mxurmk5KodO0IJEe92XZqHO202fzCLjW5O1Nfoyr6emP6AZJcS9Y/s1600/bt-icons.png) no-repeat;display:block; opacity:0.7; height:51px; margin-bottom:5px; -webkit-transition: opacity ease-in-out 0.4s;  -moz-transition: opacity ease-in-out 0.4s;  -o-transition: opacity ease-in-out 0.4s;  transition: opacity ease-in-out 0.4s;}

.dcopy_widget li a:hover strong{opacity:1;}

.dcopy_widget li:hover a{text-decoration: none;}

.dcopy_widget li.rss-subscribers a strong{ background-position:center -1084px ;}

.dcopy_widget li.rss-subscribers a:hover strong{ background-position:center -1139px ;}

.dcopy_widget li.rss-subscribers span{display:block;font-size:21px;}

.dcopy_widget li.facebook-fans a strong { background-position:center -1192px ;}

.dcopy_widget li.facebook-fans a:hover strong { background-position:center -1246px ;}

.dcopy_widget li.twitter-followers a strong{ background-position:center -868px;}

.dcopy_widget li.twitter-followers a:hover strong{ background-position:center -922px;}

.dcopy_widget li.youtube-subs a strong{ background-position:center -976px;}

.dcopy_widget li.youtube-subs a:hover strong{ background-position:center -1030px;}

.dcopy_widget li span{display:block;font-size:21px;}

.dcopy_widget li a small{color:#777;}

</style>

<br />

<div class="widget dcopy_widget">

<ul style="margin-left: -40px;">

<center><h1>Connect with Us</h1></center>

<li class="rss-subscribers">

<a href="http://feeds.feedburner.com/blogspot/frUpz">

<strong></strong>

<span>548</span>

<small>RSS Feed</small>

</a>

</li>

<li class="twitter-followers">

<a href="http://www.twitter.com/o_dhiee">

<strong></strong>

<span>5,245</span>

<small>Followers</small>

</a>

</li>

<li class="facebook-fans">

<a href="http://facebook.com/dcopy.blog">

<strong></strong>

<span>2,298</span>

<small>Fans</small>

</a>

</li>

<li class="youtube-subs">

<a href="http://www.youtube.com/username">

<strong></strong>

<span>1,202</span>

<small>Subscribers</small>

</a>

</li>

</ul>

</div>

Keterangan :

1. Ganti blogspot/frUpz dengan Feedburner ID Anda
2. Ganti dcopy.blog dengan Facebook username Anda
3. Ganti o_dhiee dengan Twitter Username Anda
4. Ganti Username dengan Youtube Username Anda

Demikianlah artikel Widget Sosial Media untuk Blogger, semoga membuat desain blog Anda semakin lebih baik lagi. Thanks reader...