Pasang Tombol Social Network Icon Keren with CSS

Mungkin anda pusing mencari cara pasang tombol social bookmark atau button social network (jejaring sosial) di blog anda, baik itu facebook, twitter, Google+ (google plus), dan rss feed sharing. Nah Sekarang saya akan mencoba memberikan anda solusi simpelnya bagaimana memasang tombol sosial network tersebut di blog anda dengan sekali langkah tanpa perlu masuk ke script blogspot/wordpress anda. Dan asal tau saja cara pasang tombol social network atau tombol jejaring sosial ini adalah yang termudah yang saya tawarkan.
Tombol facebook, twitter, google plus, dan rss feed sharing adalah salah satu cara berkomunikasi dengan pengunjung blog anda. Selain itu, tombol jejaring sosial tersebut juga merupakan cara cepat meningkatkan jumlah pengunjung blog anda karena kekuatan berbagi dari tombol jejaring sosial ini cukup fantastis. Mungkin banyak orang yang menyepelehkan pemasangan tombol jejaring sosial ini, tapi bagi seorang blogger yang telah mapan pengetahuan blogging-nya ini merupakan widget paling penting yang harus ada di blog mereka. Karena tanpa tombol social bookmark/jejaring sosial ini mereka mengibaratkan blog mereka ibarat sayur tanpa garam. Jadi mari kita mulai saja belajar cara pemasangan tombol jejaring sosial ini :
Dan dibawah ini adalah DEMONya >>>

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

bagaimana? tertarik memasangnya.........
Silahkan Ikuti tahap berikut:
1. Seperti biasa Login Ke Akun Blogger Anda
2. Lalu Pilih Rancangan ===> Tambah Gadget ===> HTML / Java Script
3. Lalu Copy & Paste Kode di bawah ini:

<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('https://lh5.googleusercontent.com/-oJJuTABnZG4/TyvWKerI_-I/AAAAAAAAF_g/9tFEfxqNLa4/d/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="http://twitter.com/uttakracker15" class="icon twitter" target="_blank">Follow me on Twitter</a></li>
<li data-alt="Follow me on Facebook"><a rel="external" href="https://www.facebook.com/uttamelanikz" class="icon facebook" target="_blank">Follow me on Facebook</a></li>
<li data-alt="Find me on Google+"><a rel="publisher" href="https://plus.google.com/112804133967399358173" class="icon gplus" target="_blank">Find me on Google+</a></li>
<li data-alt="Subscribe via RSS"><a rel="external" href="http://feeds.feedburner.com/ut2a-4downnet" class="icon rss" target="_blank">Subscribe via RSS</a></li>
</ul>

4.Terakhir Save, dan Lihat hasilnya.

- Teks yang saya beri warna diatas, Silahkan sobat rubah sesuai url masing2.


Please rate this article: