Recent Posts with Thumbnails Widget for Blogger

This is a post that help you to add recent post on your blog to also know your latest comment with cool design to make your guests love your blog now on the set up it also show the image on the post and the total comment on the post.

1. Sign into Blogger dashboard
2. Go to Layout » Add a gadget » html/javascript

3. Just copy and paste this code..

 <script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://olantinowap.blogspot.com/";

</script>

what you need is to just change the link on that code to your blog link http://olantinowap.blogspot.com

happy blogging 

How To Add Reply Option To blogger Comment

WOW!!! This is cool option for your blogger. You can add reply button
to your every blogger comment. so it will help you to reply
to questions easily.

 1. Log in to your blogger account and Go to Design >> Edit HTML

2. Make sure you put check mark to “Expand Widget Templates”

3. Find this tag by using Ctrl+F  <data:commentPostedByMsg/> 

4. Paste  below code After  <data:commentPostedByMsg/> code

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;
isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;'
 onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>
<img alt='Reply To This Comment' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisLVfmdXpEyGigPfUnkShTVlX7aMQdR0__uHBJAo_aC-kD3wA1oG-MzhEFVAKEj6fjjHWaPk7-f2-0tObcb0iUzcCBnadSaJwmH4l1_m5UJCN5dFt8XdRbSqpsVYIo2Th-pO_-gFLkvJLa/s1600/reply.png'/></a></span>

 You can replace YOUR-BLOG-ID with your ID

Go to dashboard and click design, then you can get your blog ID on Address bar.
It looks like below.
5. then After you finish, you can click Save Template
   You are done. 

How to add Transparent Fixed Follow On Twitter Badge To Blogger

wow this post i have an awesome fully transparent Follow on Twitter image i know you will love.The image has the Twitter bird on a branch with a small Follow Us On Twitter board Below.The image will really catch the eye of visitors to your blog and get more people following your blogs updates on Twitter.We will add the image to the right side of your blog and as i said it will stay fixed in position as the reader scrolls.Lets look at the screenshot or see the live demo at right side of this post.

• Go to blogger--->Layout--->Add a gadget
• Choose HTML/Javascript from the list
• Copy and paste code below into it

<a href='http://gj37765.blogspot.in'><img alt='Tips Tricks And Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lm3z7fUu28_hN8ryxN8mLoG3jPskCtcj22ZXt-9rfIU0ew-s69saR_zUDlqDqEBDHJ19r8R2y1INAhd7bfimtBambo_igXbbCxVgh8ElZPPT-_Qle8K5DWscv4YBHxnnNw067_J0HGaP/s1600/best+blogger+tips.png'/></a><div style='position: fixed; bottom: 20%; right: 0%;'/><a href="http://www.twitter.com/iam_olantino" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ3BMhpBCOyEnAhQiX17FnU-Eh4z09PMuxYJlUy5Rr0tf51DDLWJG1SPxEVeVdPlJ8SHDCndvSED9PhnbmSAUxJGg9qHYc0ibQdfPls-fHvzsmZLQuslI5gKPYNzGXG3iGlIgs-gNbJINb/s1600/%5Bwww.gj37765.blogspot.com%5Dfollow+on+twitter+float.png" /></a></div><a href="http://gj37765.blogspot.in" target="_blank">Fixed Twitter Gadget</a>

change the twitter id to urs iam_olantino ...

With the code in place save the gadget and your Follow us on twitter image will be fixed on the side of your blog.I'm sure this will help you get more Twitter followers following your Blogs
Drop your comments and questions below.. thanks for visiting

Subscribe And Follow Icons Gadget Using Sprite Effect For Blogger

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

 Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css,

Step 2. Copy and Paste the following code into the Css Section

/*Social Sprite Css*/
#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmDd5tw-HKAlpxM2GV6_U_fAcFvNHS3il3IrLNRb8hfCB8SNbbOuHJzoaqZVxhU3c3MDDX7oAg-h1Xs1k_0dUN7J9FmZJY2DzzMRSojV1DQ076ryz_928Wcg8i0AjZKlgZmW3wn2aY_UPU/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}

#head-soc li#g a {background-position: 0px 0px;}
#head-soc li#g a:hover {background-position: 0px -32px;}

#head-soc li#rss a {background-position: -32px 0px;}
#head-soc li#rss a:hover {background-position: -32px -32px;}

#head-soc li#sub a {background-position: -64px 0px;}
#head-soc li#sub a:hover {background-position: -64px -32px;}

#head-soc li#fb a {background-position: -96px 0px;}
#head-soc li#fb a:hover {background-position: -96px -32px;}

#head-soc li#twit a {background-position: -128px 0px;}
#head-soc li#twit a:hover {background-position: -128px -32px;}

#head-soc li#li a {background-position: -160px 0px;}
#head-soc li#li a:hover {background-position: -160px -32px;}

#head-soc li#youtube a {background-position: -192px 0px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;}
/*Social Sprite Css http://www.olantinowap.blogspot.com */

 Step 3. You now need to add the html for the icons and add the URLs for your social profiles.

Go to your layout page, Choose add a gadget for your sidebar, choose HTML/Javascript from the list and paste the following code into the HTML/Javascript gadget.You will need to change the URLs highlighted in yellow to yours then save.

 <!--Social Sprite Html-->
<div id="head-soc">
<ul>
<li id="g"><a href="https://plus.google.com/b/108200902911276741668/108200902911276741668/posts">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/olantinotechvilla">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=olantinotechvilla&loc=en_US">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/olantino">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/iam_olantino">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/profile/view?id=62595960">LinkedIn</a></li>
<li id="youtube"><a href="http://www.youtube.com/user/add your url">YouTube</a></li>
</ul>
</div>
<!--Social Sprite Html http://www.olantinowap.blogspot.com-->

 And that's a very tidy set of social and subscribe icons with a cool effect using a quick loading sprite image.

Drop Your Comments And Questions Below.

If You Enjoyed This Post Please Take 5 Seconds To Share It.