Although Google crawlers like Google can easily crawl your whole site to index all your posts and pages, viewers can get access to the link in front of them. You may have hundreds or more posts / pages for your reading. You may have a different category, label, tag, related post, etc. listed on each page, but you can not provide all your data on a page. To find what they are looking for for people, they will be able to search your entire content quickly and easily.

Any visitor who comes to any page can search for whatever they want. This lets you get access to some of your hidden content which takes a lot of time by clicking on numerous pages or posts. It's easy for people to navigate your entire blog, as long as they live, they can revisit and move on to the other side, increasing your bounce rate.

Custom Search Box for Blogger

Just adding a search bar is not enough, it should always be ready to help customers and reliability according to your blog's theme. Blogger provides a fairly easy widget for it, but it does not provide a professional, stylish look on your blog, but you can use the CSSspot style Blogspot official search box widget. If your old search box does not work properly and you want to replace it beautifully, do not worry, just choose one below and follow the instructions below. The look of the design is on you, you can edit CSS according to your blog requirement.

Custom Stylish Search Box Addition Advantages

Add professional beauty to your website.
Provide basic services to customers.
Save user time.
Headers, Sidebar, Footer can be applied anywhere, such as active eStylish, Hover and Focus Effect.
Pure CSS, no pictures.
Easy customization from CSS style.
Automatically adjust width.

Custom Search Boxes For Blogger 1
<style type="text/css"> #hbz-searchbox { background-color: #F5F5F5; border: 1px solid #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>

---

Custom Search Boxes For Blogger 2
<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: solid solid solid 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>

---

Custom Search Boxes For Blogger 3
<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 solid #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 infinite alternate; border-color: #393; color: #efe; outline: none; } .hbz-submit { background: linear-gradient(#333, #222); box-sizing: content-box; border: 1px solid #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>

---

Custom Search Boxes For Blogger 4
<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 solid #0276c1; } .hbz-buttonwrap:hover { border-bottom: 5px solid #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 solid 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 solid #bbb; border-left: 1px solid #eaeaea; background-color: #fbfbfb; border-top: 1px solid #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 here ..." /> <input type="hidden" name="max-results" value="8" /></form>

---

Custom Search Boxes For Blogger 5
<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 solid 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>

---

Custom Search Boxes For Blogger 6
<style>#search-box { position: relative; width: 100%; margin: 0; } #search-form { height: 40px; border: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #fff; overflow: hidden; } #search-text { font-size: 14px; color: #ddd; border-width: 0; background: transparent; } #search-box input[type="text"] { width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; } #search-button { position: absolute; top: 0; right: 0; height: 42px; width: 80px; font-size: 14px; color: #fff; text-align: center; line-height: 42px; border-width: 0; background-color: #4d90fe; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; cursor: pointer; } </style><div id='search-box'><form action='/search' id='search-form' method='get' target='_top'><input id='search-text' name='q' placeholder='Search Box' type='text'/><button id='search-button' type='submit'>Search</button></form><div style='margin-top:10px; '> </div></div>

---

This script will help you to keep your trailer for some time

Open Your Website Or Blogger
And Create Page
So if everyone wants to download the Blogger download timer script, below you will find the, But you can easily use this script in WordPress website too. How To Use Download Timer. So below I have explained all those steps in detail, So friends Before knowing Add Download Timer in Blogger we have to know about of , If you see any tools or Widget related to online web development
And Your Content, Your Download Button Remove, And  places This Script


Main feature your free countdown timer in website or Blogger to as a countdown clock. places our countdown timer: Calculation is correct - the clock displays current time, even if the user's computer clock is wrong. There are alternatives to your DST - There are several options about how to deal with the daylight saving time (DST) with your countdown timer. Read more about calculation timers and DST. Counterdown takes into account any time zone - all major time zones are supported. It is highly configurable - select different backgrounds, text options, colors and fonts. You can choose the unit to display - up to milliseconds from day to day. No registration is required - HTML code is available immediately. Use the Script to customize your own countdown timer. A small preview window should also appear beside the form at the bottom right of your web page. You can place six clock and countdown timer on a page. If two watches / timers are used, then a separate link to pageanddate.com should be provided on the page. To use the service you must add HTML to your web page and must have tags approved in IFRM. You use the service at your own risk.


