Search Box is the basic but a necessary business office of a website. They're user convenient together with help you lot inwards increasing your website usability. They help your readers to navigate throughout your spider web log to a greater extent than efficiently. You would run across that every blogspot blogger has dissimilar stylish custom search box widget matching their template blueprint because, they were non solely help users to honour the solution of their problems to a greater extent than easily but every bit good add together a professional person await to your blog.
Whereas Web crawlers similar Google tin forcefulness out crawl your entire site easily to index all of your posts together with pages, visitors own got solely access to the links that are inwards forepart of them. You may own got hundreds or to a greater extent than posts/pages for people to read. You may own got a dissimilar category, labels, tag, related posts, etc. listed on each of your pages, but you lot cannot supply all of your information inwards a unmarried page. For people to honour what they are looking for, they bespeak to move able to search through your entire content rapidly together with easily.
Whichever page a visitor lands on, they tin forcefulness out search for what they want. This allows people to larn access to about of your hidden content that would accept much longer to honour past times clicking through countless pages or posts. The easier it is for people to navigate your whole blog, the to a greater extent than probable they volition remain together with view 1 time again every bit they tin forcefulness out switch away to another, increasing your bounce rate.
Custom Search Boxes For Blogger
Just adding a Search Bar is non enough, it should e'er move arrive at to help customers together with reliable according to the topic of your blog. Blogger every bit good provides Officially Simple widget for it, but that doesn't supply the professional, fashionable await to your blog, but you lot tin forcefulness out role CSS to Style blogspot official search box widget. If your old Search box is non working properly together with you lot desire to supplant it alongside beautiful 1 don't worry, only selection upwards 1 of the next together with follow the steps past times footstep instructions below. The await of the blueprint is upwards to you, you lot tin forcefulness out every bit good edit the CSS according to your spider web log needs.
Benefits of Adding Custom Stylish Search Box
- Add professional person looks to your website.
- Provide basic benefits to customers.
- Save user time.
- Can move applied anywhere similar inwards header, sidebar, footer etc.
- Stylish Active,hover together with focus effects.
- Pure CSS, no image.
- Easy customization from CSS styles.
- Automatically accommodate width.
![is the basic but a necessary business office of a website Today News five Stylish Search Boxes For Blogger (with Demo)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge266ucDoOjksm1q-QdXFk3ru2B21TGZZ1vOQLATT0jejBwsyVAf7jicdYFCwb1uuGW81XggidYwDA80zcdNOcVvMRIyOCmeKaCMhc9ILwQODR_TwFJT33Bv46tMalWf4nqsnxIKdbSCwo/s1600/Search-box.png" "Today News five Stylish Search Boxes For Blogger (with Demo)")
<style type="text/css"> #hbz-searchbox { background-color: #F5F5F5; border: 1px corporation #EDEDED; padding: 5px; border-radius: 10px; margin: 10px auto; min-width: 238px; max-width: 288px; } #hbz-input { background-color: #FEFEFE; border: medium none; font: 12px/12px "HelveticaNeue", Helvetica, Arial, sans-serif; margin-right: 2%; padding: 4%; box-shadow: 2px 1px 4px #999999 inset; border-radius: 9px; width: 60.33%; } #hbz-input:focus { outline: medium none; box-shadow: 1px 1px 4px #0D76BE inset; } #hbz-submit { background: transparent linear-gradient(to bottom, #34ADEC 0%, #2691DC 100%) repeat; border-radius: 9px; border: medium none; color: #FFF; cursor: pointer; font: 13px/13px "HelveticaNeue", Helvetica, Arial, sans-serif; padding: 4%; width: 28%; } #hbz-submit:hover { background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat; } </style> <form id="hbz-searchbox" action="/search" method="get"> <input type="text" id="hbz-input" name="q" placeholder="Type Here..." /> <input type="hidden" name="max-results" value="8" /> <input id="hbz-submit" type="submit" value="Search" /> </form>
<style type="text/css"> #hbz-searchbox { min-width: 250px; margin: 10px auto; border-radius: 3px; overflow: hidden; max-width: 300px; } #hbz-input { width: 59.2%; padding: 10.5px 4%; font: bold 15px "lucida sans", "trebuchet MS", "Tahoma"; border: none; background-color: #EEE; } #hbz-input:focus { outline: none; background-color: #FFF; box-shadow: 0 0 2px #333333 inset; } #hbz-submit { overflow: visible; position: relative; float: right; border: none; padding: 0; cursor: pointer; height: 40px; width: 32.8%; font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; color: #FFF; text-transform: uppercase; background-color: #D83C3C; } #hbz-submit::before { content: ""; position: absolute; border-width: 8px; border-style: corporation solid corporation none; border-color: transparent #D83C3C; top: 12px; left: -6px; } #hbz-submit:focus, #hbz-submit:active { background-color: #C42F2F; outline: none; } #hbz-submit:focus::before, #hbz-submit:active::before { border-color: transparent #C42F2F; } #hbz-submit:hover { background-color: #E54040; } #hbz-submit:hover::before { border-color: transparent #E54040; } </style> <form id="hbz-searchbox" action="/search" method="get"> <input type="text" id="hbz-input" name="q" placeholder="Search..." /> <input type="hidden" name="max-results" value="8" /> <button id="hbz-submit" type="submit">Search</button> </form>
<style type="text/css"> #hbz-searchbox { background: transparent linear-gradient(#2C2C2C, #111); border-width: 1px; border-style: solid; border-color: #000; border-radius: 4px; padding: 10px; z-index: 1; display: block; margin: 10px auto; min-width: 228px; max-width: 278px; } #hbz-input, .hbz-submit { box-shadow: 0 2px #000; font-family: 'Cabin', helvetica, arial, sans-serif !important; margin: 0px; padding: 0px; } #hbz-input { background: linear-gradient(#333, #222); border: 1px corporation #444; color: #888; display: block; float: left; font-size: 13px; height: 30px; padding-left: 4%; padding-right: 4%; width: 60.2%; border-radius: 3px 0px 0px 3px; } #hbz-input:focus { animation: glow 800ms ease-out interplanetary space alternate; border-color: #393; color: #efe; outline: none; } .hbz-submit { background: linear-gradient(#333, #222); box-sizing: content-box; border: 1px corporation #444; border-left-color: #000; color: #fff; display: block; font-size: 12px; height: 30px; line-height: 30px; position: relative; width: 30%; cursor: pointer; border-radius: 0px 3px 3px 0px; } .hbz-submit:hover, .hbz-submit:focus { background: linear-gradient(#393939, #292929); } .hbz-submit:hover, .hbz-submit:focus { color: #5f5; outline: none; } .hbz-submit:active { top: 1px; } @keyframes glow { 0% { border-color: #393; box-shadow: 0 2px #000, 0px 0px 5px #3DAD3D, inset 0px 0px 5px #1F391F; } 100% { border-color: #6f6; box-shadow: 0 2px #000, 0px 0px 8px #6bab6b, inset 0px 0px 10px #1F391F; </style> <form id="hbz-searchbox" action="/search" method="get"> <input type="text" id="hbz-input" name="q" placeholder="Search..." /> <input type="hidden" name="max-results" value="8" /> <button class="hbz-submit" type="submit">Search</button> </form>
<style type="text/css"> #hbz-searchbox { height: 40px; position: relative; min-width: 250px; max-width: 300px; margin: 10px auto; } .hbz-buttonwrap { border: none; width: 14%; height: 35px; display: block; position: absolute; top: 0; right: 0; background: #009bff; cursor: pointer; border-bottom: 5px corporation #0276c1; } .hbz-buttonwrap:hover { border-bottom: 5px corporation #bc490a; background: #d75813; } .hbz-submit { width: 35px; height: 35px; background: transparent; cursor: pointer; position: absolute; right: 50%; top: 50%; margin-top: -17.5px; margin-right: -17.5px; border: none; } .hbz-submit:after { content: ''; position: absolute; width: 8px; height: 8px; border: 2px corporation white; border-radius: 50%; left: 10px; top: 9px; box-sizing: content-box; } .hbz-submit:before { content: ''; position: absolute; height: 8px; width: 2px; background: white; transform: rotate(-35deg); top: 19px; left: 21px; } #hbz-input { height: 32px; width: 82%; position: absolute; padding-left: 4%; border: none; outline: none; right: 14%; border-bottom: 5px corporation #bbb; border-left: 1px corporation #eaeaea; background-color: #fbfbfb; border-top: 1px corporation #eaeaea; box-shadow: 1px 1px 2px #e9e4e4 inset; } #hbz-input:focus, #hbz-input:active { background-color: #fff; } </style> <form action="/search" id="hbz-searchbox" method="get"> <span class="hbz-buttonwrap"><button class="hbz-submit" value="" type="submit"></button></span> <input type="text" name="q" id="hbz-input" placeholder="Type hither ..." /> <input type="hidden" name="max-results" value="8" /> </form>
<style type="text/css"> #hbz-searchbox { height: 35px; margin: 10px auto; position: relative; min-width: 250px; max-width: 300px; } .hbz-buttonwrap { border: none; width: 14%; height: 35px; display: block; position: absolute; top: 0; right: 0; background: #444; cursor: pointer; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .hbz-buttonwrap:hover { background: #1a1a1a; } .hbz-submit { width: 35px; height: 35px; background: transparent; cursor: pointer; position: absolute; right: 50%; top: 50%; margin-top: -17.5px; margin-right: -17.5px; border: none; } .hbz-submit:after { content: ''; position: absolute; width: 8px; height: 8px; border: 2px corporation white; border-radius: 50%; left: 10px; top: 9px; box-sizing: content-box; } .hbz-submit:before { content: ''; position: absolute; height: 8px; width: 2px; background: white; transform: rotate(-35deg); top: 19px; left: 21px; } #hbz-input { height: 35px; width: 82%; padding: 0px; padding-left: 4%; border: none; outline: none; position: absolute; right: 14%; box-shadow: inset 0 2px 2px #080808; background-color: #444444; color: #fff; border-top-left-radius: 5px; border-bottom-left-radius: 5px; transition: all 0.5s; } #hbz-input:hover, #hbz-input:focus { box-shadow: inset 1px 1px 10px #000; } </style> <form action="/search" id="hbz-searchbox" method="get"> <span class="hbz-buttonwrap"><button class="hbz-submit" value="" type="submit"></button></span> <input type="text" name="q" id="hbz-input" placeholder="Search..." /> <input type="hidden" name="max-results" value="8" /> </form>Steps: How To Add Stylish Search Box Widget To Blogger
Note: Minimum sidebar width required - 250px
Step 1. Login to your Blogger account, thus become to Layout > click on the 'Add a gadget' link on the left side.
Step 2. Choose HTML/JavaScript from the pop-up window > glue the code within the empty box.
Step 3. Configuration:
- Change the value="8" for amount numbers of posts per page. Eg value="12".
Note: Make certain max-results value matches alongside your post confine on homepage.
Step 4. Press Save.
Read: How to Change Status message on search resultant page
Read: Beautiful Subscription Box widgets for blogger
Read: How to modify search results order
Done !
Now your visitors tin forcefulness out navigate your spider web log easily. For whatever issues related to higher upwards tutorial Please Comment Below. Stay Updated, Browse ! :)
Video Tutorial:
Video link: https://youtu.be/Xu_wLGMYXes
0 comments
Post a Comment