Membuat Widget Jejaring Sosial CSS3 Keren Di Blog

Pada postingan kali ini masih berkaitan dengan widget jejaring sosial,  widget yang satu ini menggunakan effect transisi (CSS3). Saya akan share ke anda bagaimana cara membuat widget jejaring sosial elegant dengan CSS3. Agak sedikit berbeda dengan postingan yang telah lalu, widget ini sangat elegant, cantik dan super keren.

Hampir setiap blog atau website memiliki widget jejaring sosial dengan tombol icons yang beragam. Dengan memasang widget jejaring sosial pada blog, anda dapat mengundang pembaca/pengunjung blog untuk terlibat dalam jejaring sosial anda, dan tentunya dapat meningkatkan reputasi blog anda. Jejaring Sosial  memainkan peran yang sangat penting dalam menghasilkan lalu lintas atau traffic pengunjung blog anda.

Langsung praktek kita coba:

• Pertama-tama masuk ke halaman tata letak kemudian klik menu Tata Letak:  

•  Tambah elemen halaman HTML/JavaScript, kemudian salin semua kode di bawah ini :

<style type="text/css">
#mkrbutton .iconz {background:#E3E3E3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGmX_Fz6Bf42NsyKwa8CoeMr2hwNy9MjqTXcJ3AZWBaHn2qKskjCdV8bsFlq2i-QFLYUQJD-qP_jcfnX70NDuc6FJ8DCvACUvI5NMil0hkPeUItau-ukMb1Xarm0rXMO7VqsSmDzApsHM/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>

Catatan: 

Ukuran lebar yang tepat untuk pengaplikasian pada sidebar yaitu 300px. Untuk menyesuaikan dengan sidebar teman-teman carilah kode ini #mkrbutton:hover .iconz {width:250px;} dan rubah nilai pada width nya agar sesuai dengan tampilan sidebar anda.

Semoga Bermanfaat!