Cara Membuat Widget Social Retro Keren

Memperindah blog terutama blogspot tentu sudah tidak asing lagi bagi sobat blogger, salah satunya yakni menambah widget social Retro. Widget ini akan membuat blog kita makin keren, karena tampil beda dengan widget-widget social network lainnya. Beberapa hari lalu kami juga membuat tutorial Cara Membuat Professional Social Sidebar dan Widget Social Slide Hover Keren, Sobat bisa coba karena selain terlihat profesional juga lumayan ringan.

Seperti yang kita semua sadari fakta bahwa situs Jejaring Sosial memainkan peran penting dalam mengembangkan blog anda terutama untuk menjaring visitor sebanyak-banyaknya, jadi sangatlah penting untuk memiliki widget Follower Sosial yang elegant . Ada beberapa widget sosial yang memiliki fitur yang cukup mengesankan, tapi terlalu berat untuk dimasukkan dalam sebuah blog karena dapat mempengaruhi kecepatan dari sebuah blog. Hari ini di artikel ini, kami akan berbagi Widget Social Retro dengan tampilan lumayan keren.

Silahkan Lihat demonya dulu :

DEMO

Bagaimana sobat, sangat menarik bukan?
Mengapa menggunakan Widget ini untuk Blog Anda?

Selain Ringan widget ini juga dapat membuat blog jadi elegan dgn gaya yang menarik dan membuat pengunjung penasaran untuk mengclicknya dan ini menjadi salah satu keuntungan, karena sedikit tidak mereka akan mengikuti di Jejaring social Anda terutama yakni Google+ | Facebook | Twitter.

Cara Install | Pasang di Blogger?
Ikuti langkah-langkah berikut dengan benar.

Silahkan menuju Blog yang akan ditambahkan Banner

Klik Tata Letak >>Tambah Widget>> HTML/Javasript

Sekarang silahkan Copy dan Paste Kode berikut pada form widget
Beikut kodenya :

