Hari ini, saya akan membagikan info seputaran widget blog. Widget kali ini berhubungan dengan masalah sosial media. Widget kali ini diberi nama "Metro UI Style Social Media Widget untuk Blogger". Widget ini terinpirasi dari Windows 8 dimana tampilannya berupa kotak-kotak. di bawah ini adalah screenshotnya:
1. login ke akun blog sobat
2. Klik Tambahkan Gadget dan klik 'HTML/Javascript
3.Masukan kode di bawah tepat di dalam kolom HTML/Javascript
<style>
.metro-social{width:315px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .facebookbt,.twitterbt,.googleplusbt,.pinterestbt,.linkedinbt,.youtubebt,.rssbt{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .facebookbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgHxgyNhQZRwARzm_DAVPTakY-s-GOYrQ4shKlDHSWFrNpEy_SKomoY0A4knRPvIh8kFD2uH14HtnOsp16Crbw8ICBE4Y8IgNqukPcGDGyAQ_g2vFr8fY2B-30iARPtCNj_f3lRduQDag/s1600/bt-facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZylWi-pLxnPQXoSCnPWg6cZnv0qqoeibFH67ZzHlmpdudKTMCVhPdCd4ZILumn8iTcZczcu8fJFheIJVXHXokEQXbOAAq3NylEddUpo29A5m7nkYawxb2fYYcRf0DAYzmNiMkX4sOmsE/s1600/bt-twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidx0a_gSuwQ2CFBZ9ECvf_jthesbtdRmnhLKQRFQJcX2aWAp7HN-AQzgrM1xAZn8jQQqxtqlOfhJB-phIxeXupS0eBhrAuL1N7fVcmui0J4XxGW6QKW1DxwTW3cVPbBkLVXMu2Ar5OdRY/s1600/bt-google+plus.png) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihvGZqM8laESyGkzjtGItLuqwtorPs4-bgu3y6MfkKFcancTvIR-uFC3Vy1TJNK7WouugnQ9KzI6CouaqCj_11Nq9u3ZaHqOCi5A5ledUQ3fo5EKoyfjKJkf0hTvXnc9TwTgHCTyRTaao/s1600/bt-pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpj9yqwXp8H17ofXbb4eagFopZTcVpIh4P62WnHZmNcPQFqBrqFWOCyaPInwP3ljDVX8clK1JkEoawiJQxdSKt8XgP2hFuxv6AbvllfMOdSoeuk2mt9UpQ3YLeN6UOnr38XFsLgxm_-Ik/s1600/bt-linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5k_WA_A7C6mVzYTjmvQHs5NenWuezem3A0PxdEdDek6f2sRzbes72m3yFvpQWtPhqp4_XP2FyxEOhzTziAvcdKuKCsCEFUpnbmYlKbzLLYwh8shucWciEsget9GGuNrbZe_-tjRxxgPY/s1600/bt-youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihCMB8FjD8On5JzJsXOAYgxDzjbzmZynSLXua_ExgFN7cR4_c4l_8vSLXB0aY9dowE0KvQEeOlO7uVW0BzEG2ZHUUESnDBkJjVpGWiQ3M3JRCjg97iKpck0yxFldwrmnAVswUj0FLNLVI/s1600/bt-feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .facebookbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaGgoNfjddf0tvuuSwETp-6tY9fQ9IOHnviEPs_XvDZfVMhN-ht84MrfHb_XK1wy2c8sksxBbqoIdASxbyezxwMj3P_kH91LnYs4ZOv239gOdQ_Bb1WiT0aH9PDu_B_iSo7KJAy9sl9S4/s1600/bt-facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARMV-rz8XyFqm4oLMY39qqwl1WuUrwK1YcoB5tq8Qms_Vg4DdQvEbDM3MTkCze7A1L-IjTOeHS82KN8oWYOw59j7APPDkpD-Ph9SZUXCe5LBKkPd_QIRbAjVsJFFIziK5rOmcVNxvHBA/s1600/bt-twitter.png) no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ-QhRpwG4o5UFDiZkilX8RMWmVJHRM6MP-216dWY2SnGpkTThwV_9SaS_ohcHRzAmZFAkzuw-m5mcLPSqI2fLN6Jye1Wj7F9fP3r9kq1dT87JWAW6p0J-PgjQFuxh6lH9vWqnNR0TZlw/s1600/bt-google+plus.png) no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0ZmGp0vD7MsGnf6FwDEjcObYmma4GQoUADD_EJB3RnzKQDM5slxG6O7F5YVKBcx4mKQpgyhoSyyQn5f4Xqk0OdU2p2W5h_4JIjQkjZccyazqnfi-ZA_ew5Hn82sRtnsjDVmNG07GqTY/s1600/bt-pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyLEjx5DvObNxBLIj7O-uyb4LJ_k_WNH2XCQRVIbEfl6-GV6Qczl-S8aPb_XibeV9ovgGAUP2LAU9BHmLV6pV40kHc2ptIzshPcrBgS8jSTngtGqcuiFh_E2qLj6O5KLvOCA-EyxDPFs4/s1600/bt-linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkYPhaXPTvgQe_UnhhoxCpu7QOIeLG0xddxsWtHa-HaUf4huycILwa_V-bhB4NObE_ORO14eLQ078XX5kIRFUmrIjdOjKIJhMFkBMU9ju4AfiX4kDhQJtyeUu-6BNUeE1ROhIVltgmkAk/s1600/bt-youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkVS9ik469jzRwABPMLxdf1Drk07yVpu4htaDgbT-Wcfu66H4bpUUVUHRoxw0DCEo83UMPLSe5EK8bGnPILEbtb4vOqbUe8w7Y8RLQlhimB4oaCUgCbyYrUvQCzBflv_DdGWEoQrSmK5I/s1600/bt-feed.png) no-repeat center center #e9a01c}
</style>
<div class="metro-social">
<br />
<li><a class="facebookbt" href="http://www.facebook.com/henry.dwiseptian1"></a></li>
<li><a class="twitterbt" href="https://twitter.com/heennryy"></a></li>
<li><a class="googleplusbt" href="https://plus.google.com/u/0/114710454551954318308"></a></li>
<li><a class="pinterestbt" href="http://pinterest.com/Henryds1"></a></li>
<li><a class="linkedinbt" href="https://www.linkedin.com/username"></a></li>
<li><a class="youtubebt" href="http://www.youtube.com/username"></a></li>
<li><a class="rssbt" href="http://feeds.feedburner.com/henry"></a></li>
</div>
Perhatian :
Ganti henry.dwiseptian1 dengan nama pengguna Facebook Anda
Ganti heennryy dengan Twitter Nama
Ganti 114710454551954318308 Dengan Google ditambah profil ID
Ganti Henryds1 dengan ID Pinterest Anda
Ganti username dengan LinkedIn ID
Ganti username dengan ID Youtube Anda
Ganti henry dengan Feedburner ID
4.Klik Save dan lihat hasilnya, Semoga Bermanfaat...
0 komentar: