Search is needed part for a any website which is abundant with posts. But though your site only contains 15 or 25 posts, it doesn't matter adding an Attractive search box. You can see my search box is on the top right of the sidebar. Adding a search box will able to increase the beauty and creativity of your site and ease the viewers to search what they are exactly looking for apart from leaving from your site by getting fed up.
So to give an attracting and eye-catching looking and stuck your visitors to your site I will show you how to add these search boxes to your Web site by one by one.
- Login to your blogger Dash Board > Layout
- Choose Add a Gadget and > HTML/Java Script Widget
- Now Decide the Style from below what you mostly prefer and Copy the Code of that and Paste it on the Widget Area
Pineapple Yellow with Blood Red
</* Blogging Industries Search Box Pineapple Yellow Start*/>
<!-- This Is A CopyRight Search Engine.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. -->
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsd15sZmg3McwLYSjYCaVoDAt9LPHGXR1T-Q0pvILYP4f62VM0Oeg-Se4UZ5fuuQhuF-85O4eSnzv-uG0DDQjS5UybaLl98F5DfEmwHtvxT_7jZPuOoJA6n3viUNoZzafLd_MfBPLsdw/s1600/Yellow-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
<!-- This Is A CopyRight Search Engine.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. -->
</* Blogging Industries Search Box Pineapple Yellow End*/>
Dark Knight with Pitch Black
</* Blogging Industries Search Box Dark Knight Start*/>
<!-- This Is A CopyRight Search Engine.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. -->
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaq6udEEjwEtbrGXacuhoONzt6ZOViA1LeA7G2gho_igVeQw3fo5IMXQ1mDALbvBqC5bBxDa5wfA45064VltLiv1ntXCi2WQpbs68rAoVLP-ORxVkB820Bw_r_zpsewDE-9fixRf5_vQ/s1600/Black-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
<!-- This Is A CopyRight Search Engine.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. -->
</* Blogging Industries Search Box Dark Knight End*/>
Midnight Blue in Golden Yellow
</* Blogging Industries Search Box Midnight Blue Start*/>
<!-- This Is A CopyRight Search Engine.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. -->
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXR0ZInLP1MhAu-jqiERS2jCNRjvbIq-92w7IHstJGHwyamibVsXtI6NAgKr2KIqiTY3ki7AXSXqzDyXZeX-U1B6F8VE7nNjeHjuFGoi4sq-spuYdfsB_wJg0sTmVpnZF0heYhIjTTA/s1600/Blue-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
<!-- This Is A CopyRight Search Engine.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. -->
</* Blogging Industries Search Box Midnight Blue End*/>
Grass Green with Lochness Passion
</* Blogging Industries Search Box Grass Green Start*/>
<!-- This Is A CopyRight Search Engine.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. -->
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpjUJGS35LYrxLb5Cz-xXt4xmjiy1cpyR_ZOQ_gj6ZUNI0OZI95OgxnwGT7Z2U7DHCTWw49QxCM9ElqGEhEK7z-km80ZQLOFDi0M5r52bgCtyb6k5Ke3lmSTaMGlgANp2yUdim3iV_PQ/s1600/Green-Search-Engine.png)
no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
<!-- This Is A CopyRight Search Engine.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. -->
</* Blogging Industries Search Box Grass Green End*/>
Blood Red in Superior White
</* Blogging Industries Search Box Blood Red Start*/>
<!-- This Is A CopyRight Search Engine.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. -->
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdWfqGqTRs_n5jh7qWHq-MKhIgtnL5RUwt21D2t40mTMtyfnwQ8x6gdTBH3N6bUCGC930tFmlwHAfLZ5SF3LJOjIp9S3Q2pX5zAgBYhE_rrNsczkJCbYgA2A-8RSNW2tNI4IG76fxAVA/s1600/Red-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdWfqGqTRs_n5jh7qWHq-MKhIgtnL5RUwt21D2t40mTMtyfnwQ8x6gdTBH3N6bUCGC930tFmlwHAfLZ5SF3LJOjIp9S3Q2pX5zAgBYhE_rrNsczkJCbYgA2A-8RSNW2tNI4IG76fxAVA/s1600/Red-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
<!-- This Is A CopyRight Search Engine.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action. -->
</* Blogging Industries Search Box Blood Red End*/>
Ah! After a Bit of Hard work and thanking to EXE all the search boxes are ready for your Use, And I suggest You Guys will definitely Love It.
And Donot Forget to do some peice of Charity to Continue this Sites Fires Burning By Donating Us Some Money.
Original Source : EXE Ideas
Visit the Main Article
Warning : Don't Copy from this Post Without Linking Back to the Post
Hi! I am Dulshan, a Pro Blogger, an E-money Guider for the those who need. I have created Blogrithm and currently runs it. Helping to the People who struggle to make money from the Internet is the cause which motivate me in creating the Site. 
0 comments:
Post a Comment