"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/AVvXsEjzrFcL_nR8tOJpwaPLLxLeiamkDhb9u6v5PaO1CpGA6qiN8yTKrJ1KljTOVLC5P1ch9t7sYNH2a9ZSvV6hnuXq0c1l00IWC6EmQOYOIGlmlFynst0XZhDf7kcVTHn2kORqch3sG9kG7hI/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/AVvXsEgx0NHj5WS1VOCmfbX5tV6xBE-_G9C9QP3fZzcg9emLSc7d_RWZ5AkXhNMRAC9cfRa93v3UBivtOqaWEdgGokRhmGVx1P52mK2F2ypJXTAOS7_J3wNo6f8e0KhyicjuDMCg2GRgg44rjZ4/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/AVvXsEgf9SrShedFzwfhcjr1Jil0HyAuWC5ei9egp2ofw5A8ub_x8igK1tvhfXmPQG8KKweTiCeppIHBGoVWaZG3cp4d2eGuWpPOv5XUHIqJBXSPvqWLbUH_aDl2_ugotqJNGQvdYhszO5T-Wc8/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/AVvXsEh5hlOMoEbymHC1DZgEIB7p3e7mYpxD_5tXKvJiH-rBbWnLbPDDgRCdKMAigdgPd3DJjTfzkfrectDPVGMpXE55-SHavqlDtJtHDoygalYStHvPOPUdl8UMg9jXNnrEJ-37zkvRKQom4fg/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