Script
<center><span id="countdown"></span></center><br /><div style="text-align: center;"><b>Download Timer</b><br /><a href="#" id="download_link" style="display: none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_CoDHPzSnjIJzQEW-IlJryvZiC40XqIILs1OFn7FYajeEasNBaucBLcfNtqW2N_HfGxkt2aqu4eaDcE7wzzlOGAwybzGgizFxzX-PhQaCmLFx0zb0gJIpoJATZvM-fC48nKi91gS2rlw/s1600/but.jpg" /></a><noscript>JavaScript needs to be enabled in order to be able to download.</noscript><script type="application/javascript">(function(){ var message = "%d seconds before download link appears"; // seconds before download link becomes visible var count = 5; var countdown_element = document.getElementById("countdown"); var download_link = document.getElementById("download_link"); var timer = setInterval(function(){ // if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed if (count) { // display text countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count); // decrease counter count--; } else { // stop timer clearInterval(timer); // hide countdown countdown_element.style.display = "none"; // show download link download_link.style.display = ""; } }, 1000); })(); </script>

3D Button
<!doctype html><html><head><style> body, html{ height: 100%; text-align: center; font-size: 40px; font-family: Ubuntu, sans-serif; } body:before, .btn { display: inline-block; vertical-align: middle; } body:before { height: 100%; content: ''; } .btn, .btn:before, .btn:after { cursor: pointer; padding: 0.5em 2em; display: inline-block; background-color: rgba(127, 157, 181, 0.6); color: #fff; border-radius: 6px; position: relative; -webkit-transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1); transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1); box-shadow: 0 0 0 rgba(0,0,0,0); } .btn:before, .btn:after { position: absolute; content: attr(data-title); z-index: -1; } .btn:before { top: -0.1em; right: -0.1em; background-color: rgba(255, 0, 0, 0.5); } .btn:after { bottom: -0.1em; left: -0.1em; background-color: rgba(0, 0, 255, 0.5); } .btn:hover { background-color: rgba(127, 157, 181, 1); box-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,0.5); } .btn:hover:before { top: 0; right: 0; } .btn:hover:after { bottom: 0; left: 0; } </style> </head><body> <div class="btn" data-title="Wibble">Wibble</div></body></html>

---

3D Button
<!doctype html><html><head><style> @charset "utf-8"; /*Button -----------------*/ button{ outline:0; font-size:1em; font-weight:600; background:#fff; border:none; padding:2em 4em; transition:all .3s ease-out; box-shadow:inset 0 -8px 0 0 rgba(0,0,0,.2), 1px 1px 0 0 #d98e20, 2px 2px 0 0 #d98e20, 3px 3px 0 0 #d98e20, 4px 4px 0 0 #d98e20, 5px 5px 0 0 #d98e20, 6px 6px 0 0 #d98e20, 7px 7px 0 0 #d98e20, 8px 8px 0 0 #d98e20, 9px 9px 0 0 #d98e20, 10px 10px 0 0 #d98e20, 11px 11px 0 0 #d98e20, 12px 12px 0 0 #d98e20; } button:hover{ color:#444; } button:active{ color:#222; box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.2), 1px 1px 0 0 #d98e20, 2px 2px 0 0 #d98e20, 3px 3px 0 0 #d98e20, 4px 4px 0 0 #d98e20, 5px 5px 0 0 #d98e20; } /*General Styling -----------------*/ body{ width:100%; min-height:100%; background-color:#FFA726; color:#eee; } main{ position:relative; margin:auto; width:100%; height:100%; text-align:center; padding:45vh 0; } </style> </head><body> <main> <button>Click Me!</button></main> </body></html>

---

Animation Button
<!doctype html><html><head><style>html, body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: skyblue; } .box { background: linear-gradient(to right, gold, darkorange); color: white; --width: 250px; --height: calc(var(--width) / 3); width: var(--width); height: var(--height); text-align: center; line-height: var(--height); font-size: calc(var(--height) / 2.5); font-family: sans-serif; letter-spacing: 0.2em; border: 1px solid darkgoldenrod; border-radius: 2em; transform: perspective(500px) rotateY(-15deg); text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2); box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2); transition: 0.5s; position: relative; overflow: hidden; } .box:hover { transform: perspective(500px) rotateY(15deg); text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2); box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2); } .box::before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(to right, transparent, white, transparent); left: -100%; transition: 0.5s; } .box:hover::before { left: 100%; } </style> </head><body><div class="box">BUTTON</div></body></html>

