Reason Why You must have Search Box on Your Blog : InfoGraphhic

Reasons Why You should have a search box on your blog.

Blogging however can be treated as a game like GTA vice city or MIDtown madness because the sequence of writing posts and gathering knowledge on regular basis is never ending. A pro Blogger is capacitive to write and write thereafter. There is no reason to stop blogging. 

(But making it successful is not the game of kids.)

Blogging is full of adventures and courageous tasks. Its full of grasping new things.

Now let's come to the point.

Why Search Box

There are numerous reasons of putting a search box on your blog which can be expanded as follows.

• For Blog Engagement

A visitor finding your narrow exposed blog with bounce up to other and will not only increase the bounce rate of your site but also make your devoid from getting more pageviews per visitor. 

Using a search box will encourage a visitor to find if the information of his interest does exist on your blog or not. Once he found the matter of his choice and interest, I bet he will hook to your blog.

• Audience want more

This is the fundamental characteristic of human nature that he is never satisfied. So search box can make them see more than that is visualized by the way of widgets and plugins. 

• Station of Infomation

Once you've a search box installed on your blog, the blog looks like a station of information where visitors can find everything about the niche industry. Information is the actual purpose why the visitor is on your blog and one you fail making him to know about - "Hey there's everything your need!" you'll start losing traffic. 

So I strictly suggest search box widget to be there on every blog.

• Loved By SE Crawlers

According to my own believes, search engine bots also love to see a search box on the HTML coding of a website or blog as it is a good signal towards insite exploring. It also does not take even a megabyte of disk space on your hosting.

• Beautifies Your Blog

This is a quiet strange statement that search boxes are able to put more stars into the appearance of your website or blog but this is true. There is not only a typical default search box available for your blogging platform. That can be customized with CSS. Must see : (5 Stylish Search Box).

• Maximum Exposure

This is the only mean of exposing maximum of the content of your blog in the minimum of space. Using excessive widgets to meet this extent of exposure of content will impose a negative impact on the website appearance and your audience too.

How to Show and Hide widgets in Blogger

As seen in many heart touching blogger templates, widgets are shown according to the type of page. In many blogs I've seen different widgets for different posts and even no widgets on static pages. This is fucking strange but is the matter of creativity how you manage widgets on your blog to attain the maximum optimization of web blog design. A Perfect Blog layout is the result of successful widget placement.

This would be like a hide and seek game and you ought to be very brainy in order to use these tricks.

Now I've brought this tutorial for my friends using blogger and having problems in widget placement.

Advantages of Hiding widgets on some specific Pages

There are so may landing pages where a kind of widget is not suitable. As you should be aware of the Google AdSense program policy that, you're not allowed to visualize advertisements on your privacy policy, term and condition and disclosure and disclaimer pages. Now you will be very afraid of hearing this if were yet unaware with this fact. Relax! I've solution.

How to Show/Hide Widgets in Blogger

You're invited to come and get your hands dirty in this fucking coding. Now I am thinking, "WordPress is better than Blogger." Ok Leave it and let's start.

Find the title of that widget on the template HTML of your blog and then anticipate whether to show it or hide it. If it has to be shown, then on which page. If it is a specific page, post or should be a type of page there.

A Example Code Snippet of a Widget

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Above code is for a RECENT POST WIDGET and HTML1 is the ID and Type HTML says that it's a HTML/JAVA script widget.

Now hope your understood this coding and let's begin now.

 To Show the WIDGET only in HomePage

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To show B Widget only in Posts

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Hide Widget in Post Page

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType!= "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 Show that widget only in Specific Page/post

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Make sure to change the URL of the page with the desired page URL where you want to show that widget.

To Show widget in Static Pages Only

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

To Hide it in Static Pages 

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Make sure to use it with due diligence.

Hope this article helped you. 

Auto Social network Poster Plugin for Blogspot (Blogger)

In such a time where a numerous free auto posting applications are available, this tactic is deemed to be very non prevalence. But the task of auto posting is very time wasting. Now here I am presenting a trick - which is very trendy on wordpress and numerous wordpress plugins to auto post on social media are available online. But this trick is for my friends using a blogger blog. Posting a link on all your social network profiles is a bit time consuming and here you can do it automatically.

How this Social Media Auto Posting for BlogSpot Work?

The tactic we will use to update a status, post a tweet and pin the post on linkedin is based on RSS feeds. As a New post is published, the feed hits the plugin and getting post signals this plugin hit posts to your facebook profile, twitter and linkedin profiles.

Why You should use Social Media Auto Poster

Using this plugin will give you a peace to write and meanwhile your friends and followers will automatically be notified about your posts. 

