"Metro Style Social Icons" Untuk Blogger

Screenshot "Metro Style Social Icons" Untuk Blogger

Tutorial:

1. Login ke Dashboard blogger.

2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:

<center>
<ul id="abt-social-icons">
<li class="rss-icon"><a href="http://feeds.feedburner.com/FEEDID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6VvQlGojXWetvQqaClCLa67CiNEKIPOMhMamEGpDPDRrGTiX0BUV7_gkrq-WdL7eocfq3iEELgq2xUYvH5uyRy7wviZprosaUZmNXt4SftSYTqm5pUQngTwPR4qnZ8IkhfGiDSfw2kb8/s1600/rss.png" width="147" /></a></li>
<li class="twitter-icon"><a href="http://www.twitter.com/TWITTER_USERNAME" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI22OgqXtflsE-k0Wn0U9Ks_ESzfmgI2elJaisLUwZIo9oj-x3CFqjwoaorzLFkEAF9Ptn0UgbqVBhQx6OoZgn0A7Pb8IhYIHX-CfAM4zAIj4u-kzwWRUiFGXDwF-inT0Y2Lj4yzr8ggY/s1600/twitter.png" width="147" /></a></li>
<li class="facebook-icon"><a href="http://www.facebook.com/PAGEID@USERNAME" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFF355c6v2ZvR1ppTkpXJZ0RttX0HsaLbQA9OIv_oOKUJYpAKmBTZs0IInOg-6q9Hm6uMogOLWkWFOHr8wACjGvhKThUA3Mpf_LSCg34mGLWPsxNRbhQdatJJHTm-bHp3VhToRay7GtXk/s1600/facebook.png" width="147" /></a></li>
<li class="google-icon"><a href="https://plus.google.com/GOOGLE+ID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUmx_BpYZDCQnDldwvnxTsv3hVc6W9mSvmBwrcP95WjKlZ-kmp0XUOy9Czfw7MTVIDvx_fBGoNebKFF7ETF1V3_HHK-rLwABH3zbKND9CSBh3lLwCsYS3TTsDcSyK0Aaf1zD49BYFGr8/s1600/google.png" width="147" /></a></li>
</ul>
</center>
<style>
#abt-social-icons li {
 float: left;
 width: 147px;
 height: 147px;
 margin: 0 6px 6px 0;
 padding: 0 0 0 0;
 border-bottom: none;
        list-style: none;
}
#abt-social-icons li a {
 line-height: 1px;
 display: block;
}
#abt-social-icons li a:hover img {
 -webkit-opacity: 0.8;
 -moz-opacity: 0.8;
 opacity: 0.8;
}
#abt-social-icons li a span {
 display: none !important;
}
</style>

 Keterangan:

• FEEDID  -  Gantikan dengan ID Feedburner anda.
• TWITTER_USERNAME  -  Gantikan dengan Username Twitter anda.
• PAGEID@USERNAME -  Gantikan dengan PageID atau Username Facebook anda.
• GOOGLE+ID  -  Gantikan dengan ID Google+ anda.

6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4

7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya