How to Display Total Published Posts Counts in Blogger

Happy New Year buddies! You may be occupied with showing the total number of posts you have distributed on your online diary? You may need to tell your followers that what amount of worth perusing articles or posts your site has created for them? As of late, one of our supporters tweet us getting some information about an approach to show the total number of posts distributed on his site. Then again, Blogger don't permit you to show the Total Published Post Count of course, yet joyfully we have created a plugin that precisely shows the aggregate distributed post check in blogger. Today in this article, we will demonstrate to you best practices to show aggregate distributed posts numbers in Blogger.
You can see the demo here to know what we are trying to accomplish for.

 Displaying  Total Published Posts Counts in Blogger

Step 1.  Go to Blogger Dashboard  >> Lay-out.
Step 2.  Add a  Gadget >> Click HTML/Javascript.
Step 3. Paste the code below inside the blank space.

<script style="text/javascript">

// Total Published Posts Counts for Blogger

// =============================

// Author: BTAT

//Version:2.0

function numposts(json) {

document.write('<div id="totalposts">');

document.write('<div id="titlep">Codes2tipsandtricks was launched on<br/> February 25, 2013.</div>');

document.write('<div id="descriptionp">A Demo blog for Bloggingtipsandtrix<br/> My Mother Blog!</div>');

var _0x13e7=["\x57\x65\x20\x68\x61\x76\x65\x20\x61\x20\x74\x6F\x74\x61\x6C\x20\x6F\x66\x3C\x62\x72\x2F\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x63\x6F\x75\x6E\x74\x70\x22\x3E\x20","\x24\x74","\x6F\x70\x65\x6E\x53\x65\x61\x72\x63\x68\x24\x74\x6F\x74\x61\x6C\x52\x65\x73\x75\x6C\x74\x73","\x66\x65\x65\x64","\x20\x50\x6F\x73\x74\x73\x20\x3C\x2F\x64\x69\x76\x3E\x20\x3C\x62\x72\x2F\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x70\x6F\x73\x74\x63\x6F\x70\x79\x22\x3E\x41\x20\x57\x69\x64\x67\x65\x74\x20\x62\x79\x3A\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x6D\x79\x62\x6C\x6F\x67\x67\x65\x72\x6C\x61\x62\x2E\x63\x6F\x6D\x22\x3E\x4D\x79\x42\x6C\x6F\x67\x67\x65\x72\x4C\x61\x62\x2E\x63\x6F\x6D\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x64\x69\x76\x3E","\x77\x72\x69\x74\x65"];document[_0x13e7[5]](_0x13e7[0]+json[_0x13e7[3]][_0x13e7[2]][_0x13e7[1]]+_0x13e7[4]);

}

</script><script src="/feeds/posts/default?alt=json-in-script&callback=numposts"></script>

Step 4.  Click the save button and go back to Blogger Dashboard.
Step 5. From the Blogger Dashboard click Template  and hit the HTML button Click anywhere in the HTML template editor and press (CTRL+F), this will enable a search box. Now search for the tag below.

]]></b:skin>

Step 6.  And just above it paste the following CSS style sheet coding.

}
div#totalposts {
  font-size: 14px;
  text-align: center;
  float: left;
  border: 1px solid #d2d2d2;
  padding: 20px;
  background: #ddd;
  width:226px;
}

div#titlep {
    float: left;
    width: 100%;
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: 15px;
    margin-bottom: 14px;
}

div#countp {
    font-size: 40px;
    font-weight: bold;
    color: #168eca;
    float: left;
    width: 100%;
    line-height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

div#descriptionp {
  float: left;
  width: 100%;
  border-bottom: 1px solid #d2d2d2;
  margin-bottom: 15px;
  padding-bottom: 15px;
}

div#postcopy {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 5px;
}
div#postcopy {
display:none;}

Short Customization:

You can replace the hexadecimal color  ddd to change the background color of the widget.
Change 168eca to change the color of  your number in the  total number of posts.

Step 7. Save your work and finish.
Have a Nice Day.

How to Add Fireworks Effects to Blogger

Hello buddies, hope you are  all right there. Christmas season is here already and New Year is quiet approaching. Before this season will end, let me share you a widget related to this very special season by decorating your blog with a fireworks effects. This widget is from mf2fm. Hope you will like this.

This script has been tested on and shown to work with the following browsers:
Internet Explorer version 7 and above
Google Chrome version 4 and above
Mozilla Firefox version 2 and above
Apple Safari version 5 and above
Opera version 9 and above (including Opera mobile)
Android Browser version 3

AddingFireworks Effects to Blogger

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML
Step 2. Look for the code below

<head>

Step 3. Just below that code, paste the code below

<script type="text/javascript">
// <![CDATA[
var bits=80; // how many bits
var speed=33; // how fast - smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c");
//                     blue    red     green   purple  cyan    orange  pink

/****************************
*      Fireworks Effect     *
 *Bloggingtipsandtrix.blogspot.com*
****************************/
var bangheight=new Array();
var intensity=new Array();
var colour=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var swide=800;
var shigh=600;
var boddie;

if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addRVLoadEvent(light_blue_touchpaper);

function light_blue_touchpaper() { if (document.getElementById) {
  var i;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.overflow="visible";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.backgroundColor="transparent";
  document.body.appendChild(boddie);
  set_width();
  for (i=0; i<bangs; i++) {
    write_fire(i);
    launch(i);
    setInterval('stepthrough('+i+')', speed);
  }
}}

function write_fire(N) {
  var i, rlef, rdow;
  stars[N+'r']=createDiv('|', 12);
  boddie.appendChild(stars[N+'r']);
  for (i=bits*N; i<bits+bits*N; i++) {
    stars[i]=createDiv('*', 13);
    boddie.appendChild(stars[i]);
  }
}

function createDiv(char, size) {
  var div=document.createElement("div");
  div.style.font=size+"px monospace";
  div.style.position="absolute";
  div.style.backgroundColor="transparent";
  div.appendChild(document.createTextNode(char));
  return (div);
}

function launch(N) {
  colour[N]=Math.floor(Math.random()*colours.length);
  Xpos[N+"r"]=swide*0.5;
  Ypos[N+"r"]=shigh-5;
  bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);
  dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];
  if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/";
  else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="\\";
  else stars[N+"r"].firstChild.nodeValue="|";
  stars[N+"r"].style.color=colours[colour[N]];
}

function bang(N) {
  var i, Z, A=0;
  for (i=bits*N; i<bits+bits*N; i++) {
    Z=stars[i].style;
    Z.left=Xpos[i]+"px";
    Z.top=Ypos[i]+"px";
    if (decay[i]) decay[i]--;
    else A++;
    if (decay[i]==15) Z.fontSize="7px";
    else if (decay[i]==7) Z.fontSize="2px";
    else if (decay[i]==1) Z.visibility="hidden";
if (decay[i]>1 && Math.random()<.1) {
  Z.visibility="hidden";
  setTimeout('stars['+i+'].style.visibility="visible"', speed-1);
}
    Xpos[i]+=dX[i];
    Ypos[i]+=(dY[i]+=1.25/intensity[N]);

  }
  if (A!=bits) setTimeout("bang("+N+")", speed);
}

function stepthrough(N) {
  var i, M, Z;
  var oldx=Xpos[N+"r"];
  var oldy=Ypos[N+"r"];
  Xpos[N+"r"]+=dX[N+"r"];
  Ypos[N+"r"]-=4;
  if (Ypos[N+"r"]<bangheight[N]) {
    M=Math.floor(Math.random()*3*colours.length);
    intensity[N]=5+Math.random()*4;
    for (i=N*bits; i<bits+bits*N; i++) {
      Xpos[i]=Xpos[N+"r"];
      Ypos[i]=Ypos[N+"r"];
      dY[i]=(Math.random()-0.5)*intensity[N];
      dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
      decay[i]=16+Math.floor(Math.random()*16);
      Z=stars[i];
      if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];
      else if (M<2*colours.length) Z.style.color=colours[colour[N]];
      else Z.style.color=colours[i%colours.length];
      Z.style.fontSize="13px";
      Z.style.visibility="visible";
    }
    bang(N);
    launch(N);
  }
  stars[N+"r"].style.left=oldx+"px";
  stars[N+"r"].style.top=oldy+"px";
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}
// ]]>
</script>

Step 4. Save your template and you're done.

Short Customization:

Just change the color in bold above to change the colors of fireworks above.

If you have encontered any problem related to this fireworks effects widget to Blogger, just leave a comment or message  below. I will help you.
Merry Christmas and Happy a New Year!

How to Add a Floating Contact Us Widget in Blogger

One of my posts officially demonstrated to you a way on industry standards to include a contact us gadget in blogger. Nonetheless, you may have recognized that occasionally clients think that it hard to place your contact us page join on the grounds that it is placed some place where it counts into your footer. Suppose it is possible that you are running an ecommerce website on blogger and your client needs to send a brisk inquiry email to the backing to discover some longing data. Since, your contact us page is placed where it counts the footer he may not send any email and would move to an alternate better site taking ceaselessly all the conceivable outcomes of making another deal. A straightforward answer for this issue is to have a gliding contact us gadget. Today in this article, we will demonstrate to you proper methodologies to include a floating contact us gadget in blogger.Thanks for my friend in bloggerlab for sharing this very nice post. Have a look  here for a demo

Adding a Floating Contact Us Widget in Blogger

Step 1.  Go to Blogger Dashboard  >> Template
Step 2.  Click Edit  HTML button
Step 3.  Click anywhere in the HTML template editor and press (CTRL+F), this will enable a search box. Now search for the tag below

]]></b:skin>

Step 4.  And just above it paste the following CSS style sheet coding.

#btat-contact .ContactForm {
    margin: 0px!important;
}
#btat-contact .contact-form-button-submit {
    max-width: none;
    width: 100%;
    height: 35px;
    border: 0;
    background-image: none;
    background-color: #168eca;
    cursor: pointer;
    font: normal normal 13px Oswald;
    font-style: normal;
    font-weight: 400;
}
.#btat-contact .contact-form-button-submit:hover {
    background-color: #158aee;
    background-image: none;
    border: 0;
}
#btat-contact #contact {
    position: fixed;
    bottom: 0;
    right: 1%;
    background-color: #EEE;
    color: #555;
    width: 300px;
    z-index: 1.0E+15;
}
#btat-contact #contact .contact-form-widget {
    padding: 30px;
    display: none;
}
#btat-contact #contact {
    position: fixed;
    bottom: 0;
    right: 1%;
    background-color: #EEE;
    color: #555;
    width: 300px;
    z-index: 1.0E+15;
}
#btat-contact #contact h2.title {
    margin: 0px;
    font-weight: 400;
    background-color: #168eca;
    color: #FFF;
    padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: 3px;
    text-align: center;
}
#btat-contact #contact h2.title .fa {
    position: absolute;
    left: 10px;
    top: 12px;
}
#btat-contact #contact .contact-form-widget {
    width: 240px;
    padding: 30px;
    display: none;
}
#btat-contact #contact * {
    transition: all 0 ease;
    -webkit-transition: all 0 ease;
    -moz-transition: all 0 ease;
    -o-transition: all 0 ease;
}
#btat-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message {
    background-color: #DDD;
    color: #111;
    border: 0;
    padding: 10px 5px;
    font: normal normal 13px Open Sans;
}
#l-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
    max-width: none;
    margin-bottom: 15px;
}

Step 5. Look for the </body> tag and just above it, paste the code below

<div id="btat-contact">
<b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'>
    <b:widget id='ContactForm2' locked='true' title='Contact us' type='ContactForm'>
      <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><i class='fa fa-paper-plane'/> <data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
</b:includable>
    </b:widget>
  </b:section>
</div>
<script type='text/javascript'>
 //<![CDATA[
$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle(1000);});
   //]]>
</script>

Short Customization:

Simply change the hexadecimal color 168eca to change the background color of your "send button"

Step 6. Save your template and your done.
Enjoy Blogging Buddies!

Turn On and Turn Off The Lights with jQuery Plugin

Hello brothers! Its been a quiet short time here that I was not able to post an article because of some important matters to settle but for now I will share you a widget that could make you happy. This is from Janko and made it bloggerize by helplogger. You can use this widget especially if you are showing a video to your visitor. I will make this tutorial more straight to make it more comprehensive to all of us.

Live Demo: Turn On and Turn Off The Lights with jQuery Plugin

Turn On and Turn Off The Lights with jQuery Plugin

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML
Step 2. Look for the Code below

</head>

Step 3. Just above the code in step 2, paste the code below

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#lightsoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#lightsoff").toggle();
if ($("#lightsoff").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>

Note: Exclude the red highlighted color if you had already added a jQuery library in your Blogger template.
Step 4.  Look for the code below

]]></b:skin>

Step 5. Just above the code in step 4, paste the following code below

/* Turn off the lights
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiivoLY-J2hs6KmBuMTo_01_SxCCo0ei3SbB6VMlUx35PGTjYEhFZ_4KRLceYwfQYSQgz_hM0ozSzH8GsxppnLeJ63cUxrotfgbdR4OCoLwIoDblEXq_sb2vyiETyVThMDdn_adJvWccbTr/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGrdkzmpol47xSSP4zyVHT4XKqL3CSBLyjf76Dxk2nIVu4nX09PxyCdW2MK1LXuYKA2tMdUp2yIqztqjzkRg0SmdrL9WU5WgqWWNoLmJhefK7b9jEFubMHOseaOgQpu04Re6TlHLdULrRx/s1600/lights-off.png);
}
#lightsoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Step 6. Look for the code below

</body>

Step 7. Just above it, paste the code below

<div id='lightsoff'/>

Step 8. Save your Template
Step 9. Whenever you want to integrate this widget to your post, just copy the code below and paste it in your Blogger Post Editor page in HTML mode.

<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
<div id="lightsVideo">
...Here goes the code of the video...
</div>
</center>

How To Add Widget Inside Post Body

Recently I have  a tutorial on how to add adsense code (or any widget) just above post body area in order to increase the click through rate of your adsense ad. Now in this post, I will teach you how to add any widget, it may an ad or any code(recent  comment widget, facebook like box,popular posts widget and the like) that you want to put just beside your written article or  post body section of your blog/site. Have a look at the image below.

1. Adding Widget Beside Post Body Individually

Step 1. Go to Blogger >>New Post or (select another post)

Step 2. Copy the code below and paste it  above  your written post/article (it should be in the top most corner) .

<div class="widget-beside-post" style="clear: left; display: inline-block; float: left; height: 400px; margin: 12px 20px -50px 0px; width: 234px;">
Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....
</div>

Example:

<div class="widget-beside-post" style="clear: left; display: inline-block; float: left; height: 400px; margin: 12px 20px -50px 0px; width: 234px;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=  https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl&amp;width=234&amp;height=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;" style="background: #fafafa; border: 0 solid #ddd; height: 337px; overflow: hidden; width: 234px;"></iframe>
</div>

In the above example, I used my facebook like box widget to appear beside my written article.

Step 3. Save/Publish/Update  your work.

2. Adding Widget/Ad To All Your Written Articles/Posts Automatically

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML ( have a back-up of your template) 

Step 2. Find the code below, choose the third occurrence of the code

<data:post.body/>

Step 3. Just above the code in step 2, paste the code below

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class="widget-beside-post" style="clear: left; display: inline-block; float: left; height: 400px; margin: 12px 20px -50px 0px; width: 234px;">
Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....
</div></b:if></b:if>

Step 4. Save your Template and your  done!

Simple customization:

• Change left to right if you want to position the widget in the right side of your post.


• Adjust the width  "234px" and the height" 400px" of your widget depending on your likeness.


• Change the numerical value of the margin by following the standard  sequence which is top "12px", right  20px",bottom " -50px", and left " 0px".

Easy and Simple! isn't it?
If you have problems encountered in following this tutorial, you can leave your comment below. Your thoughts are highly valued here in BTAT.
Always Say A Prayer!

Adding adsense, search box or any gadget beside header

Make puzzled on how to put  adsense code, search box, banner or any gadget beside your  header image? You are not wrong in landing this page because I will  tell you  the steps on how to make it. Having a gadget beside your header adds professionality to your blog and have a big impact on your blog traffic as well.
So, let us now jump to the tutorial.

Adding Adsense, Search Box or any Gadget Beside Header

Step 1. Go to Blogger Dashboard
Step 2. Click Template
Step 3. Hit the Edit HTML button
Step 4. Look for the code below

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR OWN HEADER TITLE/IMAGE' type='Header'/>
</b:section>

Step 5. Add the following code below right after the code above

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

So, your final code will be:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR OWN HEADER TITLE/IMAGE' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Now you are halfway done in  putting another section beside your blog title section.
Step 6. We will add css to your existing header  and to the new section that you had just add recently. Copy the code below and paste it above ]]></b:skin>

#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

Step 7. Save your Template.

Installing the Widget

It is now time to add the widget beside your header (it may be in form of banner, adsense code or any gadgets). Do it as you normally do in putting gadget or widget in your blogger lay -out.

Step 1. Go to Blogger Dashboard
Step 2. Click Lay -out
Step 3. Hit the Add a Gadget button and paste inside it your widget codes.

Note: Drag or place your new gadget below your blog header-title in order to appear it beside the image header by the time you save it.

Step 4.  And finally, click the Save Arrangement button. Enjoy!

HTML Encoder Widget Generator For Blogger

In order for a blogger/web designer to have an HTML Encoder widget in one of his pages, he must install  special javascript  code in order to parse properly  the encoded texts. Please follow the steps below in installing this tool in your template.

Live Demo

HTML Encoder Widget Generator For Blogger

Installing the Javascript and CSS code in your Template
Step 1. Go to your Blogger Dashboard
Step 2. Click Template
Step 3. Hit the Edit HTML button
Step 4. Look for the code </head> and just above it paste the code below,

<script type='text/javascript'>
//<![CDATA[
function html2entities(){
var re=/[(<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}
function replacechar(match){
if (match=="<")
return "&lt;"
else if (match==">")
return "&gt;"
else if (match=="\"")
return "&quot;"
else if (match=="'")
return "&#039;"
else if (match=="&")
return "&amp;"
}
//]]>

</script>

Step 5. Find the code ]]></b:skin and paste the CSS stylish below just before or above this tag,

/********HTML Converter And Counters CSS*****/
input.wbt2 {
color:#333;
font: bold 14px  Calibri,Rockwell,helvetica,sans-serif;
border:1px solid #a2ccdb;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3q83BalAUx-DNE5DmWBRWECgaIhse6lxVTjY-T_LWQ3i6ufPkT7fjJSG55bZkrPYFW3jwSdFYBaIp45V24llFc0BIKdMo6d6v-EaTxhy-ygQ2-er7avNk_uQRwF4NeZZ6cdLZMypjNGo/s1600/postbg.png) repeat-x scroll left top;
cursor:pointer;
}
input.wbt2hov {
border:1px solid #a2ccdb;
background:#0090ff;
color: #fff;
}
/******Text Area of All Tools*******/
textarea {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3q83BalAUx-DNE5DmWBRWECgaIhse6lxVTjY-T_LWQ3i6ufPkT7fjJSG55bZkrPYFW3jwSdFYBaIp45V24llFc0BIKdMo6d6v-EaTxhy-ygQ2-er7avNk_uQRwF4NeZZ6cdLZMypjNGo/s1600/postbg.png) repeat-x scroll left top;
width:100%;
color:#666;
font: normal 13px Georgia,Times,sans-serif, verdana;
border:1px solid #a2ccdb;
}