---

---

Share This
<center><h8 class='share-title'>Share This:</h8> <div class='share-art'> <a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img height='38' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvpX-DBlMFIFkvE6X7yy1eZrDy2eleTNH0VkUiGmUYcOaJLOC44SxBN2JenDJ_dmtM1V4UG_DfU3DIF8P1BobXZIqTj-MYayQnX5sAJGXFQK_v0iW8glmsXEUYR11-lN5erie8_V9wWpE/s1600/fb.png' width='42'/></a> <a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img height='38' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwIhCEwgcYPCJ_x7QeCKnbyIbpl7ljN_queLtjXU-eTLsLT4HPhlzr4l4iYJhRWigH47DyQqX2zAwQExU7E9E84630GS1h_1stg37J8RZa-cSiz5gkdt8rRgHDIKQH_HKMkag9XPm21Ag/s1600/t.png' width='42'/></a> <a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img height='38' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy4IhNba4GJwWTeVGpd0Q2-qPwOcWO5ApVlK-QIKtxdIfl58SYb74GSu6OdC_hbeD9nhXLLcpOmtakKdaICEe3m-UgNEMuJn7woNojYRyULE0xzPBpMnh0RdzI-toqabkdemTd4u9DobQ/s1600/G.png' width='42'/></a> <a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img height='38' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ckoAyyW4B3tdtJ_8YXwFCwKh3uMNfcr06LfIeNrKuF0yHijLrap04GklLkncDSWMYUP2SbHszDeMB1Kk8buFMxb7r2ZNTsiiIj1WJDlsir12u-nMcW1edy3x0g7p7hHP2xCBPWITSAU/s1600/p.png' width='42'/></a> <a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><img height='38' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdo-D2wYZhmDc2z-47Ggd6xcO0_jiInD7J3dRMke-l6V45XIh2jaOrn7YvGJhOzMTlvcqOUrPdAUSxpzUNLf-beqjhB40kKQxovPgR2ymMleIyVDYfue-dcZTMctgtEi5fJSuz32GOgWs/s1600/in.png' width='42'/></a> </div></center>

---

In this short article, we will provide custom social sharing links for some popular social media. Using those links you can create social sharing buttons for sharing webpage URLs without javascript.
Or Manuali Link Share
Use This Code

Facebook Custom Share Link:
http://www.facebook.com/sharer.php?u=[EncodedURL]
Twitter Custom Share Link:
http://twitter.com/share?text=[TITLE]&url=[URL]
Google+ Custom Share Link:
https://plus.google.com/share?url=[EncodedURL]
LinkedIn Custom Share Link:
http://www.linkedin.com/shareArticle?mini=true&url=[EncodedURL]
Pinterest Custom Share Link:
http://pinterest.com/pin/create/button/?url=[EncodedURL]&media=[MEDIA]
StumbleUpon Custom Share Link:
http://www.stumbleupon.com/badge/?url=[URL]
Reddit Custom Share Link:
http://www.reddit.com/submit?url=[EncodedURL]
E-Mail Custom Share Link:
mailto:?subject=[SUBJECT]&body=Check out this site [URL]

