New Stylish Search Box For Blogger

Hello subtechguide, this topic New Stylish Search Box For Blogger.  Search box is a very important thing in a blog because it helps visitors to find what they are looking for? If you observe, search box not only helps visitors to reach the posts they are looking for but also help you to increase your blog page-views as by search somethings visitors actually increases your page-views. Blogger has built-in search box and can be easily added from layout > add a gadget > Search box. But it is too simple and doesn't go with stylish blogs, so here I am going to share 10 different styles of search boxes for blogger blogs along with step by step method to use them, so follow below steps and choose the search box to add it in your blog. 
                                   

How to add stylish search box to your blog:
Read more -simple Stylish Search Box For Blogger
Step 1: Go to blogger dashboard and select your blog in which you want to add stylish search box.

Step 2: Select layout in the menu on left side and click on add a gadget.

Step 3: Scroll down to Html/javascript and click on it.

Step 4: Copy code of desired search box from below:

Style 1(Responsive search box):

<section class="webdesigntuts-workshop"> <form action="/search" method="get"><input autocomplete="off" name="q" placeholder="What are you looking for?" type="text" value="" /><button>Search</button> </form></section> <style>@import url(http://fonts.googleapis.com/css?family=Cabin:400); .webdesigntuts-workshop { background: #151515; height: 100%; position: absolute; text-align: center; width: 100%; } .webdesigntuts-workshop:before { background: #444; background: -webkit-linear-gradient(left, #151515, #444, #151515); background: -moz-linear-gradient(left, #151515, #444, #151515); background: -o-linear-gradient(left, #151515, #444, #151515); background: -ms-linear-gradient(left, #151515, #444, #151515); background: linear-gradient(left, #151515, #444, #151515); top: 192px; } .webdesigntuts-workshop:after { background: #000; background: -webkit-linear-gradient(left, #151515, #000, #151515); background: -moz-linear-gradient(left, #151515, #000, #151515); background: -o-linear-gradient(left, #151515, #000, #151515); background: -ms-linear-gradient(left, #151515, #000, #151515); background: linear-gradient(left, #151515, #000, #151515); top: 191px; } .webdesigntuts-workshop form { background: #111; background: -webkit-linear-gradient(#1b1b1b, #111); background: -moz-linear-gradient(#1b1b1b, #111); background: -o-linear-gradient(#1b1b1b, #111); background: -ms-linear-gradient(#1b1b1b, #111); background: linear-gradient(#1b1b1b, #111); border: 1px solid #000; border-radius: 5px; box-shadow: inset 0 0 0 1px #272727; display: inline-block; font-size: 0px; margin: 150px auto 0; padding: 20px; position: relative; z-index: 1; } .webdesigntuts-workshop input { background: #222; background: -webkit-linear-gradient(#333, #222); background: -moz-linear-gradient(#333, #222); background: -o-linear-gradient(#333, #222); background: -ms-linear-gradient(#333, #222); background: linear-gradient(#333, #222); border: 1px solid #444; border-radius: 5px 0 0 5px; box-shadow: 0 2px 0 #000; color: #888; display: block; float: left; font-family: 'Cabin', helvetica, arial, sans-serif; font-size: 13px; font-weight: 400; height: 40px; margin: 0; padding: 0 10px; text-shadow: 0 -1px 0 #000; width: 200px; } .ie .webdesigntuts-workshop input { line-height: 40px; } .webdesigntuts-workshop input::-webkit-input-placeholder { color: #888; } .webdesigntuts-workshop input:-moz-placeholder { color: #888; } .webdesigntuts-workshop input:focus { -webkit-animation: glow 800ms ease-out infinite alternate; -moz-animation: glow 800ms ease-out infinite alternate; -o-animation: glow 800ms ease-out infinite alternate; -ms-animation: glow 800ms ease-out infinite alternate; animation: glow 800ms ease-out infinite alternate; background: #222922; background: -webkit-linear-gradient(#333933, #222922); background: -moz-linear-gradient(#333933, #222922); background: -o-linear-gradient(#333933, #222922); background: -ms-linear-gradient(#333933, #222922); background: linear-gradient(#333933, #222922); border-color: #393; box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000; color: #efe; outline: none; } .webdesigntuts-workshop input:focus::-webkit-input-placeholder { color: #efe; } .webdesigntuts-workshop input:focus:-moz-placeholder { color: #efe; } .webdesigntuts-workshop button { background: #222; background: -webkit-linear-gradient(#333, #222); background: -moz-linear-gradient(#333, #222); background: -o-linear-gradient(#333, #222); background: -ms-linear-gradient(#333, #222); background: linear-gradient(#333, #222); -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; border: 1px solid #444; border-left-color: #000; border-radius: 0 5px 5px 0; box-shadow: 0 2px 0 #000; color: #fff; display: block; float: left; font-family: 'Cabin', helvetica, arial, sans-serif; font-size: 13px; font-weight: 400; height: 40px; line-height: 40px; margin: 0; padding: 0; position: relative; text-shadow: 0 -1px 0 #000; width: 80px; } .webdesigntuts-workshop button:hover, .webdesigntuts-workshop button:focus { background: #292929; background: -webkit-linear-gradient(#393939, #292929); background: -moz-linear-gradient(#393939, #292929); background: -o-linear-gradient(#393939, #292929); background: -ms-linear-gradient(#393939, #292929); background: linear-gradient(#393939, #292929); color: #5f5; outline: none; } .webdesigntuts-workshop button:active { background: #292929; background: -webkit-linear-gradient(#393939, #292929); background: -moz-linear-gradient(#393939, #292929); background: -o-linear-gradient(#393939, #292929); background: -ms-linear-gradient(#393939, #292929); background: linear-gradient(#393939, #292929); box-shadow: 0 1px 0 #000, inset 1px 0 1px #222; top: 1px; } @-webkit-keyframes glow { 0% { border-color: #393; box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000; } 100% { border-color: #6f6; box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000; } } @-moz-keyframes glow { 0% { border-color: #393; box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000; } 100% { border-color: #6f6; box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000; } } @-o-keyframes glow { 0% { border-color: #393; box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000; } 100% { border-color: #6f6; box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000; } } @-ms-keyframes glow { 0% { border-color: #393; box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000; } 100% { border-color: #6f6; box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000; } } @keyframes glow { 0% { border-color: #393; box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000; } 100% { border-color: #6f6; box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000; } } </style>


this code create by 101helper  real article subscribe 101helper.blogspot.in

Hello Subtechguide, I hope you enjoyed this "New Stylish Search Box For Blogger." post. If you have any questions or suggestions related to this post, then comment below and share this post with your friends.

• About us
• Twitter
• Facebook
• Google+
• Latest Posts

GAURAV RAJPUT

He is a 18 years self-trained guy, a young part time blogger and Android expert from last five years. He is an Indian blogger and share useful content on this blog regularly, If you like his articles Then you can Share this blog on social media with your friends.

@YOUR-TWITTER-HANDLE

CEO & Editor, YOUR-SITE

Follow @YOUR-TWITTER-HANDLE

YOUR-NAME

+YOUR-GOOGLEPLUS-USERNAME

Latest posts by YOUR-NAME (see all)