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(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/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(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/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(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -100px!important;
}
.sidesub{
line-height:1px;
background:#FFB86D url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/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
Cara pasang Sidebar Social Widget di Blogspot

mekasih...ilmu yg sangat berguna...
mashi dh apply di blog... ^_^

salam..
memang menarik..
saya cuba masukkan ke blog
saya kalau masih ada ruang..

saya xde Fan Page, so takleh laa nak pasang...

pasanglah Fan Page?
saya tak berani terima kenyataan orang tak suka blog saya... :D

menarik tu.. compact semua ada..
nanti nak coba lah.. ni dah tgh malam..

Anonymous
delete

testing anonymous comment

Terima kasih satu perkongsian yang menarik boleh try nie :)

sudah buat di blog www.kakyong.com

tgh godek2 kod nak tukor background warna..

men ubah2 box tu best :)

nk ubah id facebook,tp x tahu..maribinablog/197414523674776
yg no tu password facebook ke?

alhamdulillah menjadi :) :) :) :) :)

Makasih tutornya, Alhamdulillah berhasil :)