Clean Search Box 1
<style>#nbc-searchsimplebox1 { padding:10px; } #nbc-searchsimplesubmit1 { border:1px solid orange; background: orange; padding:5px; color:#ffffff; font:14px verdana; } #nbc-searchsimpleinput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #dcdcdc; background:#ffffff; padding:5px; color:#888888; font:14px verdana; } </style><div id='nbc-searchsimple1'> <form action='/search/max-results=8' method='get' id="nbc-searchsimplebox1"> <input name='q' id='nbc-searchsimpleinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='nbc-searchsimplesubmit1' type='submit' value='Search'/> </form></div>

---

Dynamic width (Expandable) Search box 2
<style>#nbc-searchexpandbox1 { padding:10px; } #nbc-searchexpandsubmit1 { border:1px solid #111111; background: #111111; padding:5px; color:#ffffff; font:14px verdana; } #nbc-searchexpandinput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #dcdcdc; background:#ffffff; padding:5px; color:#888888; font:14px verdana; transition: width 2s; -webkit-transition: width 2s; /* Safari */ -o-transition: width 2s; /* Opera*/ -moz-transition: width 2s; /* firefox*/ width:65px; } #nbc-searchexpandinput1:hover { width:200px; } </style><div id='nbc-searchexpand1'> <form action='/search/max-results=8' method='get' id="nbc-searchexpandbox1"> <input name='q' id='nbc-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='nbc-searchexpandsubmit1' type='submit' value='Search'/> </form></div>

---

Elegant green Search box 3
<style>#nbc-searchgreen1 { background: rgb(143,196,0); /* Old browsers */ background: -moz-linear-gradient(top, rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */ border-radius:10px; width:290px; } #nbc-searchgreenbox1 { padding:10px; } #nbc-searchgreensubmit1 { border:1px solid green; background: green; padding:5px; color:#ffffff; font:14px verdana; } #nbc-searchgreeninput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #ffffff; background:#ffffff; padding:5px; color:#888888; font:14px verdana; } </style><div id='nbc-searchgreen1'> <form action='/search/max-results=8' method='get' id="nbc-searchgreenbox1"> <input name='q' id='nbc-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='nbc-searchgreensubmit1' type='submit' value='Search'/> </form></div>

---

Dark black Search box 4
<style>#nbc-searchblack1 { background: #222222; border-radius:10px; width:290px; } #nbc-searchblackbox1 { padding:10px; } #nbc-searchblacksubmit1 { border:1px solid #222222; background: #dc4523; padding:5px; color:#ffffff; font:14px verdana; } #nbc-searchblackinput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #ffffff; background:#ffffff; padding:5px; color:#888888; font:14px verdana; } </style><div id='nbc-searchblack1'> <form action='/search/max-results=8' method='get' id="nbc-searchblackbox1"> <input name='q' id='nbc-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='nbc-searchblacksubmit1' type='submit' value='Search'/> </form></div>

---

White color Search box 5
<style>#MBBOldSearch { display: block; clear: both; margin: 10px 0; } #MBBOldSearch #MBBSinput { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxCdrlppSedGcpiGUBrK1GmmjqArwkrjFrrziSkom0PyViSNlCqvhjErhMWh13MFglD61lVBLZg1_H1TKcabJ_qE73S1OZ4z1RIt61VjftCdFNVuYVqJFYdIDEelZJTQhXHEO0Hej99Es/s1600/noxdo_blogspot_com_Search-icon.png) no-repeat scroll 8px center transparent !important; padding: 7px 15px 7px 35px !important; color: #444; font-weight: bold; text-decoration: none; border: 1px solid #D3D3D3 !important; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 2px #CCC inset; -moz-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; width: 52%; } #MBBOldSearch #MBBSsubmit { color: #444; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #D3D3D3; cursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); } </style> <div id="MBBOldSearch"> <form action="/search/max-results=8"> <input name="q" id="MBBSinput" type="text" /> <input value="Search" id="MBBSsubmit" type="submit" /> </form></div>

---