Step 6. Save your Template and Enjoy!

---

Everytime you need to use this widget  in your posts or in your new post, just paste the code below in your blogger editor page (switch it to HTML mode).

<form>

<textarea name="data1" style="height: 200px; width: 590px;"></textarea> <input class="wbt2" onclick="html2entities(this.form.data1)" onmouseout="this.className='wbt2'" onmouseover="this.className='wbt2 wbt2hov'" type="button" value="Convert It" /> <input class="wbt2" onmouseout="this.className='wbt2'" onmouseover="this.className='wbt2 wbt2hov'" type="reset" value="Clear" /> </form>

Add Facebook Like/Fan Box In Blogger Sidebar

It is very important to have a Facebook Like Box in our Blogger Sidebar for it tells how many users had liked our page and at the same time encourage them to do the same in just one click without visiting our Fan Page.

Add Facebook Like/Fan Box In Blogger Sidebar

Step 1
        1.1 Open your Facebook Fan Page Account,

      1.2  Get the URL from the browser address bar as shown in the screenshot below,

Step 2
       2.1  After getting your face book fan page url, it is now time to configure it.
       2.2  Fill up the information needed (Facebook Page URL, width, height, show faces, color schemes, stream, border color, and  header),



     2.3  Get the code, there are four options i.e. HTML5, XFBML, IFRAME and URL. Among these four options, choose the third one, the IFRAME,

     2.4  Copy the code and in your Blogger Lay-out page, click the Add Gadget Button then scroll down  and select HTML/Javascript. Paste the code  inside the empty box,

    2.5  Click Save Arrangement and you are done.
Note: According to some pro bloggers, blog with less than 100 likes should not show their Facebook  Like Box to their visitors for it discourage them to give you a "like". But anyway, the important is, we know how to install it in our blogger sidebar. Hope you find this article useful. Please take care of your love ones and happy blogging to all of us :-) 

Adding Beautiful Stylistic Cascading Popular Post Widget

Today, we will style your popular post widget that is different from the others, for you can design it like a terrace in your sidebar. We will just add a css code from your blogger HTML editor. So let's jump ahead with the process.

