cara membuat widget jejaring sosial elegant dengan CSS3

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. Silahkan klik live demo di bawah ini untuk melihat hasilnya..

View Demo

Super keren dan sangat elegant bukan?...:)

Langsung praktek di TKP:

• 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/AVvXsEg3G2uO9Zq3nZUKRbHZ4-4ZiBhmY90KdNtNXv0_fe9alfhjHzG6vm6tatHWs3LsPTNcoJTPD640L5xBa7ZAb8P-7Ns6fmHUOTgdzBXNJc-ENhapE2DmaVqGU-99m487jqbYX_36CXjyB28/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 pint"><span>Pinterest</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz linkedin"><span>LinkedIn</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz devart"><span>DeviantArt</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: 

untuk memudahkan dalam menambah/mengurangi tombol yang anda inginkan silahkan hapus pada bagian "<div id="mkrbutton">..............</div>". Misalnya untuk menggurangi tombol Youtube silahkan hapus <div id="mkrbutton"><a href="#" class="iconz ytube"><span>Youtube</span></a></div>.

<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 pint"><span>Pinterest</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz linkedin"><span>LinkedIn</span></a></div>
<div id="mkrbutton"><a href="#" class="iconz devart"><span>DeviantArt</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>

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.

Gimana? anda tertarik dengan widget di atas? Silahkan praktekan di blog anda...

Semoga bermanfa'at...


Original Source