How to Set Up this AutoPosting?

If you know the RSS feed URL of your blog, simply take it into the consideration.

In case you are not aware of the feed URL, try www.yourblogURL.com/feed

the above URL must show latest post from your blog.

If it does not, Open Feedburner and add you blog there.

You will get a feed URL like this.

feeds.feedburner.com/Yourblogusername

You should have chosen your desired feed name if available.

Now Go to 

Twitterfeed.com

Signup and create a New account there.

Now add your feed URL there and test it first.

SUBMIT FEED and add your Social Media accounts there.

Allow the twitterfeed application to post on your behalf. 

Now Select the link shortener service your would like to shorten the link with and SUBMIT it.

You're Done now

Now you have a peace of mind that, you don't ought to share link of each post on your social media profiles after publishing it. The feed is on autopilot.

If you want to post in unlimited facebook groups on autopilot Here is another link for you.

Final Words

Hope these words helped you to some extents.

Add Professional 404 Error Page in Blogger

There is no good impact of visualizing a badly designed and poorly written 4o4 error page of your blog. Let's start the discussion. In the ancient Blogger user interface there was no right in the hands of a blogger to edit the 404 error page but in the new interface it's possible because now this feature has a lot of weight because of SEO and hence is taken into search preference section.

What is 404 Error Page ?

It is a HTML web page which is in prevalence to show the error when a user fault fully opens a broken or not found location. In other words, when you enter an incorrect URL which is a suffixed to your blog URL then that page appears.

Professional Error Page

You can have a professional looking 404 error page on your blogger blog very easily.

Features

Advantages of this page are listed below.

• Full Page Width : This page consumes the full width of your blog and hence look professional. 
• User Friendly Message : It conveys a message that is soothing and relaxing. Your audience is not gonna go rude after landing on a 404 error page. 
• Go Back Link (JavaScript Link) : The link which was recently visited will be linked with the help of JAVA SCRIPT and your audience will get back to that page as they will click the link. 
• Report Problem To Us (Link To Contact Page) : making your website professional, this page consists a link to the contact us page to land users to a contact form page where they can contact you. 
• Go To Homepage (Link) : So this is a common homepage link for better navigation. How to Add ERROR 404 Page

How to Install?

• Go To Blogger >> Settings >> Search Preferences 
• In the Crawlers and Errors Section, find Custom 404 Page and Click on "Edit". 
• Now a box will appear where you have to paste the following code. 

<!-- Yesiamblogger 404 Page -->
<p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Looks like you either clicked a broken link or a page that you were looking for doesn't exist. <br/> Kindly do one of the followings:
</font></strong></p>
<ol style='line-height: 25px'>
<li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>
<li>Report the Problem to us by <a href='CONTACT PAGE URL'>Clicking Here</a>&#160;&#160;&#160; (<em>This will help us serve you even better</em>) </li>
<li>Go To Homepage by <a href='HOMEPAGE URL'>Clicking Here</a>
<br/></li>
<li>Search Anything Using Below Search Box</li>
</ol>
<br />
<center><form _lpchecked='1' action='/search' class='search-form' id='search_mini_form' method='get'>
<input id='searchinput' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Type Here & Hit Enter&apos;;}' onfocus='if (this.value == &apos;Search the site&apos;) {this.value = &apos;&apos;;}' type='text' value='Type Here & Hit Enter'/>
<input id='searchbutton' style='vertical-align: top;' type='submit' value='Search!'/>
</form></center>
<p><br/><br/><br/></p>
<p align='center'><font size='5'>Page Not Found!</font></p>
<br /> <br /> <br />
<p align='center'> <font style='font-size:150px; font-weight:bold;' color='red'> 404 </font></p>
<style>
.status-msg-wrap {
font-size: 100%;
margin: none;
position: static;
width: 100%;
}
.status-msg-border {
display:none
}
.status-msg-body {
padding: none;
position: static;
text-align: inherit;
width: 100%;
z-index: auto;
}
.status-msg-wrap a {
padding: none;
text-decoration: inherit;
}
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer , #rsidebar-wrapper { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; }
#searchinput {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMoem2TCvQq9rBefnhtijDCC5pl4R_mK5KZj36Vge4TcBqQG-hZlqhOi5Zp1m7spW8t6YbAE9jqYPYov2RLZ-86q55ToNGqsshhYSIUI1frcvSUeZLy99wRtDC9Gf2_iIx4vS6fjw3FiIh/s0/search.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
color: #A0A0A0;
display: inline-block;
font-family:arial;
font-size: 12px;
font-weight:bold;
height: 24px;
width:300px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
#searchinput:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}
#searchbutton {
background:#444;
color:#fff;
height:35px;
border-radius:5px 5px 5px 5px;
box-shadow:1px 2px 1px 1px #ABABAB;
border:1px solid #fff;
margin-top:3px;
padding:8px;
}
#searchbutton:hover{background:#555;}
</style>

