Thursday, June 27, 2013

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...

Related Posts

Metro UI Style Social Media Widget untuk Blogger
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

6 komentar

Tulis komentar
avatar
June 28, 2013 at 12:29 PM

kalo mau tambahin social media nya... misal foursquare, itu gimana?

Reply
avatar
August 28, 2013 at 1:35 PM

terima kasih bro infonya http://memolodys.blogspot.com/2013/08/cara-booting-shutdown-komputer-cepat.html

Reply
avatar
December 22, 2013 at 12:16 PM

Wach keren tutorialny!!!
Sungguh bermanfaat nichhhh

Reply
avatar
February 10, 2019 at 1:49 PM

Agen Togel Online Terbaik & Terlengkap!
Tersedia Pasaran Hongkong - Sydney - Singapore
Potongan Diskon 2D = 30% | 3D = 59% | 4D = 66%
Dapatkan Keuntungan Dalam Menebak Angka Hingga Ratusan Juta Setiap Hari..
Yuk Gabung Bersama Bolavita Di Website www. bolavita .fun
Untuk Info, Bisa Hubungi Customer Service Kami ( SIAP MELAYANI 24 JAM ) :
BBM: BOLAVITA
WA: +628122222995

Reply

=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]

• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]

• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]

• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]

• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
=======================================================