Cara pasang Sidebar Social Widget di Blogspot

Sidebar Social Widget ini adalah widget yang di bina untuk blog wordpress oleh Ariffshah. Widget ini menggabungkan Facebook page, Twitter, Google plus dan juga Rss yang di muatkan dalam satu widget.

Ianya hanya menggabungkan beberapa kod javascript, HTML dan juga css. Untuk pengguna wordpress yang berminat memasang widget sidebar social ini di blog anda, sila ke tutorial asasnya di http://wp.tutsplus.com/

Bagi pengguna Blogger pula, saya telah berjaya memasukkan widget sidebar social seperti contoh yang boleh anda lihat di sidebar blog saya. Sedikit pengubahsuaian pada kod untuk Facebook page dan juga css untuk warna background.

Bagi pengguna Blogger yang ingin mencuba widget Social sidebar ini di blog anda, bolehlah ikut beberapa langkah-langkah yang mudah di bawah.


Langkah 1

Dapatkan ID untuk Facebook page, Twitter dan juga RSS feed anda.

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/AVvXsEgmR6gKgWt1irXB0yyuYGIWJMoT5rHWd1e63tlFpfUuEVnCPTp3wiMl7fb720rCOIcB9NRvGw75KiyyX_RDW2l4EUP-KezJ49c0LazfrIENVeZgXo4mnMmqSzHXIwsKUDc28fXbOXJ7-a6S/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/AVvXsEgmR6gKgWt1irXB0yyuYGIWJMoT5rHWd1e63tlFpfUuEVnCPTp3wiMl7fb720rCOIcB9NRvGw75KiyyX_RDW2l4EUP-KezJ49c0LazfrIENVeZgXo4mnMmqSzHXIwsKUDc28fXbOXJ7-a6S/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/AVvXsEgmR6gKgWt1irXB0yyuYGIWJMoT5rHWd1e63tlFpfUuEVnCPTp3wiMl7fb720rCOIcB9NRvGw75KiyyX_RDW2l4EUP-KezJ49c0LazfrIENVeZgXo4mnMmqSzHXIwsKUDc28fXbOXJ7-a6S/s320/gradient.png) repeat-x 0 -100px!important;
}
.sidesub{
line-height:1px;
background:#FFB86D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmR6gKgWt1irXB0yyuYGIWJMoT5rHWd1e63tlFpfUuEVnCPTp3wiMl7fb720rCOIcB9NRvGw75KiyyX_RDW2l4EUP-KezJ49c0LazfrIENVeZgXo4mnMmqSzHXIwsKUDc28fXbOXJ7-a6S/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>

Langkah 3

Log in blog > Dashboard > layout > Add A gadget > HTML / Javascript

Salin kod yang telah siap di edit pada langkah 2 dan paste pada content HTML/javascript. Seterusnya klik Save.

p/s: Jika kotak Facebook terlalu besar atau kecil, anda boleh mengubahnya dengan mengedit nilai yang di bold dengan warna merah