Cara Membuat Widget Sosial Media di Sidebar Blogspot

Caraono.com- Cara Membuat Widget Sosial Media di Sidebar Blogspot.
Bagaimana cara membuat widget sosial media di sidebar blogspot

Ikuti langkah-langkah di bawah ini
1. Login ke Blogger
2. Klik Layout atau Tata Letak
3. Klik add Gadget Pilih HTML/Javascript
4. Setelah Masukkan Kode di Bawah ini pada Form

<div class='metro-social'>
<li><a class="fb" href="http://www.facebook.com/caraono.com/" rel="nofollow" target='blank' title='Like Me'></a></li>
<li><a class="tw" href="http://twitter.com/caraono/" rel="nofollow" target='blank' title='Follow Me'></a></li>
<li><a class="gp" href="https://plus.google.com/+caraono/" rel="nofollow" target='blank' title='Follow Me'></a></li>
<li><a class="pi" href="http://www.pinterest.com/caraono/" rel="nofollow" rel="nofollow" target='blank' title='Follow Me'></a></li>
<li><a class="in" href="http://www.linkedin.com/pub/caraono/a4/104/397/" rel="nofollow" rel="nofollow" target='blank' title='Like Me'></a></li>
<li><a class="yt" href="http://www.youtube.com/caraonofull/" rel="nofollow" target='blank' title='Subscribe Channel'></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/caraono/" 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/AVvXsEg-y8aJFbOgfyC9reykwnp5gv_qqWrWbbrD4cBG23WdeoNe4V-koLdrGqWoCInYT7jpMfHodj18PTA_EyntGRe1jHWiX0U0ImC9O8_El7WayswLb628e2966n5dDy3Srb-eRgijemjPL8Y/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/AVvXsEjt2zULk8u6FQF2aeuo6L_6_PzcnJjmCN2CHXHuF_TnQ12gA1DDppxg7j4Qi81hLkp2c-AKkAcm04rMpr7Oj721xnwfyC0hE9pwReiglNz5CtYtpmaLIwkP3PNYRUPclYwmWhroXX-dUvQ/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/AVvXsEhSjvQQfXJUMFB-7PUT02EX5gRjgaNJTS79ZKTwjMY1gUdPUNXlyTplIq8e3zl5CSbtkYVviQJu4kWRiWI-1BHERJOnSnPUjg6NcqLm6lwiXsyX_ThBZMsyfVX4ILwwTdihkNRKC51M-Ts/s1600/g+1.png) no-repeat center center #da4a38}
.metro-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsBwYg2Y4XOe01P6ez9i6RaUhPmtlMQkQb_lw6AcSyL82NUgS78xKlmhr8ZlmlIMg7eJcI3Q-_7opsRgI7HHnA0TZhk5ih-Sts3wHXO_Pksg540WUhyAz9ifvr20ySITTUI_OUXmoUiaI/s1600/pin1.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Ps1IwAqdVneI5_ATdRNNd7SC-GdaeyAZTTBxtx-LbVqlFZSU01OBuO2vxWKLC2KBBsF6fM_33E6u9OmBNumSGopioL_1uEiuMW9tcBZ7HIE4XBDiuTcLFyX8jTogKGEIhGqJ2XkIlbo/s1600/Lin1.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJOMxU4JruJ-9havtNEqfMg1AN69vPyMBIb1YGogphsF2n96pUfq6tZSKM1Ojnmng12Rblo_C3-G3NCsPvR78Q9lUM_wXXG-VgmK1VEiOI3QFADd7OskaAe6NBAWhVVjXEaGzU9vFPxc/s1600/YT1.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBT9EX8HQYvB9AHv1HelvOGtnbWzFvh67oVznh7hEvHe94HusVTDP_GrFDrNck9f2K1OfCIL1_PzgMf7JP60zbm838HbHEVUviqPCFyZILYnuMQVzrY1TiMO-yQ9VX_sKWqwg3nkSerJc/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/AVvXsEhUcAoY7UZnzAj2b5l3CyP4gtLdnTEnwpkHPf0wkkQlk-5yXYtrBTo-7WQLhwfaOalKicGvLnweQLSUsvTUH2DAD0pz0MakTM6SzCofP-lokS6Ki2c1CKMINiKdsDKt21mH9a4fQM370Is/s1600/fb2.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK_W5spBnpvN5dbAQs8L8BC66HdXTiCeSaQU-1aJxKhX02KueZ89yA35ODojoZy-Kiy8s4yIDzJ5sPVcy9Pccs9WqIN5EZ0RUWfGQy4wVPEAuwH8V2Mp6Bdn9RzuHTcP4DtwBXqYusScY/s1600/tw2.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1la5vxJWfKNjAeLdmL4knZqU5fb6M_NzspUJ8izWAGWZZ2_ofutFQ-onLi7Sz7YnLfvdPCCs12pVE5WVLThL6oQzKUMukLjV8gSr2BaV8bPJ1Ke4BQqSnpGfnbLc2Gn5id4wy2qKeC-o/s1600/g+2.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZQsTpH9CXX9nwcX4fGMpb1Xk_IMvE-TqtiN6xw_wcd5ad4kyBWxYdFrTDA-KV-mH2Nz3vJPAXVZOvNnV23hS8nxYPlITXE4kT6u502HwUi1wVwsR3Kl8eMPzCNpiZa1yPrl85x0zD9V4/s1600/pi2.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Sg41F4GFzY8s4YxXzX1Al_aW_Bc-Wp0Z5psvG94wzqPvHmspsgyn0ghCG7IApONZR4V4iRga33cNEmAB0QmSv5nSVf1kN15BuYuzJTOkv2CpNIQhOzs4JfeoXBBe1oFGuBNh7C1KI1c/s1600/Lin2.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9-fP9EOks2lYYBRJQ9lpQ3IY-o4MCwmV5b3EbikWWFI1UgsaSIPgZbygh74ny7wJVWgLRl3JAeY64BYUWhHfsZgRDB7Z-UZz4YD6kPMGR3Fr1lPlmulvYmwFidB51xNDxTmjFZnb8kR0/s1600/yt2.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPHLUuA4ORVD5Z64lBZOpaR7HVpCT97r-HxL0ugm-OXH3x2ZdD-s0TFUUvbi9T3wgneAJEk6niUos3L9jBbPcmD7keiRY9WvhK9HoQ_hemHDkPh9Do-_rGQNqmoYs5UFTUJzHtBhTYqUQ/s1600/feed2.png) no-repeat center center #e9a01c}
</style>

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


Demikian Tutorial kali ini,
Terima kasih telah benkunjung dan membaca artikel Cara Membuat Widget Sosial Media di Sidebar Blogspot.
Semoga Bermanfaat dan menjadi tambahan ilmu bagi sobat semua.

Salam sukses untuk kita semua
Bye-bye