WordPress like Expandable search box will give a funky look to your blogger blog .Normally this type of search widgets you will see on WordPress sites.And this code will let you incorporate this WordPress search box in your blogger blog.

1.Go to Blogger Dashboard > Template > Edit HTML

2.Search (Ctrl+F) for the line  ]]></b:skin> .

3.Now Copy the below code and paste it before the red highlighted line.

Customization:

 a.If you want to change the background image for the search box then just replace the existing image URL (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_NpgJ8nPVv8pDtyU7TLGd6Qm3BqU49evTMFiLMhZth6suBYJ7QN4Jc92oWY9Jza8ATtTkO5VtfMv6OAMgjIJEPxQgfV8VXk2Id6Z8IeLdY1vK6NzVdTo07HGt1NgWpgyxzi65eGzRPBVq/s0/subtle_freckles.png.png )with your image URL.And if dont want ant image background then remove this line from the code url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_NpgJ8nPVv8pDtyU7TLGd6Qm3BqU49evTMFiLMhZth6suBYJ7QN4Jc92oWY9Jza8ATtTkO5VtfMv6OAMgjIJEPxQgfV8VXk2Id6Z8IeLdY1vK6NzVdTo07HGt1NgWpgyxzi65eGzRPBVq/s0/subtle_freckles.png.png) repeat .

b.You can also change the default size of the search box by altering width:180px;  and can change the expandable length by changing the width:210px; 

c.To change the border color you can replace this line (border-color:#0b5394#0b5394 #0b5394#0b5394;) with your desired color codes.

4.Now go to Blogger > Layout>Select HTML/JavaScript widget. Paste the code below inside it .


5.Click on save and you are done:)

How To Add Pinterest Button To Blogger Blog.Pinterest pin it button next to your blog post title would be an eye catching and easily noticeable to your blog readers.This pin it button will allow you readers pin your post image on Pinterest along with your blog post link as a back link.Hence,Pinterest users who click on your pinned image will be redirected to your blog post.

1.Go to Blogger Dashboard > Template > Edit HTML

2.Search (Ctrl+F) for the line  <a expr:href='data:post.url'><data:post.title/></a> .

3.Now See the below code ( highlighted in gray) and paste it next to the above red highlighted line as shown in the below image.

Note:To have a space between post title and pin it button just enter 3 empty spaces as shown in the picture above.

4.Click on save template button and your are done.

How To Add Recent Comments Widget in Blogger Blog.This blogger default Recent Comments widget will showcase the new comments from your blog readers along with time and Commentator name.

1.Go to your Blogger dashboard >layout.

2.Click Add a Gadget and select Feed.

 3.In the Feed box enter http://YOURBLOGNAME.blogspot.com/feeds/comments/default .

  4. Click Continue

How To Add Recent Posts Widget in blogger blog.This blogger default Recent Posts widget will help your blog readers to get updated about your new posts.This widget will showcase your recent posts list along with time and author name.You can show a max of five recent posts through this widget.As it is a blogger default widget, you don't need to touch any code customizations in your blog :)

1.Go to your Blogger dashboard >layout.

2.Click Add a Gadget and select Feed.

 3.In the Feed box enter http://YOURBLOGNAME.blogspot.com/feeds/posts/default .


 4.Now click Continue

 How To Add/Enable Related Posts Widget To Blogger With Thumbnails:

How to enable related posts in blogger?This tutorial helps you on how to enable related posts widget for your blogger blog with thumbnails.The purpose of showing related posts widget in blogger blog is to make your readers know about the other posts related or similar to the the post they are accessing.With the help of this widget the readers will remain on your blog for longer period and also helps you in getting more page views.

1. Go To Blogger Dashboard >Template >Edit HTML.

2. Check the 'Expand widgets template' check box;

3. Now Search (CTRL + F) for this code: </head>

4.Paste the below code just above </head>


<!--Related Posts with thumbnails-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzCzXmHnPru4Bmb2nOuFWnz8otuduYeEw__-2G9-rqYMDalC67p-rRBNyqj794je1FAYcqmHf1MyfBlKQytwPoYPKRaODS-DcecxBAdWKLBLbpc__g0Y3LFXEYjDmfdP4YR5v89FolwITo/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;You Might Also Like&quot;;
</script>
<script src='http://genuinecontent.googlecode.com/svn/trunk/genuinecontent-Related-posts-widget-with-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<a href='http://genuinecontent.blogspot.com'></a>
<!--Related Posts with thumbnails End-->

5. Now Search the following code: <div class='post-footer'>

6. just above it, copy and paste the below code:


<!-- Related Posts with Thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://genuinecontent.blogspot.com'><img alt='The-genuine-blogging' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHB3qfItlmu4ItCGqIfGpG6wSMB5QQ3tgjd8ziRsEUbLhWdTGklX7cGpmAnyejsAg0Lj2ZOy3hpcAyIRwuX1-nugkVeN0G0fftTeOOoZ_NiQkW9ScLFjfSGEEIxE5G8CSFTS90xZMfina6/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails End-->

7.Save the template.That's it:)

 How To Enable CommentLuv On Blogger Blog.Get Commentluv widget/plugin in your blogger or wordpress.Intensedebate's CommentLuv comment system is best when compared to Traditional blogging comment system. The most popular feature of Intensedebate comment system is you can enable commentluv,a plugin which has gained great popularity.

Whenever you comment on any commentLuv enabled blog ,it automatically shows your recent post on that blog,which gives you a backlink.And if you give 5 comments then 10 of your recent posts get listed under your comment ,which help visitors of that particular blog recognize your blog posts and in turn help your blog in getting traffic.

1.Go to Intensedebate.com and click on Create an account link.
2.Fills the details and select the option"I want to install Intense Debate on my blog or website”.

3.Click on the link sent to your email and enter your Blog URL and select your Platform as Blogger/wordpress.
4.In Installation tab,Follow the Instructions and click on Upload and Continue.
5. A new window will be opened and you will see an Html Code, just copy the whole code(ctrl+A).
6.Now go to your Blogger dashboard >Template > EDIT HTML >Proceed. Select all the html coding present in your Edit HTML Template Box and replace it with the html code,which you copied from the window and save the template.
7.Now go to your Intensedebate Dashboard (Manage Blogs/sites) ,click on settings and Select Plugins option.Look for CommentLuv and click on Activate.That's it, you are done.

Also check how social media help in boosting your blogs traffic.