• Replace "CONTACT PAGE URL" With Your Contact Page Link 
• Replace "HOMEPAGE URL" With Your Homepage Link
• Click "Save Changes" & You Have Done!

How To Check This Page ?

After installing this page, now you must want to see that page that how it looks like in your own blog. In order to check that page, enter any incorrect url of your blog in the address bar and hit enter. Look at the example below
http://www.yourblog.blogspot.com/404
http://www.yourblog.blogspot.com/FO


All Done . Now Enjoy.

How to Embed your Twitter Post on Your Blog

Besides search engine optimization, social media optimization is also a vital part of  promotion of a blog or website. You can get high success by engaging with your website audience but what if they are unable to connect with you on social networks? Hence the need of social widgets on a blog is very high. Once you successfully optimized your blog's blank space with social media widgets, you are one the track of achievements and no one can check you then.

Advantages of Embedding Twitter Profile on your Blog

There are numerous advantageous of  embedding your twitter profile on your blog.

• Audience can easily interact you on twitter and can share their view with you on twitter.
• Your audience feel something that is transparent on your blog.
• There is no ghost author on the blog and its written by real one.
• The blog is live and administrator will hear what i will put before him.

How to Use Twitter Custom Profile Embed Widget on Blogger

As usually we do it, Goto add widget in the blog layout section and select HTMl/java script there.

Now you need to put the code below there

<a class="twitter-timeline"
width="250"
height="700"
data-theme="light"
data-chrome="noscrollbar"
href="https://twitter.com/yesiamblogger"
data-widget-id="558498227154976769">
Tweets by @yesiamblogger
</a>

Go to https://twitter.com/settings/widgets and click add widget there. Simply Save it without doing anything there.

Now see the URL of the page and copy your widget ID there. and replace it with the green text in the code snippet given above.

Replace yesiamblogger with your own twitter username and click save.

You're done embedding your twitter profile on your blogger blog.

Hey Stop! You can customize it as well.

There are few things you can customize manually. To change the color of the border of the widget on the blog appearance use below code and select your own border color there.

data-border-color="#cc0000"

You can set tweets limit you want to be shown on the widget with the below code into the coding of the widget. Below code says that only 5 tweets will be shown there.

data-tweet-limit="5"

Links color can be change with the below code.

data-link-color="#cc0000"

This is not it, you can set width and height of the widget. refer to the widget code and see width is 250px and height is 700px there. You can change these properties as well.

In order to hide the scroll bar, use below code, which is already placed in the above widget code.

data-chrome="noscrollbar"

Hope this important information meant you  a lot. Share your ideas about this post below in the comment box. 

6 Stylish Custom Search Boxes for Blogger

Incase where the homapage, Archieve page and other pages are not able to expose the content of user's choice, search boxes comes to fulfill this need. Search option has been of key importance in the industry of web design overall the history. Navigation is not enough.

Now here we will see Six designs of search boxes which will be more selective to be chosen as according to the template of your blog.

Add Custom Search Box to Blogspot

Adding a stylish and elegant search box in your blog is easy and you can select any of the above to make it look interesting with CSS. 

Custom Search Box for Blogspot

 <style>#searchbox {
background: #d8d8d8;
border: 4px solid #e8e8e8;
padding: 20px 10px;
width: 250px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN40ZcJH7-I8O4ZH1qW5Er6JrpPWnTnSlfn7OzBcE7sVV_SXTSSjuhqHDCJNFxN3fo9P3mLuhRPmPCX4eCkIql8m29_AikAAzC2Ve2MWdV3z3IerXmXD2ir-cF6djYySRKZDbZXf0SDTjv/s1600/search-dark.png) no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: #fff;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 55%;
padding: 8px 15px 8px 30px;
}
#button-submit {
background: #6A6F75;
border-width: 0px;
padding: 9px 0px;
width: 23%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #fff;
text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
background: #4f5356;
}
#button-submit:active {
background: #5b5d60;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>

 Stylish Search Box

