25 Okt 2012

Pasang Sidebar Social Widget


1. Dapat ID untuk Facebook Page, Twitter, dan juga Rss feed anda.

contoh:
Facebook page:  http://www.facebook.com/pages/PanduanBerblog/157412223674771
Twitter:  https://twitter.com/PanduanBerblog
Feedburner:  http://feeds.feedburner.com/panduanberblog1

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/AVvXsEiWb72-JPPP8PLlmnNxNTh6sWugMMLcLtALl234lqIioP4JBixSISp4z0x9VUoeNZGOgXev35tTX0PbL4Rrt1DU1iJoRDDtaNSmFwJJCyZBNM6f6FUM1OSPfpPJGaoN37PLp6fEV0Isy8wh/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/AVvXsEiWb72-JPPP8PLlmnNxNTh6sWugMMLcLtALl234lqIioP4JBixSISp4z0x9VUoeNZGOgXev35tTX0PbL4Rrt1DU1iJoRDDtaNSmFwJJCyZBNM6f6FUM1OSPfpPJGaoN37PLp6fEV0Isy8wh/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/AVvXsEiWb72-JPPP8PLlmnNxNTh6sWugMMLcLtALl234lqIioP4JBixSISp4z0x9VUoeNZGOgXev35tTX0PbL4Rrt1DU1iJoRDDtaNSmFwJJCyZBNM6f6FUM1OSPfpPJGaoN37PLp6fEV0Isy8wh/s320/gradient.png) repeat-x 0 -100px!important;
}
.sidesub{
line-height:1px;
background:#FFB86D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWb72-JPPP8PLlmnNxNTh6sWugMMLcLtALl234lqIioP4JBixSISp4z0x9VUoeNZGOgXev35tTX0PbL4Rrt1DU1iJoRDDtaNSmFwJJCyZBNM6f6FUM1OSPfpPJGaoN37PLp6fEV0Isy8wh/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%2FPanduanBerblog%2F157412223674771&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://panduanberblog.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/PanduanBerblog" 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=panduanberblog1', '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="panduanberblog1" name="uri"/><input type="hidden" name="loc" value="en_US"/></span></form>
</div>
</div>

3. Log In Blog > Dashboard > Layout > Add A Gadget > HTML / Javascript

4.Salin kod yang siap di edit pada langkah 2 dan paste pada content HTML / Javascript

5.SAVE.

p/s
Anda boleh ubah dan edit nilai angka jika  kotak facebook terlalu besar atau kecil.
Kod  panduanberblog  di tukar dengan url blog anda.

0 ulasan:

Catat Ulasan