Don't Miss

Add 2 Advanced Search Boxes to Blogger

By Zohaib Liaqat - 44 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(http://1.bp.blogspot.com/-KI9IYKZgm7o/VGgnoLoE24I/AAAAAAAAF_4/j9YoqYMxwkE/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(http://1.bp.blogspot.com/-KI9IYKZgm7o/VGgnoLoE24I/AAAAAAAAF_4/j9YoqYMxwkE/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:

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

ADD COMMENT
  1. Excellent and decent post. I found this much informative, as to what I was exactly searching for. Thanks for such post and please keep on sharing with us.hotele , sprawdz rowniez hotele w górach

    ReplyDelete
  2. 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
  3. Hi, I am Anirudh. I am a techno blogger. Are you looking for some really good smart watches. Click the link to know more about best smartwatch in india under 5000.

    ReplyDelete
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. This is also a very good post which I really enjoyed reading. It is not every day that I have the possibility to see something like this..
    showbox

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

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

    latest rice purity test

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

    gbwhatsapp apk file download

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

    rice purity test score meaning

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

    supersuapkpro.com/supersu-2-82/

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

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

    ReplyDelete
  18. SSC Result knocking at the door. Students are waiting for their SSC Result 2020. The previous year, SSC Result was started on 2nd February and continue a minimum 1 month. This year, SSC Examination was started on 3rd February 2020. Bangladesh Education Minister Dipu Moni Announemnet SSC Result Date. This year SSC Result 2020 will publish on 2nd week in May. On the same day and same time Dakhil Result 2020 and SSC Vocational Result 2020 will publish. All students will collect their Results from the Bangladesh Education Board official website.

    ReplyDelete
  19. Are you searching SSC Result 2020 publish date? Great news for all SSC students. Bangladesh Education Board declared the SSC Result 2020 Date. This year SSC Result will publish on 10 May 2020. Students will collect the SSC Results from the Education Board website. We also shared SSC Result checking all details on our website and also shared SSC Result 2020 Marksheet download process.

    ReplyDelete
  20. Bangladesh Education Board declared SSC Result 2020 Date. SSC Result is coming soon. SSC Result 2020 will publish on 10 May 2020. All candidates will get their Result Various ways such as online and Mobile SMS. Also all student will check their result and SSC Result 2020 Marksheet on our website.

    ReplyDelete
  21. HSC Examination was completed few days ago. Now HSC Result is the trending topic in Bangladesh. All candidates will check their HSC Result 2020 from Bangladesh Educational official website at educationboardresults.gov.bd.

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

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

    ReplyDelete
  24. it's really nice and manful. it's really cool blog. Linking is very useful thing.you have really helped lots of people who visit blog and provide them use full information. Exclusive High Authority Dofollow Off-Page Backlink Bog Comments

    ReplyDelete
  25. 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