 |
| Cara membuat widget chronicl social media responsive blogger simple |
TutorialMixs- Sobat blogger, karena dari beberapa postingan aku, ternyata yang menjadi seringnnya di kunjungi adalah masalah penampilan layout blog. Jadi kali ini aku mo share beberapa widget blogger yang apik dan tentunya responsive. silahkan di pakek untuk mempercantik blog agan pada
berikut tutorialnya:
- Pergi ke Tata Letak >> Add A Gadget, kemudian pilih HTML / JavaScript
- Paste kode ini di dalamnya.
- Ganti kode yang diwarnai dengan url profil Anda.
<div class="btnt-chronicl-social">oke lalu simpan saja. semoga bermanfaat
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/tutorialmixs">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/pvid77">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/tutorialmixs">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/u/0/b/101110372634917065358/">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/pvidarvandy">Connect with me on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/user/chandeep10">Watch me on YouTube</a></li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/
.btnt-chronicl-social { width: 320px; margin: -10px; }
.btnt-chronicl-social ul { margin: 0; padding: 0; }
.btnt-chronicl-social ul li { list-style:none; padding: 0; text-transform: none; }
.btnt-chronicl-social ul li a { color: #fff; display:block; }
.btnt-chronicl-social ul li a:hover { color: #c9c9c9; background-color: #333; }
.btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; background-size: 20px; padding: 17.5px 45px; }
/*]]>*/
</style>
EmoticonEmoticon