Adding Beautiful Stylistic Cascading Popular Post Widget

Note: Before editing your template, it is advisable to have back-up for it.

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

Step 2. Look for ]]></skin> and just before this tag, paste the code below,

#PopularPosts1 ul{margin:0px;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;padding:3px}
#PopularPosts1 ul li:first-child{background:#EFF5FB;width:95%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#E0ECF8;width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#CEE3F6;width:85%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#A9D0F5;width:80%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#81BEF7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#fff; border: 1px dotted #353535; width:20px;height:20px;line-height:1em;text-align:center;font-size:17px;color:black;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 {
margin-left: 20px;
}
.PopularPosts img {
padding-right:.4em; height: 38px; width: 38px;
}
#PopularPosts1 ul li .item-thumbnail {
float: left; border: 0; margin-right: 10px; background: transparent; padding: 0;
}

Step 3. Click Preview then save your template  and see if it blend with your  blog's environment.

Customization (Optional):

You can choose a variety of hexadecimal color here
A. First part (the color of each popular post box).
    --- Box no.1-5 the hexadecimal colors are  EFF5FB, E0ECF8, CEE3F6, A9D0F5, 81BEF7 respectively. Change these hexadecimal colors with your own likeness.

B. Second part (the with or distance of the box container).
   --- Box no.1-5 the width are 95%, 90%, 85%, 80%, and 75% respectively. Increasing the value will increase the width and decreasing the value will also decrease the width.

C. Third part (the circular  number tag in each box).You can find the code that control this part at 15th- 17th line of the codes.
  --- Change the position (y-axis or vertical ) of the circle that bears the tag by replacing 20px. (Less than 20px, will place it higher and more than 20px will place it in the lower position).
----Change the placement of the circle (x-axis or horizontal) by replacing right to left,
----Change the color of the number inside the circle by replacing black with your own,

D.  Fourth part (the Size of the thumbnail)
---- Change the height and width of the thumbnail by replacing 38px,

E. Fifth part (the position or placement  of the thumbnail)
----You can place the thumbnail by changing the yellow bold text ( you can replace it with writing right)

Thank you for your PATIENCE and Smile!
The credits goes to the author if this article and to helplogger

How to Get Your Feedburner Email Feedlink

In order to have an Email Subscription Widget in your blogger blog, you must have get first a Feedburner Email Feedlink. In this article, I will show  very simple steps in getting your Feedburner Email Feedlink.

How to Get Your Feedburner Email Feedlink

Step 1. Log in To Blogger account
Step 2. Go to  feedburner.com
Step 3. Type your blog url in blank box as shown in the screenshot below, then click next

Step 4. After clicking Next, you will be taken to this page and  click again the next button as shown in the image below,

Step 5. After identifying your feed source, feedburner will give your feed title and feed address, then simply click next

Step 6. After clicking next, you will be brought to your Feedburner Account Dashboard, hit Publicize and click Email Subscriptions. The image below may help elaborate this particular step

Step 7. It is now time to get  your HTML inside the box. (Don't forget to click the code to be used in blogger if you want the code to be inserted directly to your Add Page Element in blogger). Please observe the photo  below

 In my case the set of codes are

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/meETl', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="blogspot/meETl" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

The highlighted text in blue is the feedburner Email Feedlink and the pink highlighted text is the feed burner tiltle ( you can find this feedburner title also at the end of your feedburner Email feedlink)

Click here to add a beautiful Email Subscription Widget to blogger

Thank you for patience and Enjoy!

Adding Email Subscription Widget to Blogger/Blogspot

In customizing our sidebar, we should not forget to add an email subscription widget on it, not only to add spice to your sidebar but also it enhances your visitor to follow your blog's up to date post. This tutorial will show you not only adding email subscription widget but you can also customize it with your preferences.
Before proceeding to the tutorial, please get first your  Feedburner Email Feedlink here.  You can use our tutorial  for your guide.

---

Adding Email Subscription Widget to Blogger/Blogspot

---

Step 1. Go to Blogger Dashboard,
Step 2. Click Lay out,
Step 3. Click Add Gadget,
Step 4. In the Pop-up window, scroll down and select HTML/Javascript (click the plus sign),
Step 5. In the blank box, paste the code below,

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLbkrOD3VzqK6e2HkX3lFNAUmNAbKBD4MMA2SMlLRX46Y6TZLO2RKlPLqtIvMkthLSXURMsz4KQ3uJTRlDsq6KNs6bK8PsLO1Kg1nX7rdwjdImhy5ofP3IEDdjnyxTAoCuq36SMonuGgSs/s1600/email.png) no-repeat 0px 12px ;
width:250px;
padding:10px 0 0 55px;
float:left;
font-size:.7 em;
font-weight:normal;
margin:-15 0 1px -5;
color:#000000;
}
.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:1px normal;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#158aee;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:12px;
width:170px;
color:#666;}
</style>
<div class="mbt-email">
Receive LATEST TUTORIALS via email by submitting your Email address below <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/meETl', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email  here...&quot;;}" onfocus="if (this.value == &quot;Enter your Email here...&quot;) {this.value = &quot;&quot;;}" value="Enter your Email  here..." type="text" />
<input type="hidden" value=" blogspot/meETI " name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="OK" type="SUBMIT" />
</form>
</div>

