pada kesempatan ini sekilat-info 714 akan share tentng Cara Memasang Widget Jejaring Yang Keren Di Blog, walaupup sahabat blogger sudah banyak yang tauh tentang widget ini tapi saya share karena sempat masih ad teman-teman blogger yang masih membutuhkannya dan kebetulan juga ada permintaan dari teman blogger yang mintah untuk share widget jejaring sosial in!
Untuk demonya seperti di bawah ini :
OK jiak zobat tertarik dengan widget di atas, langsung aja ikutin langka-langka berikut ini :
- masuk ke tata letak
- Tambah Gadget
- pilih HTML / JavaScript
- Lalu Masukan Kode Di Bawah Ini..
- Simpan.
<style>#iconizr li {font-size:18px;font-family:shaun the sheep !important;Ket :
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="#" class="icon twitter" target="_blank">Follow me on Twitter</a></li>
<li data-alt="Follow me on Facebook"><a rel="external" href="#" class="icon facebook" target="_blank">Follow me on Facebook</a></li>
<li data-alt="Find me on Google+"><a rel="publisher" href="#" class="icon gplus" target="_blank">Find me on Google+</a></li>
<li data-alt="Subscribe via RSS"><a rel="external"#" class="icon rss" target="_blank">Subscribe via RSS</a></li>
</ul>
- Ganti yang berwarna Hijau dengan Alamat sosial media zobat!
Mudah kan cara membuatnya! hee
Semoga artikel ini dapat bermanfaat bagi sahabat blogger yang membutuhkannya. jangan lupa meniggalkan jejak ya seperti komentar! heheh. Sumber : http://anrhy.blogspot.com/
