Cara Pasang Widget Jejaring Sosial : Facebook, Twitter, G+ & RSS

Kali ini saya akan mencoba menuliskan tutorial cara pasang widget jejaring sosial facebook, twitter, G+ dan RSS di blogger.

Sebelum membuat widget jaringan social keren yang satu ini ada baiknya jika kita lihat dahulu bagaimana penampilannya, agar tidak mengecewakan karena salah pasang widget, berikut gambarnya :

Berikut demo widget facebook, twitter, G+ dan RSS

• Follow me on Twitter
• Follow me on Facebook
• Find me on Google+
• Subscribe via RSS

Bagaimana, widget jaringan sosialnya keren apa tidak?

Jika tertarik ingin memassangnya di blog kamu, maka silakan ikuti panduan cara memasangnya berikut ini.

Pasang Widget Jejaring Sosial : Facebook, Twitter, G+ dan RSS

1. Login ke blogger
2. Klik menu Tata Letak

3. Klik Tambah Gadget, pilih gadget Html/JavaScript


4. Masukkan kode yang sudah saya sertakan di bawah di dalam nya
5. Simpan & Selesai

Berikut script yang harus dipasang :

<style>#iconizr li {font-size:18px;font-family:shaun the sheep !important;
color:#cccccc;text-shadow:0px -1px 0px #000;cursor: pointer;height:41px;position: relative;border-top:none;border-bottom:none;list-style:none;}
#iconizr .icon {background: #d91e76 url('http://codecbd.googlecode.com/files/iconizers.png') 3px 0 no-repeat;background-color: rgba(217,30,118, .42);-moz-border-radius:20px;-webkit-border-radius:20px;-o-border-radius:20px;border-radius:20px;display: block;color: #141414;float: none;height: 40px;line-height: 40px;margin: 5px 0 0;position: relative;text-align: left;text-indent: 50px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 250px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-ms-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0,0,0, .28) 0 1px 3px;-moz-box-shadow: rgba(0,0,0, .28) 0 1px 3px;-ms-box-shadow:rgba(0,0,0, .28) 0 1px 3px;-o-box-shadow: rgba(0,0,0, .28) 0 1px 3px;box-shadow: rgba(0,0,0, .28) 0 1px 3px;width:40px}
#iconizr li:after {color: #141414;content: attr(data-alt);display: block;height: 38px;line-height: 38px;position: absolute;left: 55px;top: 0;z-index: 2;}
#iconizr .icon {color: #fafafa;overflow: hidden;text-decoration: none;}
#iconizr .facebook {background-color: rgba(65,131,196, .42);background-position: 3px 0;}
#iconizr .twitter {background-color: rgba(74,191,226, .42);background-position: 3px -40px;}
#iconizr .gplus {background-color: rgba(206,26,29, .42);background-position: 3px -80px;}
#iconizr .rss {background-color: rgba(255,109, 0, .42);background-position: 3px -160px;}
#iconizr li:hover .icon {width:99%;}
#iconizr li:hover .icon {background-color: #d91e76;}
#iconizr li:hover .facebook {background-color: #2d76b9;}
#iconizr li:hover .twitter {background-color: #29b8e5;}
#iconizr li:hover .gplus {background-color:#E0181C;}
#iconizr li:hover .rss {background-color: #ff6d00;}</style>
<ul id="iconizr"><li data-alt="Follow me on Twitter"><a rel="external" href="#Twitter" class="icon twitter" target="_blank">Follow me on Twitter</a></li>
<li data-alt="Follow me on Facebook"><a rel="external" href="#Facebook" class="icon facebook" target="_blank">Follow me on Facebook</a></li>
<li data-alt="Find me on Google+"><a rel="publisher" href="#G+" class="icon gplus" target="_blank">Find me on Google+</a></li>
<li data-alt="Subscribe via RSS"><a rel="external" href="#Feed" class="icon rss" target="_blank">Subscribe via RSS</a></li>
</ul>

Keterangan :

Ganti kode #Twitter dengan alamat twitter kamu.
Ganti kode #Facebook dengan alamat facebook kamu.
Ganti kode #G+ dengan alamat G+ kamu.
Ganti kode #Feed dengan alamat feed blog kamu.