Metro UI Style Social Media Widget untuk Blogger

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:

Oke langsung aja nih caranya:
 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/AVvXsEgj6ytC57hLPEu_HOE9B80v4A-H61OgaHVxzH8E8njDUkPHC4P87BkGhp5-WdZQBEoKRCKf8tbhfNVssbW0cTHMFvbDVchvMuikPj3dqwy6jju1Z23gD8_YVZYKYmWWuFVtjrDuTtgqYoU/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/AVvXsEgrS8vyhZZBXqbWudwZFc-6Oy3Z8yyV0Md7817IoJozHY-pA60mSwH22xNkclPgnO5QCpBry6NhNTxcxpyOcSUz50fn6igHgGvmkNtADroAecFpBHbkS34iT26IDRSL23FgsFw7mm-4QqA/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/AVvXsEgxCoFFZ_tNfr2NpBQ0IWL7mUNN7mbm8unD0Up2T66MRc77HnKTCxECPAY-fwciSbl7SGEfQCVClPT30Maf_ves3jCPRqTPPtmMR2GYCt0VrHNUP0eGJZbgNb5K6l6PAWb4ZAP95kyQb7A/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/AVvXsEiUR4XiiezatpSVASF8sYDRd_fJ5nRNfoHxzVDpWEqiz_iH-XCebqfsA6bpjfnurj1Sb3Vl1FOgViHjOpudYhHr_CBe7ukfUhRUQEOMhyphenhyphenP5hHDok7yMubYxajcK5AxDRMW3hJg9XtTdHXA/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/AVvXsEiVq2v57Byg2WiIyg3pyWD6uWwwwLdZZhHlhAE8rRYtSO_QK_4WTeluYPzSA7Y9uMVVDriTzmOAWBNxXu4kRuHnla_wM_9HICwClUiBkxW4DuWqxUnjmbCGjJHNri-_N0-bdE-19nOu-2A/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/AVvXsEioQiMLkycV9RXjZLCMrvNlN6x-lWQO8b-l6KlGW_iht-8R1ocflLgyXBbQrQgfuzQcKXMNE2mT_Mp1cpfbp8F7lmsFogJT_Iis9Swpoy486FXGwEKF6HmX2UuibgNAF_jdyv27QMCBohA/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/AVvXsEjacqV0-Smhi5EB55CG1GJ-eQhXzkC6LCeNac_tCeoCVUGfELF_BgEuejgLFSNVIV9hl3y5jOreYdaNbHBTWneclbtweqpN3BuZzauVpIwZUa4VewkdE9MX6QzRdyycWBEpgINAAyzH8EY/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/AVvXsEh0IcQ_Qbjyr75Vy_rHht_DUdKY8J3Qj4D_yOfOL8u9aTzX0MbRQKR9xCkon7uecY4xsqcyghX4eo0cN1a3L0cwjzkJV8lXhyphenhyphensG_Ayqwfug_FEbf5yMY3zrUWYtPWpL9rSJb1OWD-i_dog/s1600/bt-facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN0hPytx1jkPzzj70-KdZAV6_OW2GRY430p8mnkXyQTsjoNssbp4kl9sZF662LYWZAWBRPe3xykQ7mX6pjP57By0_TwoKpk7uRUzGWyBz2obDVotJHCD4yu6bFxJIgRkUmapm4lqYFT6E/s1600/bt-twitter.png) no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPc8xi20kmkTXb9GnWbj8QdD-OW7LxAgEpgZ4FVi7f0puOtpn8p5B-VJImZ0PwdLWrX56dAEJLhGwygAiWE-qcBmeRNmlmFMw5f7bx3KZ9Z9FRdz0AeWd_KgyPJbfRVFgOlyeTzGOkhSs/s1600/bt-google+plus.png) no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5cdzViaQ9IwfXatlfhUSvPYFslXmVJXjxqsih6iBnNGpLvb7p4DnsFcWWd7wobKUTGjtd5pTHH6PxCZXMdBFugMQzsEzKrT40zM4XN3M4-85U7RfcxMxevGgaFcJh9MaEDclHRdrZAKg/s1600/bt-pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZTmhMOtM1UOTSiz4dqcYNyvCESjI_ZCymVtar1qekTeQV-5aAjKprB2-4GlT0ESP_0Urks17iOBnoSMe-tcFOh4MtTV4qYTb7b240O-PsxsZwJOcyPQG-LQ3xnHdMRES-ioNi-KjXC_o/s1600/bt-linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSew1rv7d6OLWpbvhLmesCaRVvW7RK7HDSONOodhroH4cj2gFd9e9oYRHJlEhs4GI6nPZoxw2RkEP60jVa3Y0AKa5XZ_K0MTEvv7eN3C-5j3RrV_s4km2hGGSwQAJNHZ39pC6Xp_hXXZ4/s1600/bt-youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGXGIeMjuK1g8Gwk3fUSwq_ALfqjppZt8YMpdsNmlGxjy4YE6Y-lWQQXJrhvoQwIfnzxgJ_E94DGsdsrVZ_Lp2CYyvytKXWLWSiH-nPd2By4yG9X1ydJTu-o4dvn3VH5DThthuMUEICzQ/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...

Tweet

Related Posts

Metro UI Style Social Media Widget untuk Blogger

4/ 5

Oleh akuntest123

Pada 5:09 PM 6 Komentar