Design, Tutorial and Tips Trik Blogger | Lostsector

Bagaimana Cara Pasang Widget Metro-UI Windows 8 di Blogger

Posted: 17 May 2013 12:42 AM PDT

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 bookmark, diantaranya facebook, twitter, google plus, pinterest, linkedin, youtube dan feedburner. Widget ini disatukan kedalam satu wadah dimana setiap tampilan dari masing-masing social bookmark 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.

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.