<style>
#searchbox {
width: 240px;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN40ZcJH7-I8O4ZH1qW5Er6JrpPWnTnSlfn7OzBcE7sVV_SXTSSjuhqHDCJNFxN3fo9P3mLuhRPmPCX4eCkIql8m29_AikAAzC2Ve2MWdV3z3IerXmXD2ir-cF6djYySRKZDbZXf0SDTjv/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #6A6F75;
width: 160px;
padding: 14px 17px 12px 30px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
text-shadow: 0 2px 3px #fff;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6YypBS-mESWUYE8KXvTJZ9OYdCQQTM-YGwae_fPyqMFHn2RS14iaHvSbptV-phAE7TqIuVPrTdp-YjUtFwuedeEI2nrOWKd5bj-T7PVnuEiFE7E5nC5FDcdeYbWnObUb4nPRO9FW2uur1/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

 Elegant Custom Search Box for Blogger

<style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6S059gh7_oSVe7o7VGoPAIEdKdjagb1WNuktcLW2jtK3J4XQICcvU3O-vocLDnr9O3wUWwZ-JQ65V5v7bVlW5yU9ljjadKx-hyCBeURrF3Hh2oUAPicxT5Jl59kxfrNJZCxWdtxiUICVD/s1600/searchbar.png) no-repeat;
width: 208px;
height: 29px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
margin: 3px 0px 0px 20px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
color: #828282;
width: 70%;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF1JZBNUBu5tMIZw0yASzi5EpkcqB6zAO_NpVP6UZL_O9fsfvwwpeYx5eSnhHOmdOPkFqYh7lHjPZnw-r0GsIKpIGsx6hK8dzpmQQ485isMqIMPoKjAMAP02dq0FoBJLz8QbX4htG-0ie3/s1600/magnifier.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-left: 10px;
margin-top: 4px;
width: 21px;
height: 22px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMbQD-JwwbJL3PZui2VBWGjg1GiB0gOrBszNZmFL5i61yzUvbaSLTiSOVSSBLBwt-rdNPzfsHehHI4b7xVh6P9-hcnBANxAuW971_95f53qr5wr695TUOLzRra0Or4MovklMEO60xbBz0y/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMbQD-JwwbJL3PZui2VBWGjg1GiB0gOrBszNZmFL5i61yzUvbaSLTiSOVSSBLBwt-rdNPzfsHehHI4b7xVh6P9-hcnBANxAuW971_95f53qr5wr695TUOLzRra0Or4MovklMEO60xbBz0y/s1600/magnifier-hover.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

Elegant Stylish Black Search Box for Blogger 

<style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirzET2m2JrEw-peYaGnCvyhXjj6LQm1zz34_CHmTQ5hsRdTJ9HYmjZ6n28F73PtMCuB67S9evm2YFfR-hTp_RXFqtF0o1DlbiXb4IyXDpahvu6myMDSItVrfBJm_e1A79KmwgY-MluJlI_/s1600/search-box.png) no-repeat;
height: 27px;
width: 202px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
margin: 0px 0px 0px 12px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
font-style: italic;
width: 77%;
color: #828282;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL_XPhk0exyWZ90U2ycc0Qdi1Q9J7-r1x-NekgJBLm6KWW1kTNpzrusHvNbImc4NIXFbQNUEYW2l3zxVTreyT448HXDnS0ol2VCEhpd-xnfGLoJtotE9WLEshigRE4sogeDBTk9nYyMlIe/s1600/search-button.png) no-repeat;
border-width: 0px;
cursor: pointer;
width: 30px;
height: 25px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0bFk-fo68CiXMBLA1NIDGPeLHlqb5hc74ysWiKGkgAN6thNiHSCCr93li_SqWWXu9_NxHq4tt0EthXIRcmPLVuZp-7vkIqkEeC9-Knw41rsc7mDsFcR__5r_Jv_17v2UHkWjXdO34eF52/s1600/search-button-hover.png) no-repeat;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

HandDrawing Style Search Box for blogspot Blog 

