Bagaimana Cara Pasang Widget Metro-UI Windows 8 di Blogger

Widget Metro-UI Windows 8 untuk Blogger merupakan sebuah widget social bookmark yang menyerupai tampilan "Start Screen Windows 8" dan terdiri dari delapan jenis social media, diantaranya facebook, twitter, google plus, pinterest, linkedin, youtube dan feedburner. Widget ini disatukan kedalam satu wadah dimana setiap tampilan dari masing-masing social media mempunyai icon dan warna ciri khasnya masing-masing. Untuk demonya sendiri bisa anda lihat di bawah ini.

Cara Pemasangan Metro-UI Social Bookmark

Langkah #1 : Login ke akun blogger anda. Pada dashboard blogger, klik tab Tata Letak » Tambahkan Gadget. Pilih "HTML/Javascript".

Langkah #2 : Masukkan kode berikut kedalam kotak "HTML/Javascript" tersebut kedalamnya.

<div class="lscmetro-ui">
<li><a class="facebook" href="https://www.facebook.com/username_facebook_anda" rel='nofollow'></a></li>
<li><a class="twitter" href="http://twitter.com/username_twitter_anda" rel='nofollow'></a></li>
<li><a class="googleplus" href="https://plus.google.com/ID_profile_google_plus_anda" rel='nofollow'></a></li>
<li><a class="pinterest" href="http://pinterest.com/username_pinterest_anda" rel='nofollow'></a></li>
<li><a class="linkedin" href="https://www.linkedin.com/in/username_linkedin_anda" rel='nofollow'></a></li>
<li><a class="youtube" href="http://www.youtube.com/username_youtube_anda" rel='nofollow'></a></li>
<li><a class="feeds" href="http://feeds.feedburner.com/username_feedburner_anda" rel='nofollow'></a></li><br />
</div>
<style>
.lscmetro-ui {width:285px}
.lscmetro-ui li{position:relative;cursor:pointer;padding:0;list-style:none}
.lscmetro-ui .facebook,.twitter,.googleplus,.pinterest,.linkedin,.youtube,.feeds {z-index:7;float:left;margin:1px;position:relative;display:block}
.lscmetro-ui .facebook{background:url(//goo.gl/1VLKi) no-repeat center center #1f69b3;width:140px;height:141px}
.lscmetro-ui .twitter{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.lscmetro-ui .googleplus{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}
.lscmetro-ui .pinterest{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.lscmetro-ui .linkedin{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.lscmetro-ui .youtube{background:url(//goo.gl/BgvrL) no-repeat center center #e64a41;width:140px;height:69px}
.lscmetro-ui .feeds{background:url(//goo.gl/bNFeL) no-repeat center center #e9a01c;width:140px;height:69px}
.lscmetro-ui li:hover .facebook{background:url(//goo.gl/1VLKi) no-repeat center center #1f69b3}
.lscmetro-ui li:hover .twitter{background:url(//goo.gl/6ZSrd) no-repeat center center #43b3e5}
.lscmetro-ui li:hover .googleplus{background:url(//goo.gl/dmbR3) no-repeat center center #da4a38}
.lscmetro-ui li:hover .pinterest{background:url(//goo.gl/Tm7GE) no-repeat center center #d73532}
.lscmetro-ui li:hover .linkedin{background:url(//goo.gl/lftM8) no-repeat center center #0097bd}
.lscmetro-ui li:hover .youtube{background:url(//goo.gl/V7rZv) no-repeat center center #e64a41}
.lscmetro-ui li:hover .feeds{background:url(//goo.gl/bNFeL) no-repeat center center #e9a01c}
</style>

Note !

Ganti semua teks yang berwarna biru di atas dengan username dan ID profile dari masing-masing social bookmark.

Video : Cara Memasukkan Kode Kedalam Widget Blogger

Langkah #3 : Setelah anda memasukkan kode di atas kedalam kotak "HTML/Javascript", selanjutnya klik tombol simpan yang ada di sudut kanan bawah dari kotak tersebut dan lihat hasilnya.