ADD cool SEARCH BOXES TO BLOGGER




search box css  




Hi! Everyone,I NOW GONNA SHOW TO HOW TO ADD cool SEARCH BOXES TO BLOGGER

DEMO PREVIEW










  • Login to Blogger Dashboard -> Design tab -> Page Elements .






  • Click on Add a Gadget where you wish to place Search Box.






  • Choose HTML/JavaScript from the List.






  • Place any one Search Box code in to it and Save the Gadget.







  • search box style1
    <style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilzXq-LNcuE1QxoBioiVf6LQsFniASYk6W0vMMbF-LlqtIGr7GWRk2IG-2ssZNXPit_OziH6381SSxsQzKyFhKsfL47cpXfELYEIQgUtnA0jr21f1LrD7sRxtJsjQOt77wQecCc5nKrUk/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>







    • search box style2
    <style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig1G8s8UHKYL6lQAlIcw60StOwwrGxUz83OjACMtr7Vl9G1vABFAuR2l-qmAVayYM6gmBiU2JpEYfo7j0Mj6JpnASEffcrNjpGf4A14w1kKMbopQkx-PrBZkx4nB8DLltHte43uu5_hEJy/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
    search box style3
    <style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr0WlobaNPzsVJSIxjXHFEARvwignRMIoLVtRwpz4nB3WFNhLw7LlNvh_Gyw-hGReOmQP3ogC02FH6ELQgB5AqxN0mxVth5xA2KFu5LtKxTxrfM9RttNyFGHWYiq47pIBKo2Ipa-FmoQ22/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

    search box style4
    <style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzxeoE8XFTb-hOcTYwPWj5_55bTt4WfHn3gWBjSKQct74eMNu_9xG2D1-Kxz3e00gMr0pffoS3a0d3nlz52v1CjZz_F-tNi4anDUe9eFzOjb2FBGp9sn5nBdFVqYI-kyi33XJpp44pS6Bu/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

    search box style5
    <style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoiGNk0Vmf6Ap-E62IiLdJEZUOldKqs-EI43jswxRj3ENk_6nGHhYoaRRouk2RK5d6WoOB5RzzjweUfCXdfj9iR6oDGTobmpUqiRle3hoo-_gyBk44A6dcTjb7KXxgyZiKho0s5oHVJM_e/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

    search box style6
    <style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij7-Agm9G8nBJR-2msfvibpJbBXNpqL3NPmlofEX_NmGOyOWnDHqu8k1uHEoMOjPV9JLpZrgWhGDXXwsWMJs4rNdAWANfQm2cNUMMI5MWaxzZih9-TI414NrJ76wW_nY2SoHIdTXCcugzp/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>






    these search boxes will not show any search ads. (don't worry)
    i recomment you that not try tricks on the blogger posts blody html codes
    coz they may sometimes become slow down your blog
    also ther's no differents between the blogger official search box and this.
    dont use any third party servers morethan 2 between the posts


    no forther causes
    enjoy
    dont worry about anything. BUT just check out google rules and regulations

    I had checked out these stuffs.and i realise that if you work hard on your blog posts you will get what you are aiming.(am sure)
    you can also check out blogger stuffs in this blog to make blog more cozy


    to do as google guys says
    Always make your readers cheer. other than suffering them with ads.
    i also recomment to give readers miximised freedom


    Facebook has recently added the ability for its users to "Like" just about any content on the web and have that activity posted to the users' walls. This facility lets you share content more readily and also gives you an idea of how some of your readership traffic is responding to your content.
    This article provides step-by-step instructions on how to add the "Like" button to your Blogger (BlogSpot) blog, one of the more commonly used blogging services.






    VIDEO DOES NOT EXISTS, SORRY (DOTHESTUFF.)
    SHOOT A COMMENT,
    Labels:

    Latest posts.