Membuat Widget Social Dengan Effect CSS pada Blog

1 min read

Kali ini saya akan berikan cara bagaimana Membuat Widget Social Dengan Effect CSS pada Blog yaitu bertujuan untuk memudahkan pengunjung menyukai/mendapatkan informasi anda pada blog tersebut.

Langsung saja ke tahap tutorial :

Masuk ke dasbor anda
Lalu pilih tab Tata Letak
Tambahkan Gadget
Pilih HTML/javaScript
Masukan script ini *jangan beri judul pada HTML/Javasrcipt nya

<style type="text/css">
.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}
</style>
<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/AwandCyber4rt" target="_blank" title="my feeds">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/AwandCyber4rt" target="_blank" title="my twitter">Follow me on Twitter</a></li>
<li><a class="facebook" href="http://www.facebook.com/awandcyber4rtblogspotcom" target="_blank" title="my facebook">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/u/0/104536298461705212184/" target="_blank" title="my profile">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/ID" target="_blank" title="my linkedin">Connect with me on LinkedIn</a></li>
</ul>
</div>

Catatan kecil :
<li><a class="rss" href="http://feeds.feedburner.com/AwandCyber4rt" target="_blank" title="my feeds">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/AwandCyber4rt" target="_blank" title="my twitter">Follow me on Twitter</a></li>
<li><a class="facebook" href="http://www.facebook.com/awandcyber4rtblogspotcom" target="_blank" title="my facebook">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/u/0/104536298461705212184/" target="_blank" title="my profile">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/ID" target="_blank" title="my linkedin">Connect with me on LinkedIn</a></li>

*Ganti dengan ID-nya dengan ID yang kamu punya jika tidak punya hapus saja.
6. Save.
Lalu lihat deh homepage blog mu :)
Sekian tutorial Membuat Widget Social Dengan Effect CSS pada Blog

You may like these posts

Post a Comment