Senin, 27 Mei 2013

Tombol Social Network CSS


1. Login akun blogger.mu
2. Rancangan => Add gadget => HTML
3. Tambahkan kode di bawah ini

<style>
#iconmr li {
font-size:18px;
font-family:Agency Fb;
color:#ccc;
cursor: pointer;
height:41px;
position: relative;
border-top:none;
border-bottom:none;
list-style:none;
}
#iconmr .icon {
background: red 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
}
#iconmr li:after {
color: #141414;
content: attr(data-alt);
display: block;
height: 38px;
line-height: 38px;
position: absolute;
left: 55px;
top: 0;
z-index: 2;
}
#iconmr .icon {
color: #fafafa;
overflow: hidden;
text-decoration: none;
}
#iconmr .facebook {
background-color: rgba(65,131,196, .42);
background-position: 3px 0;
}
#iconmr .twitter {
background-color: rgba(74,191,226, .42);
background-position: 3px -40px;
}
#iconmr .gplus {
background-color: rgba(206,26,29, .42);
background-position: 3px -80px;
}
#iconmr li:hover .icon {
width:99%;
}
#iconmr li:hover .icon {
background-color: #d91e76;
}
#iconmr li:hover .facebook {
background-color: #2d76b9;
}
#iconmr li:hover .twitter {
background-color: #29b8e5;
}
#iconmr li:hover .gplus {
background-color:#E0181C;
}
#iconmr li:hover .rss {
background-color: #ff6d00;
}
</style>
<br />
<ul id="iconmr">
<li data-alt="Follow Me On Twitter"><a class="icon twitter" href="http://twitter.com/OfficialAlf1anz" rel="external" target="_blank">Follow Me On Facebook</a></li>
<li data-alt="Follow Me On Facebook"><a class="icon facebook" href="https://www.facebook.com/Mr.Alf1anz" rel="external" target="_blank">Follow Me On Facebook</a></li>
<li data-alt="Find Me On Google+"><a class="icon gplus" href="http://plus.google.com/u/0/113491096723669405435" rel="publisher" target="_blank">Find Me On Google+</a></li>
</ul>
 4. Save dan lihat hasilnya

0 komentar:

Poskan Komentar