cara pasang sidebar social widget di blog

Tweet

Wah,,,, kali ini bertrmu saya,,,
Diantara orang main blog,,, pasti g pernah ketinggalan like this yo,,
Ho Ho
Lansung aja ea gan,,,

Pertama :
Cari lah kode facebook page,, twitter,, dan css
Ini adalah contoh :
Facebook page:  http://www.facebook.com/pages/MariBinaBlog/197414523674776
Twitter:  https://twitter.com/Nescafeaisblog
Feedburner:  http://feeds.feedburner.com/maribinablog1 

Langkah 2

Salin dan edit kod di bold dengan menggantikan dengan ID Facebook page, Twitter dan Feedburner dan juga nama blog anda.

<style>
#sidesocial{
border:0 solid #;
}
.sideg{
background:#00FFBF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIUiNUyX2pI_1oi5Sor2MUNgEfSTOEwF857aIEGwnPlxaW-vuUocEENv1QmXXhJqS7AvmAJSlLDWmdykQOJXoapsKSGbR8NKtRkW6Q_jo1Ut7TCOZ-pnXu_tAoja2JFP5tCVJ2_6_JjxCm/s320/gradient.png) repeat-x 0 -100px!important;
font-size:0.85em;
color:#000;
line-height:1px;
border-top:1px solid #FFF;
border-bottom:1px solid #EBEBEB;
padding:5px 11px
}
.sideg span{
vertical-align:text-top;
color:#333;
margin:2px;
}
.sidetw{
background:#0DF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIUiNUyX2pI_1oi5Sor2MUNgEfSTOEwF857aIEGwnPlxaW-vuUocEENv1QmXXhJqS7AvmAJSlLDWmdykQOJXoapsKSGbR8NKtRkW6Q_jo1Ut7TCOZ-pnXu_tAoja2JFP5tCVJ2_6_JjxCm/s320/gradient.png) repeat-x 0 -100px!important;
line-height:1px;
border-top:1px solid #FFF;
border-bottom:1px solid #EBEBEB;
padding:4px 11px;
}
.sidefb{
background:#82CDFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIUiNUyX2pI_1oi5Sor2MUNgEfSTOEwF857aIEGwnPlxaW-vuUocEENv1QmXXhJqS7AvmAJSlLDWmdykQOJXoapsKSGbR8NKtRkW6Q_jo1Ut7TCOZ-pnXu_tAoja2JFP5tCVJ2_6_JjxCm/s320/gradient.png) repeat-x 0 -100px!important;
}
.sidesub{
line-height:1px;
background:#FFB86D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIUiNUyX2pI_1oi5Sor2MUNgEfSTOEwF857aIEGwnPlxaW-vuUocEENv1QmXXhJqS7AvmAJSlLDWmdykQOJXoapsKSGbR8NKtRkW6Q_jo1Ut7TCOZ-pnXu_tAoja2JFP5tCVJ2_6_JjxCm/s320/gradient.png) repeat-x 0 -100px!important;
border-top:1px solid #FFF;
padding:3px 10px;
}
.sidesub span{
width:115px;
}
</style>
<div id="sidesocial">
<div class="sidefb">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMariBinaBlog%2F197414523674776&amp;width=300&amp;height=183&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%2382CDFC&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:183px;" allowtransparency="true"></iframe>
</div>

<div class="sideg">
<div class="g-plusone" data-size="medium" data-href="http://maribinablog.blogspot.com"></div><span>Recommend on Google</span>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</div>

<div class="sidetw">
<a href="https://twitter.com/nescafeaisblog" class="twitter-follow-button">Follow @YOU</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>

<div class="sidesub"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=maribinablog1', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="submit" value="Subscribe" /><span><input type="text" style="width: 165px;
padding: 0px 0px 0px 0px;
vertical-align: middle;
font-size: 0.85em;
margin-top: -1px;
margin-left: 15px;" name="Masukkan email" value="        Masukkan Email"       onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="hidden" value="maribinablog1" name="uri"/><input type="hidden" name="loc" value="en_US"/></span></form>
</div>
</div>

Lalu ganti lah kode yang bewarna biru tersebut dengan kode id facebook page gan tadi,,
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMariBinaBlog%2F197414523674776&amp;width=300&amp;height=183&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%2382CDFC&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:183px;" allowtransparency="true"></iframe>
</div>

 Ganti semuanya kode yang diatas ini dengan kode gan,,,,
Begitu seterusnya,,,
Terimakasih

Sumber :  http://maribinablog.blogspot.com