blog arjem: Cara Membuat Wedget Jaringan Sosial Dengan CSS

Jaringan sosial adalah jalan alternatif para pengunjung untuk menelusuri kegiatan kita di jaringan kita yang lain. untuk tampilan icon jejaringan dengan css3 contohnya sebagai berikut:

Cara penerapanya

Login ke blog sobat>>dashboard
Klik tata letak ..Add gadget >> pilih HTML/javascript
Copy code di bawah ini dan pastekan pada element baru sobat

<style type="text/css">
#mkrbutton .iconz {background:#E3E3E3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMWKtwcP-XLLcAD2nioAZcAJgfJMNEfirY2TKW4Nxx6_NGiUmUInLMRkyWmVVzqnoJ-VwTYA_0uCHo9VsFylI9oLktCH7OTw3wBgIKj1g9fWetcrWL0vrxL6ymmf3yQJP4MG8by6pIzWU/s1600/blsocial12.png') 0 0 no-repeat;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-o-border-radius:40px;
border-radius:40px;
display:block;
color:#212121;
float:none;
height:48px;
width: 48px;
line-height:48px;
margin:10px auto 0;
position:relative;
text-shadow:0 1px 0 #FAFAFA;
text-align:center;
text-decoration:none;
white-space:nowrap;
-webkit-transition:width .25s ease-in-out;
-ms-transition:width .25s ease-in-out;
-moz-transition:width .25s ease-in-out;
-o-transition:width .25s ease-in-out;
transition:width .25s ease-in-out;
-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;}
#mkrbutton a span {display:none;}
#mkrbutton:hover a span {display:inline;}
#mkrbutton a span {font-size:1.4em;}
#mkrbutton:hover .iconz {width:250px;}
#mkrbutton .fb {background-position: 0 -384px;}
#mkrbutton .twiter {background-position: 0 -432px;}
#mkrbutton .google {background-position: 0 -480px;}
#mkrbutton .pint {background-position: 0 -528px;}
#mkrbutton .linkedin {background-position: 0 -576px;}
#mkrbutton .devart {background-position: 0 -624px;}
#mkrbutton .ytube {background-position: 0 -672px;}
#mkrbutton .rss {background-position: 0 -720px;}
#mkrbutton .fb:hover {background-position: 0 0;color: #0374DD;}
#mkrbutton .twiter:hover {background-position: 0 -48px;color: #00A1DF;}
#mkrbutton .google:hover {background-position: 0 -96px;color: #A70000;}
#mkrbutton .pint:hover {background-position: 0 -144px;color: #C00;}
#mkrbutton .linkedin:hover {background-position: 0 -192px;color: #005772;}
#mkrbutton .devart:hover {background-position: 0 -240px;color: #4C7A4A;}
#mkrbutton .ytube:hover {background-position: 0 -288px;color: #A00;}
#mkrbutton .rss:hover {background-position: 0 -336px;color: #EC5601;}
</style>
<div id="mkrbutton">
<a href="#" class="iconz fb"><span>Facebook</span></a></div>
<div id="mkrbutton">
<a href="#" class="iconz twiter"><span>Twitter</span></a></div>
<div id="mkrbutton">
<a href="#" class="iconz google"><span>Google+</span></a></div>
<div id="mkrbutton">
<a href="#" class="iconz ytube"><span>Youtube</span></a></div>
<div id="mkrbutton">
<a href="#" class="iconz rss"><span>RSS</span></a></div>