Short customization: Optional

First part (.mbt-email)

1. To change the font size of the text "Receive LATEST TUTORIALS via email by submitting your Email address below",  change .7 (increase numerical value will also increase its size and  lower value will also decrease its size)

2. To change the color of the text "Receive LATEST TUTORIALS.........." replace the hexadecimal color  #000000. You can choose it here.


Second part (.mbt-emailsubmit)

1. To change the border style of the box that encloses the text "OK",  change 1px solid #ccc, you can choose it here
2. To change the font size of the text " OK", change 12 px  (increase numerical value will also increase its size and  lower value will also decrease its size)

Third part (.mbt-emailsubmit:hover)
1. To change the color of the box that bears the text "OK", change the hexadecimal color 158aee with your own color preferences. You can choose it through our color code generator

Fourth part (.textarea)

1. To increase the  size of the text area, change 170px with own text area size (it depends upon the length of the texts that you want to put inside  the box)








Fifth Part (div class="mbt-email")

1.To change the text above the text area,change "Receive LATEST TUTORIALS via email by submitting your Email address below" with your own
2. Replace http://feedburner.google.com/fb/a/mailverify?uri=blogspot/JHOLw with your own Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
3. Replace  blogspot/JHOLw with your own, you can find it in your feedburner account after the equal sign, in my case blogspot/JHOLw is the last code.

Step 6.   Click Save Arrangement and Enjoy!
 Thanks for your patience.

The credits goes to Allbloging tips and to the author of this blog.

How to Add Recent Comment Widget With Thumbnails

Having a problem on how to invite your readers to post creditable comments from your post? Posting a comment takes time for your readers to think of what will be their comment to be posted in your comment box area and sometimes they just leave and go for another blog to search for the answer of their questions. But when they leaved a short comment, it means that they are interested with the topic or they want to ask another thing which you did not include in your article. Consequently, in the long run you as a blogger  could established  a regular readers in your blog. In order for you to that, we will put a widget in your sidebar that would invite them to leave their comments below your  post  because as they leave comments it will automatically be found in your Recent Comment widget in your sidebar.

How to Add Recent Comment Widget With Thumbnails

Step 1. Go to Blogger Dashboard, click Lay-out and hit Add Gadget, 

Step 2. After clicking the Add Gadget, a pop-up window will appear. Scroll down and select
HTML/Javascript (click the plus sign)

Step 3. Write a title of your widget and place the code below inside the empty box

<style type="text/css">

ul.w2b_recent_comments {

    list-style: none;

    margin: 0;

    padding: 0;

}

.w2b_recent_comments li {

    background: none !important;

    margin: 0 0 6px !important;

    padding: 0 0 6px 0 !important;

    display: block;

    clear: both;

    overflow: hidden;

    list-style: none;

}

.w2b_recent_comments li .avatarImage {

    padding: 3px;

    background: #fefefe;

    -webkit-box-shadow: 0 1px 1px #ccc;

    -moz-box-shadow: 0 1px 1px #ccc;

    box-shadow: 0 1px 1px #ccc;

    float: left;

    margin: 0 6px 0 0;

    position: relative;

    overflow: hidden;

}

.avatarRound {

    -webkit-border-radius: 100px;

    -moz-border-radius: 100px;

    border-radius: 100px;

}

.w2b_recent_comments li img {

    padding: 0px;

    position: relative;

    overflow: hidden;

    display: block;

}

.w2b_recent_comments li span {

    margin-top: 4px;

    color: #666;

    display: block;

    font-size: 12px;

    font-style: italic;

    line-height: 1.4;

}

