Cara Buat Social Tool Di Blog

Nah kali ini saya mau berbagi tips nie sob, bila sobat akan membuat social Widget seperti di bawah ini :

nah anda tertarik ???
Berikut adalah cara nya :

1. Log-in ke akun blog anda
2. Cadangkan dulu template blog anda (mencegah hal yang tidak di iginkan 0
3. Buka halaman Tata Letak >>Add widget
4. Lalu copy paste code berikut :

<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="alamat URL akun" class="icon twitter" target="_blank">Follow me on Twitter</a></li>
<li data-alt="Follow me on Facebook"><a rel="external" href="alamat URL akun" class="icon facebook" target="_blank">Follow me on Facebook</a></li>
<li data-alt="Find me on Google+"><a rel="publisher" href="alamat URL akun" class="icon gplus" target="_blank">Find me on Google+</a></li>
<li data-alt="Subscribe via RSS"><a rel="external" href="alamat URL akun" class="icon rss" target="_blank">Subscribe via RSS</a></li>
</ul>

*code yang berwarna merah di ganti dengan alamat URL akun terkait sobat

5. Simpan dan Lihat hasilnya

semoga bermanfaat

Post oleh : Centryjazz.blog