Don't Miss

Add 2 Advanced Search Boxes to Blogger

By Zohaib Liaqat - 29 Comments
Few days ago, we discussed about How to Add Google Custom Search Engine to Blogger and today we're going to share 2 Advanced Search Boxes for Blogger. Search boxes are one of the most essential elements of a blog allowing your visitors to search content. It enables readers to search through all of your content and find exactly what they are looking for.

Why is it Important to Add a Search Box? Because your visitors don't have a lot of time to scroll through each and every post you've ever written. So by adding a search box, your visitors can easily search and find the content they're looking for. It is just like an internal search engine for your blog and it will also make your blog user-friendly.
Add 2 Advanced Search Boxes to Blogger
By Default, blogger has its own search box widget but its design is ugly and not attractive. Today in this tutorial we're going to share 2 advanced, clean and attractive search boxes for your blog.

Add an Advanced Search Box to Blogger

First and foremost Log in to your Blogger Account >> Select a Blog >> Click Layout >> Add a Gadget, a popup will appear with the list of gadgets. Select HTML/JavaScript gadget from the list of Gadgets. Now Copy (Ctrl+C) the below code and Paste (Ctrl+V) it in the widget code area.

Style # 1

Add 2 Advanced Search Boxes to Blogger
<style>
.search-box {
background-color: transparent;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_hI50xJMTBN-LyxMCIQ24mMMH_fsT4q88yHKlI1Q0nsi4xAMwKzDxwI0xpfCtlNQkfZ76dHHPxW9G5zFAQBh1_6DwKrruE_Z6srebO9tFSb4tVWq2tGYz0O1RxI3A0t_7OCaCug4vSwra/s1600/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
margin: 3px 0;
cursor: pointer;
height: 37px;
padding: 0 0 0 34px;
border: 2px solid transparent;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
color: #222;
font-family: Arial;
font-weight: bold;
}
.search-box:focus {
background-color: #FFF;
border: 2px solid #8E8E8E;
border-radius:5px;
cursor: text;
outline: 0;
width: 270px;
</style>
<form action='/search' id='search' method='get'>
<input class='search-box' name='q' placeholder='Search Here...' title='Click to Search!' type='text'/>
</form>

Style # 2

Add 2 Advanced Search Boxes to Blogger
<style>
.search-box {
background-color: #2aa4cf;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_hI50xJMTBN-LyxMCIQ24mMMH_fsT4q88yHKlI1Q0nsi4xAMwKzDxwI0xpfCtlNQkfZ76dHHPxW9G5zFAQBh1_6DwKrruE_Z6srebO9tFSb4tVWq2tGYz0O1RxI3A0t_7OCaCug4vSwra/s1600/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
margin: 3px 0;
height: 38px;
width:280px;
padding: 0 0 0 34px;
border: 2px solid transparent;
position: relative;
-webkit-transition: width 500ms ease, background 500ms ease;
transition: width 500ms ease, background 500ms ease;
color: #222;
font-family: helvitica;
font-weight: bold;
}
.search-box:focus {
background-color: #99E4FE;
border: 2px solid #99E4FE;
outline: 0;
width: 280px;
</style>
<form action='/search' id='search' method='get'>
<input class='search-box' name='q' placeholder='Search Here...' title='Click to Search!' type='text'/>
</form>

Click Save button and you're done.

We hope this article may have helped you in adding a Search Box to your Blog. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Tags:

29 comments to ''Add 2 Advanced Search Boxes to Blogger"

ADD COMMENT
  1. Being explicitly dynamic and amazing is the thing that all of us should be cheerful and solid, regardless of whether in a submitted relationship or out in the field.
    https://www.regalbooks.com/review/male-enhancement/male-extra-supplement/

    ReplyDelete
  2. UpToDown is a free software service that provides offline files for installation. UpToDown supports Android, iOS, Mac, Windows and Web Apps.
    https://uptodown.vip/
    uptodown
    uptodown whatsapp
    uptodown for pc
    uptodown apk download

    ReplyDelete
  3. Being explicitly dynamic and amazing is the thing that all of us should be cheerful and solid, regardless of whether in a submitted relationship or out in the field.
    tutuapp

    ReplyDelete
  4. EMERGENCY LOAN OFFER APPLY

    We Offer all types of Finance Business Personal Cash
    Quick Cash Advance. Fast Credit Check. Cash Today.
    Fast Cash Online
    low interest rate as low as 2%
    Financial Cash Available Here
    Business Personal Cash
    I'll advise All Cash seeker should contact us
    Contact Us At : abdullahibrahimlender@gmail.com
    whatspp Number +918929490461
    Mr Abdullah Ibrahim

    ReplyDelete
  5. ShareCash is the leading content locking and pay-per-download network. Register now and earn over $1.00 for every download and
    unlock.
    pay per download
    ppd sites
    upload file

    ReplyDelete
  6. In all regards likely there are particularly make blogs out there for anybody to have the decision to do the masterminding physically. PC checks experience each post on your blog with tooth brush and pick, subordinate upon the words you've utilized, what sort clearly of development your posts go under. Word News

    ReplyDelete
  7. Was ist, wenn Sie Samsung Treiber einfach herunterladen und damit arbeiten können? Samung bietet Ihnen einfachen Zugriff auf Unmengen von Dingen. Klicken Sie hier , wenn Sie die Details sehen möchten.

    ReplyDelete
  8. You completely match our expectation and the variety of our information.notepad plus plus download

    ReplyDelete
  9. The material and aggregation is excellent and telltale as comfortably.

    latest rice purity test

    ReplyDelete
  10. Excellent effort to make this blog more wonderful and attractive.

    gbwhatsapp apk file download

    ReplyDelete
  11. cool stuff you have and you keep overhaul every one of us

    rice purity test score meaning

    ReplyDelete
  12. Admiring the time and effort you put into your blog and detailed information you offer!..

    supersuapkpro.com/supersu-2-82/

    ReplyDelete
  13. Your website is great and I've enjoyed visiting it, you can see the list of streaming apps that are popular.

    ReplyDelete
  14. The next time I read a blog, I hope that it doesnt disappoint me as much as this one. download showbox free apk

    ReplyDelete
  15. It's nice to see that some people still understand how to write a quality post! how to uninstall mobdro on firestick

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. In 2002 Google dispatched something many refer to as 'AdWords' and it was anticipated to be the demise of SEO, as individuals could pay for noticeable quality, on the now the number 1 site for beginning web look. SEO Services

    ReplyDelete