</style>

<script type="text/javascript">

//<![CDATA[

    // Recent Comments Settings

    var

 numComments  = 5,

 showAvatar  = true,

 avatarSize  = 60,

 roundAvatar = true,

 characters  = 40,

 showMorelink = false,

 moreLinktext = "More »",

 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",

 hideCredits = true;

//]]>

</script>

<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>

<script type="text/javascript" src="http://name of your blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Short Customization:

1.To change the number of comments to appear in the widget, replace the value of 5 in numComments= 5 and max-results=5"
2. Change the  bold text in red name of your blog with your own blog's name
3. Change the thumbnail size (avatar) 60 with your own 

Step 4. Hit Save Template and enjoy!
Credits goes to helplogger with some modification from me.

Adding Feedjit Widget to Blogspot

Another way of knowing who are those people who visit on your blog or website is through having a Feedjit Widget. Additionally, you will be able to  have a first hand knowledge to those people  who read about your latest posts.  Feedjit lets you know, right now, who is visiting your site. Simply add the Live Traffic Feed and instantly start seeing who is visiting your site as they arrive. In this tutorial, I will show how to add feedjit widget to your blog.

Adding Feedjit Widget to Blogspot

Step 1. Open your Blogger Account

Step 2. Go to Feedjit and fill- up the form (PERSONALIZE YOUR FEEDJIT Form)

Step 3. Click Install feedjit on my and hit the Go button. By clicking  it, you will be taken to the other page, the INSTRUCTIONS FOR INSTALLING ON BLOGGER page

Step 4. In that page, click the box bearing the text [Click to open a new window and install on Blogger] and you will  brought to the Add page element page

Step 6. In the Add Page Element page, click the Add Widget button as shown in the screenshot below. By clicking that button, you will be taken to your Blogger Layout page

Step 7. Drag the Feedjit Button to the place where you want to fix it

Step 8.  And finally hit Save Arrangement button and you are done. See your new widget and Enjoy!
If you have some questions, suggestions regarding this post, please leave it in the comment box. We are happy to hear your voice.
Enjoy!

Adding Related Post Widget Via Linkwithin

Do you like your readers will stay longer in your website by clicking other related topics that they browse in your page content? Probably, no one will  give a NEGATIVE answer, right? Showing thumbnails of posts having related labels or categories at the bottom of each post  engages the reader to stay longer  and increases the page views at the same manner.  This widget  will load faster and you don't  be  worried about  the loading time because the widget codes are stored on linkwithin servers.

Adding Related Post Widget Using Linkwithin

Step 1. Go to Linkwithin and  fill up the form as shown in the  screen shot below

Step 2. Keep the width (refers to the number of thumbnails to appear in your related post widget)  into  three (3) if your post width is less than 500 px

Step 3. Click the Get Widget button and  and you will be taken to the next page

Step 4. In the new page, Click the Install Widget link (by clicking this link you will be brought to another page and that is the  Add Page Element

Step 5. At the Add Page Element page  you are going to give the name of your blog and edit the Title (refers to the title of your related post widget). You may replace it with  a texts like YOU MAY ALSO LIKE: OTHER RELATED POSTS: etc. 

Step 6. Now click the Edit Template Link ( pointed with the yellow arrow)
Upon clicking that link, a code like this will appear

<b:includable id="main"><data:content /></b:includable>

Step 7. Replace the code above with the code below

<b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><data:content/></b:if></b:includable>

Step 8. Next, click the Edit Content Link ( pointed with the green arrow) and place the  additional code  below just before the code  that is found inside that link.

<script>linkwithin_text='Related Posts:'</script>

Step 9.  Replace the red highlighted bolded texts with your own Related Posts Titles

Step 10. Now, hit the ADD WIDGET (pointed with the black arrow in the photo in step 4) button. Upon clicking the ADD WIDGET button, the Related Post Widget is now being added to your Blogger Page Elements page automatically, it means that there is no need to paste  any set of codes that you met in the previous steps.

Step 11.  Once you are taken to the  Blogger Page Elements page of your blogger account, find the box bearing the title of your related post widget (usually you can find it at the right side of your post body box) and simply drag it to the bottom part of your post body.

Step 12. Finally, click the "Save Arrangement"  button and you are done friend!
For its customization  click here.

Have peace in your mind and love in your heart!
Have a nice  day pal!
Credits goes to My bloggertricks with little modification from me.