Tutorial:
1. Login ke Dashboard blogger.
2. Klik butang " More Options " dan klik " Layout ".
3. Pada halaman Layout, klik " Add a Gadget " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.
4. Cari HTML/Javascript dan klik butang tambah.
5. Copy
(CTRL+C) kod javascript dibawah:
<style>
.sidebarRight{float:right;display:block;width:330px;background:#fff;margin:7px 0;padding:0 1% 7px 1%}
h2.box-title{width:100%;padding:10px 3px;margin-bottom:10px;border-bottom:1px solid #e5e5e5}
h2.box-title a{font-size:17px;line-height:1em;font-weight:700;color:#007197;margin-right: 12px}
#social-buttons{width:100%;overflow: hidden;margin:10px 0}
.a-social{float:left;width: 46%;margin: 1%;padding: 1%;
background: none repeat scroll 0 0 #EEEEEE;
-moz-box-shadow: 0 1px 0 #FDFDFD inset;
-webkit-box-shadow: 0 1px 0 #FDFDFD inset;
box-shadow: 0 1px 0 #FDFDFD inset}
.a-social.facebook, .a-social:hover.facebook .social-slide{background: #3873ad}
.a-social.google, .a-social:hover.google .social-slide{background: #f73c28}
.a-social.twitter, .a-social:hover.twitter .social-slide{background: #62c6f8}
.a-social.rss, .a-social:hover.rss .social-slide {background: #f18421}
.a-social i {
display: block;
font-size: 20px;
font-family: FontAwesome;
color: #FFFFFF;
font-style: normal;
width: 40px;
height: 40px;
line-height: 40px;
margin: 15px auto 2px;
text-align: center;
border: 2px solid #fff;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%}
.social-container{
position: relative;
color: #FFFFFF;
font-size: 15px;
font-weight: 600;
height: 45px;
line-height: 45px;
overflow: hidden;
text-align: center;
width: 100%}
.social-slide, .a-social i {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out}
.social-slide{height: 45px;position: absolute;top: -35px;width: 100%}
.icon-facebook:before{content:"\f09a"}
.icon-twitter:before{content:"\f099"}
.icon-google-plus:before{content:"\f0d5"}
.icon-rss:before{content:"\f09e"}
.social-slide:after{
position: absolute;
display: block;
width: 100%;
height: 10px;
border-left: 2px solid #EEEEEE;
bottom: 0;
content: ""}
.a-social:hover .social-slide{top: 0}
.facebook_c{position: relative;top:5px;}
.twitter_c {position: relative;top:5px}
.google_c{position: relative;top:5px}
.rss_c{position:relative;top:-10px}
.rss .IN-widget, .button1 iframe {position: relative;top: -5px}
.twitter iframe{width: 134px !important}
.google #___plusone_0{width: 60px !important}
.a-social.rss{margin-right: 0}
</style>
<div class='sidebarRight'>
<h2 class='box-title'><a>FOLLOW US</a></h2>
<div id="social-buttons">
<div class="facebook a-social">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="social-slide">
<div class="facebook_c">
<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/faiz.tutorial&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe>
</div>
</div>
Facebook
</div>
</div>
<div class="twitter a-social">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="social-slide">
<div class="twitter_c">
<a href="https://twitter.com/faizal_ahmad91" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></a>
<script>
! function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if(!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');
</script>
</div>
</div>
Twitter
</div>
</div>
<div class="google a-social">
<i class="icon-google-plus"></i>
<div class="social-container tw">
<div class="social-slide">
<div class='google_c'>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/102149587857352560756" data-rel="publisher"></div>
</div>
</div>
Google+
</div>
</div>
<div class="rss a-social">
<i class="icon-rss"></i>
<div class="social-container tw">
<div class="social-slide">
<div class="rss_c">
<p><a href="http://feeds.feedburner.com/Faiz-tutorial"><img src="http://feeds.feedburner.com/~fc/Faiz-tutorial?bg=99CCFF&fg=444444&anim=1" height="26" width="88" style="border:0" alt="" /></a></p>
</div>
</div>
Rss Feed
</div>
</div>
</div>
<div class='clear'></div>
</div>
KETERANGAN:
- + https://www.facebook.com/faiz.tutorial - Gantikan dengan link/url fan pages Facebook anda.
- + https://twitter.com/faizal_ahmad91 - Gantikan dengan link/url Twitter anda.
- + https://plus.google.com/102149587857352560756 - Gantikan dengan link/url Google+ anda.
- + http://feeds.feedburner.com/Faiz-tutorial - Gantikan dengan link/url Feedburner anda.
- + Faiz-tutorial - Gantikan dengan link/url ID Feedburner anda.
- + [PERHATIAN] Sekiranya button counter Feedburner tidak terpapar dengan betul, sila login ke akaun Feedburner anda [KLIK SINI] ---> Klik Nama blog anda (Jika tiada, daftarkan blog anda pada feedburner terlebih dahulu) ---> Klik tab Publicize ---> Klik FeedCount ---> Klik Activate (Sekiranya belum diaktifkan) ---> Copy kod HTML yang diberi ---> Gantikan dengan kod diatas yang di 'highlight dengan warna OREN.
6. Paste (
CTRL+V) pada ruang Content.
7. Seterusnya klik "
Save " dan lihat la hasilnya