Cara membuat widget jejaring sosial CSS3 penuh pesona di blog

Posted by jalupangna at 12.18 Read our previous post

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.

View Demo

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/AVvXsEiyX6oiUQfp0Vdg0OluJIsZ61WV7p3R4b5cDptJPKTjeJz9TSAp3Fy6_I8HWm3FLwr_KqVF4uTlj1UIOKe1WbxjCOG6Tx-pDi8tiSolET1zbn_ePEBmvwuaVHg3NCfIf7w2ftnEcXzVKs8/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.

Gimana? anda tertarik dengan widget di atas? Silahkan praktekan di blog anda...
Semoga bermanfa'at...

Original Source

Anda menyukai artikel di atas? Silahkan share dengan teman anda.

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Delicious
• LinkedIn
• Reddit
• Technorati

Post Author

Jalupangna

• Blog
• Facebook
• GooglePlus
• Twitter

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.