Membuat sosial Media Widget di Blogspot

Widget sosial media merupakan salah satu widget penting yang harus ada diblog kalian, karna widget mempermudah pengunjung untuk lebih mengenal admin blog lewat facebook, twitter, dan google+. Maaf ya kalo nanti penjelasannya agak sulit di mengerti karna saya orangnya nggak pinter nulis, tapi pembahasan ini emang nggak ribet kok karna nggak perlu edit HTML segala. kok Oke langsung saja masuk ke pokok pembahasan.

1. Pertama login ke blogger kalian
2. Klik Tata Letak > Tambahkan Gadget
3. Letakan Code di bawah ini

<style>
#social-hover {
float: left;
position: relative;
height: 40px;
}
#social-hover a{
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
width: 40px;
transition:width 0.4s;
-webkit-transition:width 0.4s;
-moz-transition:width 0.4s;
}
#social-hover a:hover{
width: 115px;
}
#social-hover ul, #top-menu ul { margin: 0; }
#social-hover li,
#social-hover li a,
#social-hover li .ts-icon,
#social-hover li .ts-text {
display: block;
position: relative;
width: 40px;
height: 40px;
}
#social-hover li,
#social-hover li a,
#social-hover li .ts-text {
float: left;
width: auto;
overflow: hidden;
}
#social-hover li a {
width: 40px;
line-height: 40px;
color: #FFF;
font-size: 12px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
#social-hover li.ts-rss a { background-color: #F88F16; }
#social-hover li.ts-rss .ts-icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEtLqnwUgpR2PBqJHlO6isUDAVBJt64Ro-1Utmm1QvLQbNGVYczgr9UNlGn67WA5jt10imMI96oCS-y753gSddOdxnw761tk4BSP8kBqfde_OGJj5fYKPus9YhTvtfmzurXBWqpflTjhg/s16/rss.png") no-repeat center center; }
#social-hover li .ts-icon { float: left; }
#social-hover li.ts-facebook a { background-color: #3B5998; }
#social-hover li.ts-facebook .ts-icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEMUFzOH2cyXafo6hO4gvqkKsracPW84JcWDnGBz6wLYE52jMJB1XSPkcI9cUf6ssYrb5zKJJNZufsTMOH5YhRyPH3YLaeFU5-LxODcX7Ya46VfLZMrVplh6KnOMr9UpDJH_3RjCTQJZw/s16/facebook.png") no-repeat center center; }
#social-hover li.ts-twitter a { background-color: #3CF; }
#social-hover li.ts-twitter .ts-icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzD33WG0lh18Gs7AQ_xbxwSoyBrjgHdjL4sPLIofVve-XG62MtUpcgz84fs2jnZESlYSh2dDJtemE0Ggx_jPFcrZ2RtaDbA0dgttqi_EdEGFoAIldKpirQg4bmbzKeO6EcrBfNmcmu0wQ/s16/twitter.png") no-repeat center center; }
#social-hover li.ts-gplus a { background-color: #BD3518; }
#social-hover li.ts-gplus .ts-icon { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLL0YqvVk1DTtB9De88Wto2a6DjXt0ZsEn_fo4zQxZ-36WQF56J5qSYl-ztqNxlf7LkYf8HCx00K_WFHwTPw842hnKzSAn_KSPcEOLsKzvFqPQMlDal8HMJBZHOSx5EYQ1vNrvveOEjU0/s16/gplus.png") no-repeat center center; }
</style>
<div id="social-hover">            
<ul>    
<li class="ts-rss"><a href="http://feeds.feedburner.com/kresnaadiip" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">RSS Feeds</div></a></li>        
<li class="ts-facebook"><a href="https://www.facebook.com/kresnaadiismayaputra" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">Facebook</div></a></li>
<li class="ts-twitter"><a href="https://twitter.com/kresnaadii" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">Twitter</div></a></li>
<li class="ts-gplus"><a href="https://plus.google.com/u/0/107073329105403532531/about" rel="nofollow" target="_blank"><div class="ts-icon"></div><div class="ts-text">Google+</div></a></li>                  
</ul>            
</div>

4. Ganti Kode yang berwarna merah dengan alamat URL kalian
5. Klik Save

Semoga bermanfaat