<style>
#searchbox { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHq7PGUv1rWw6Vp0-Zzy8hpbANg8nQOckic_oBZ3Cs-PIef_k628gomsL8Lpu60_v1uas85TG-mpsK_4xawBqHdOVB9oEvUDbeTGMIiduQkg7V2xpU9f0B4x-4hQxiUi0KP_3cew1m9YQ7/s1600/search-box1.png) no-repeat; width: 250px; height: 65px;}
input:focus::-webkit-input-placeholder {color: transparent;}
input:focus:-moz-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
#searchbox input { outline: none;}
#searchbox input[type="text"] { background: transparent; padding: 5px 0px 5px 20px; margin: 10px 15px 0px 0px; border-width: 0px; font-family: "Brush Script MT", cursive; font-size: 12px; color: #595959; width: 65%; font-weight: bold; display: inline-table; vertical-align: top;}
#button-submit { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqFkP9OJ1pPNEV3_1PbcKG7TvGwp5ynuY_l8wnRegXfG_GA_6iLsahCk7J679EJ2VW5u2XzCCWKMpFwkPbc-EZxfFO4Jny6hza8IriQpwfQGl9aP7CahDaY3eOWUeW8ldA7EtvRsnSEhu5/s1600/magnifier.png) no-repeat; border-width: 0px; cursor: pointer; margin-top: 10px; width: 19px; height: 25px;}
#button-submit:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZC8FPs5TeFi993z63QU7ic1FYnugEIHiVoIqze-pz4nefqdlG1MfDXUXJUPJDAP7x6oVzdCq4PWFHAKHleooAwLQuNfbm_WMAFQzm6Os3FiTXEiCthowAYsmN9KxOugo-btOaUiFxqDd/s1600/magnifier-hover.png) no-repeat;}
#button-submit:active { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZC8FPs5TeFi993z63QU7ic1FYnugEIHiVoIqze-pz4nefqdlG1MfDXUXJUPJDAP7x6oVzdCq4PWFHAKHleooAwLQuNfbm_WMAFQzm6Os3FiTXEiCthowAYsmN9KxOugo-btOaUiFxqDd/s1600/magnifier-hover.png) no-repeat; outline: none;}
#button-submit::-moz-focus-inner { border: 0;}</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"> <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." /> <input id="button-submit" type="submit" value="" /></form>

Cool Black Search Box for Blogger 

<style>#searchbox {width: 280px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdl3XzmfDQxqBKD_fXshzRnebVuz3Py0K25blDOO-UkZa-nVXyaPVtycd7ieA3mrcJFYW5KBs75u37WlZNTnwLI_Pv8tRuArDGiogwUfxZZuyKMIvokRJ39_ZinMiAY-nji19Cv0HVZ-Zn/s1600/search-box.png) no-repeat;}
#searchbox input { outline: none;}
input:focus::-webkit-input-placeholder { color: transparent;}
input:focus:-moz-placeholder { color: transparent;}
input:focus::-moz-placeholder { color: transparent;}#searchbox input[type="text"] {background: transparent;border: 0px;font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;font-size: 14px; color: #f2f2f2 !important; padding: 10px 35px 10px 20px; width: 220px;}#searchbox input[type="text"]:focus {color: #fff;}
#button-submit{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijbmSzr0uThXsyEOI0VKuv0rlhS2WusvHU7iGQ4sLbI-S6Eq3HDim0W-6X4cGuhm0ZLC4p1gO_cMbbx1nwJZm4lQ36WkHPb2csiwh0l95MojePypom9XNAANw_9Gegd5gf_E2WdwUZcRbu/s1600/search-icon.png) no-repeat;margin-left: -40px;border-width: 0px;width: 40px;height: 50px;}
#button-submit:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsFb993gsW20aVWNWMkKzaoa0mxYJa2axlYmpWoJIRcD5K0nbqv27tPLswW9F2epRYkXTY7tGr5mMX84MVlRJYrXiVAyDwukyEWwUR0O6b_oTyWVHRk4j2ioxi5az9FEvEqDk-agM6Ua_C/s1600/search-icon-hover.png);}</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." /><input id="button-submit" type="submit" value=" "/></form>

How to Add Custom Search box in Blog? 

Easily Add a HTML/Java Script gadget into the Layout of your blog where ever you have to place it and paste the respective code snippet in the code box and leave the title box there and click save.

Now Enjoy.

Elegant Recent Post Widget for Blogger

So far as I consider, Recent post widget is not yet available on default widgets on blogger. WP guys however are leveraged with this widget. Recent post widget helps your blog in two ways. Firstly it create audience engagement with your blog and secondly it inform the perspectives about what you recently have written on your blog. You can fetch posts from other blogs as well but only in case where you're sure that the feed address you're entering is correct.

Recent Posts with Snippet

<div id="hlrpsa">
<script src="https://googledrive.com/host/0B9z9HCzVzJW4UEo0RkVwMmxzUzg">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://blog-address.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html" rel="nofollow" >Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Only Title Recent Post widgets

<div id="hlrpsb">
<script style="text/javascript" src="https://googledrive.com/host/0B9z9HCzVzJW4UzA5ZFJYdENQcHc"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://blog-address.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="#" rel="nofollow" >Recent Posts Widget</a>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }

</style>

Note : Make sure to change the blog-address.com in given snippets with your own blog URL.

Final Words :

This widget is working to many extents and you're asked to confirm the feed host address first before using this widget. In case, you're unable to setup this widget, comment here and let me know. I will try to resolve the issue.