0

Button Media Social Efect Css3

Sabtu, 05 Januari 2013

  1. Masuk Dhasboard Blogspot ke Tata Letak dan tambah Widget, pilih HTML/Javascript lalu isi dengan kode di bawah ini.

<style type="text/css">
#iconizr li {font-size:14px;font-family:arial, sans-serif !important;color:#cccccc;text-shadow:0px -1px 0px #fff;cursor: pointer;height:41px;position: relative;border-top:none;border-bottom:none;list-style:none;}
#iconizr .icon {background: #d91e76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1sIv9OudG0n5xhk7h46gK-_pcp74uxgq_v3rck0FKszSTj-pivWPAtjFwAvTkGmIiR1h_MsdlZPeIlFILPxkvIhAfR3m5D0QC8R8SBst28v2vojPcklpxWjLDTew2lkRNkskqivPfUw/s1600/iconize_kim.png') 3px 0 no-repeat;background-color: rgba(217,30,118, .42);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="Link Twitter disini" class="icon twitter" target="_blank">Follow me on Twitter</a>
    </li>
    <li data-alt="Follow me on Facebook">
         <a rel="external" href="Link facebook disini" class="icon facebook" target="_blank">Follow me on Facebook</a>
    </li>
    <li data-alt="Find me on Google+">
         <a rel="publisher" href="Link Google+ disini" class="icon gplus" target="_blank">Find me on Google+</a>
    </li>
    <li data-alt="Subscribe via RSS">
         <a rel="external" href="Link Rss disini" class="icon rss" target="_blank">Subscribe via RSS</a>
    </li>
</ul>
    Klik simpan.

    Label: , , ,

    0 Komentar:

    Posting Komentar

    Twitter @kimzigr

© 2012 - kimzigr | Desain Oleh kimzigr| Classic Themplate Html5 & Css3 | Mesin Blogger