Stylish floating Search box 6
<style type='text/css'>/*<![CDATA[*/ #sbutton { background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed)); background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%); background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%); background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%); background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe; border: 1px solid #3079ED; border-radius: 2px 2px 2px 2px; color: #FFFFFF; height: 27px; min-width: 76px; padding: 0 21px;padding-bottom: 2px; } #sbutton:hover{ background-color: #357AE8; background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8)); background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%); background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%); background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%); background: linear-gradient(top, #4d90fe 0%,#357ae8 100%); border: 1px solid #2F5BB7; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);} #simg { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGsr2v4b8RRpb6snh-e-GbcSQjYqrfdMO03RMXRSNiaGlMHS0cjjLlMbY1pIjpXwNqxGm8qDHHjhzfogBe_cCRh-gGTpCLm4ZmRvmebH07yx71Z6HuN2d3znLNUdTiCHXsO3XMNFf6gok/s1600/noxdo_blogspot_com_Search-icon2.png) no-repeat scroll 0 0 transparent; display: inline-block; height: 14px; margin: 0; width: 17px;z-index:101; }#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;} #s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;} #s:focus {width: 200px;} .noop-searchbox { display: block; position: fixed; right: 12px; top: 1%; max-width: 300px;min-width: 238px; z-index: 100; } /*]]>*/ </style><div class='noop-searchbox' id='noop-searchbox'><form action='/search/max-results=8' id='noop-searchform' method='get'><input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/><button id='sbutton' type='submit'><span id='simg'></span></button></form></div>

---

Round corner Search box 7
<style>#search-form { background: #e1e1e1; /* Fallback color for non-css3 browsers */ width: 365px; background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225))); background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%); border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px; box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); } input[type="text"]{ background: #fafafa; background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230))); background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%); border: 0; border-bottom: 1px solid #fff; border-right: 1px solid rgba(255,255,255,.8); font-size: 16px; margin: 4px; padding: 5px; width: 250px; border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px; box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); -moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); } input[type="text"]:focus{outline: none; background: #fff; background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235))); background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%); } input[type="submit"]{ background: #44921f; background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21))); background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%); border: 0; color: #eee; cursor: pointer; float: right; font: 16px Arial, Helvetica, sans-serif; font-weight: bold; height: 30px; margin: 4px 4px 0; text-shadow: 0 -1px 0 rgba(0,0,0,.3); width: 84px; outline: none; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); -moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2); -webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); } input[type="submit"]:hover { background: #4ea923;background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); } input[type="submit"]:active { background: #4ea923;background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); } </style><form action="/search/max-results=8" id="searchbox"><input name="cx" type="hidden" value="X:Y" /><input name="cof" type="hidden" value="FORID:11" /><input id="q" name="q" size="70" type="text" /><input name="sa" type="submit" value="Search" /></form>

---

Black and white color Search box 8
<style type="text/css">#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDojdutnzAZBMk2Ea7KVvwYunU1DXVeWwaq3qzf4_8YNLBX9fHIsdhqJc8rvtmv321T9ki7m4ZFbCxSwpO2i8TcBr1Bu12LyVjQq3A-DsGKNua-2A3qFhPV-g4QqyyFSqvBrLiOd38onk/s1600/noxdo_blogspot_com_Search-icon3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#nbc-searchform{display: block;padding: 10px 12px;margin:0;} form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><div id="nbc-searchbox"><form id="nbc-searchform" action="/search/max-results=8" 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...";}'/></form></div>

---

White Search box 9
<style type="text/css">#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xzZgVcoWwKYOQjy-KJmECNBa2lXC1Ym4-hcLnWP8_4BCi7QBB3cuvAM41JTgHNcfx4fSLr5K13nqr0ldzn3_5rfq9JZKvraSb7b_lNgVbfHk19BJSUj818DngaTO1J6XhP5NstD87x4/s1600/noxdo_blogspot_com_Search-icon4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#nbc-searchform{display: block;padding: 12px;margin:0;} form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><div id="nbc-searchbox"><form id="nbc-searchform" action="/search/max-results=8" method="get"> <input type="text" id="s" name="q" value=""/></form></div>

---