<div class='metro-social'>
<li><a class="fb" href="http://www.facebook.com/carazonecom/" rel="nofollow" target='blank' title='Like Me'></a></li>
<li><a class="tw" href="http://twitter.com/zonecara/" rel="nofollow" target='blank' title='Follow Me'></a></li>
<li><a class="gp" href="https://plus.google.com/+carazone/" rel="nofollow" target='blank' title='Follow Me'></a></li>
<li><a class="pi" href="http://www.pinterest.com/carazone/" rel="nofollow" rel="nofollow" target='blank' title='Follow Me'></a></li>
<li><a class="in" href="http://www.linkedin.com/pub/cara-zone/a4/104/397/" rel="nofollow" rel="nofollow" target='blank' title='Like Me'></a></li>
<li><a class="yt" href="http://www.youtube.com/carazonefull/" rel="nofollow" target='blank' title='Subscribe Channel'></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/carazone/" rel="nofollow" target='blank' title='Subscribe'></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfFhUsQ4MI__R0vG3aLN70Nv4ESiiEG49dyxyfKhQ1TZ7jw35DXaqOT7tYiAlqOEPAjiGGINR9nUTiISn9hD6Q6zh38P58QmXECCX6N5lEEzSgxAETRhd0e4DA9kVURPgjIaOJCEnJACs/s1600/fb%601.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheFNPT4aMQ3ZUXARUVn-k3xtWh4nzKrd5CmZbSKgwDUtBVIyMChdTpRCH6gad_ngEnXsuOyyRDBOVtuWfoowNlHtaBctVF3i8Frutk4BhXffs5QGL7d_PXD7jFOKexuXLzxMeNJj-D_8k/s1600/tw1.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvya-2XWHlGUDJInIhi7OQ_WNxKMjqi9E1_-QISjz87b3VjVWKhVjYEfvr4-E9R2MTCQO7mITc6JNanqCmSjGhyucg40s2A46ayQcFTu-Ch_JKlWaMr-NW-_LUNrwaGHiXwC8Wu-sPv0o/s1600/g+1.png) no-repeat center center #da4a38}
.metro-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvjPY6T4RQp1S6qzlfmyQixnKoWC9vngwi6ySITtCFjeni5-tINXYm1tq_fv_uvjWY53TLJtGGFWRLPCIK_SgkvM1RUCQORLJ_LJro3Eee6pRLa1fbPNBBNNS_5xQ7yM7LPgjyw6HjcEM/s1600/pin1.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin8Je0IzZew0JPjTPA3lrdBELfSnv7M7AxzJeJE3kC3jAt7kzTDIfdBWxBouu6Lc6e9lJFktK3cb8vyBu8qx3nf022YjnSr2Tx2Q7T68VVivxF56Wawdusw0xQHqNHJDQuWg7F1fkBsvw/s1600/Lin1.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKxdN1bOTrYqSAVExfO_4dO_3QcFUYQetiE7hoa-essbF3GmhZCgamWTZMxwuCOVRJgvAuBmNnOGleLrvd_mJFCISDukGH6pVis6DEWJNG8EmH2Hcbytw7FIyljWDMkSxBqQ1EuXnwze8/s1600/YT1.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRBm0I4t4_PiyHTCVLXvXZnyF-Pv7ztbS0s0Kobs38OVfu85yv_jZiL0tCda99e3dFfPGDSq1ZI2_SRYOAC9nv9WHVowbbJKbEWO5ctLakw9VHxZkkm7Qm38KBQK7gqfWJlpy79m_z0S8/s1600/feed1.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-zDj7vVz5bbJTCa4iuKUqq_MgRcjiHgfl6nJUt5FQR97Gjkhctu-cVZew2r1aFeH_p7cyx1ieJMrkF8XcCQ5seNhd25595rYpUepFgU-7jmo4mb8W_eyMA8ZSfaDPAVyPVlyTfLR5oGM/s1600/fb2.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAjsfBU7JzhyTJtRaUhLpeJnQ4ane2QJISIu6lzMH0mmgYqJAAzdYBLydfH31ClVlDdSLLK2GRURaaYghXqBQn3fN1Bkuawy_tVdTLI-Pu6_0G7Xb3zuwME0cmF_lmfEUIjUhUrSjanBo/s1600/tw2.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMohhih6AGhqrlsSg2s-99zK9sVtWSgZmbq4XJG51Js7oB_Uv_NnOFfZNVsctLd0Ae0OG9QnMb8ppce8fnYPYhaPQYvwboyEUeFiz9p93aSVaGz4o0idAWvcDp8pzVUu71Mdw9K2n0r6I/s1600/g+2.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvEpnvGxRTL9Q5275fLYCeXFhBnVQARwY25zgNrQuDZ_5V09VA4cgs36dsS45OOHUucePK18glv1TDSHJ7BoxMaQPQZze-vGthJQOn5_uIGWhOXxRK80qUMJsEsfJfKkN_nxqQlns1TDI/s1600/pi2.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZiDHxTt0krhNhE-vTOIbRzB2OfxEwDTUopWU2bm6l_8djJ663Of07tC_GfVQLPoDR9_URIvjTl1Dj1PR6Co5rtq3PI7z_rczjmYCkfOa_vN8BQT1qVyMhJj2wnMOj5RkP_K4oXxch7g/s1600/Lin2.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvluoAYbj9CS7cakpzHcLp8gl4-OOe2dpsPYqXbLVBuffCXa1-ZY0En8fBU4NCrHcxgok_1cP7oTwv5p3pIm0Wy8bzvxlCVR_TcWX3pymRiiiXMlo67GmOmSCrYgwq2X4Uro7RX-9PgX0/s1600/yt2.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0tIACfvC1ZIeBriYiPSqk5nhxUFRYpUQo4nCiuNSmWnT_ksjQboPVJ_X0vCOkiGqO8FvybteqsC3-N9YtR9Sy4kIFDeABp-0iPdW96Vx-fMGCWzz7nKiD2Lb_UmyssLH3rTdugwFNdwA/s1600/feed2.png) no-repeat center center #e9a01c}
</style>

Keterangan | Silahkan Ganti  : 
http://www.facebook.com/carazonecom dengan Fanpage Fb masing-masing
http://twitter.com/zonecara dengan Id Twitter masing-masing
https://plus.google.com/+carazone dengan Id Gplus masing-masing
http://www.pinterest.com/carazone dengan Id Pinterest masing-masing
http://www.linkedin.com/pub/cara-zone/a4/104/397 dengan Id Linkedin masing-masing
http://www.youtube.com/carazonefull dengan Channel/saluran Youtube masing-masing
http://feeds.feedburner.com/carazone

dengan Id Feedburner masing-masing

Selamat Mencoba, jangan lupa komentar