Stylish search Box ko Blog ya Website me kaise add kare

3

Stylish Search box website me ek eham bhumika nibata hai.jeh visiters ko website me content search krne me help karta hai.seach box kisi special content find krne me Admin & Visiters ki help krta hai.

Kisi ne theek hi kaha hai:-

 


         IN THE WORLDS OF WEB DESIGNS THERE IS  UNSPOKEN RULE SAYS,EVERY BLOG OR WEBSITE SHOULD HAVE SEARCH BOX


Dosto chaliye jante hai kaise stylish Search Box add karte hai apni Website/Blog me.

stylish search boxApne blog ke dashboard me jaye, Layout per click kare. yaha per apko search box lgana ho waha per ADD GADGET per click kare. ek window open hogi.usme HTML/JAVA SCRIPT per click kare.


Also read: Blog ya Website ke liye stylish Search Box


Title ko blank chhod de & content me neeche diye gye CSS/HTML codes ko save karle..jo b apko pasand ho har code k uper image rakhi ha .jaisa k apke blog me show hoga.

<style>#searchbox {width: 240px;}#searchbox input {  outline: none;}input:focus::-webkit-input-placeholder { color: transparent;}input:focus:-moz-placeholder { color: transparent;}input:focus::-moz-placeholder { color: transparent;}#searchbox input[type=”text”] {background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border: 2px solid #f2f2f2;  font: bold 14px Arial,Helvetica,Sans-serif;  color: #6A6F75;  width: 160px;  padding: 14px 17px 12px 30px;  -webkit-border-radius: 5px 0px 0px 5px;  -moz-border-radius: 5px 0px 0px 5px;  border-radius: 5px 0px 0px 5px;  text-shadow: 0 2px 3px #fff;  -webkit-transition: all 0.7s ease 0s;-moz-transition: all 0.7s ease 0s;-o-transition: all 0.7s ease 0s;  transition: all 0.7s ease 0s;}#searchbox input[type=”text”]:focus {background: #f7f7f7;border: 2px solid #f7f7f7;width: 200px;padding-left: 10px;}#button-submit{background: url(http://3.bp.blogspot.com/-AdpPwxQzxRQ/VQGGkmYc75I/AAAAAAAAANk/6moDe_NLLRo/s1600/slider-arrow-right.png) no-repeat;margin-left: -40px;border-width: 0px;width: 43px;height: 45px;}</style><form id=”searchbox” method=”get” action=”/search” autocomplete=”off”><input name=”q” type=”text” size=”15″ placeholder=”Search here…” /><input id=”button-submit” type=”submit” value=” “/></form> – See more at: http://www.bloggerseotips.com/2015/03/add-beautiful-search-box-widget-for.html#sthash.qXjLto60.dpuf
 
 <style>#searchbox {background: url(http://3.bp.blogspot.com/-g-zH25_DoxI/VD1BuatkgII/AAAAAAAAAgc/00hxspfvv3s/s1600/searchbar.png) no-repeat;width: 208px; height: 29px;}input:focus::-webkit-input-placeholder { color: transparent;}input:focus:-moz-placeholder {color: transparent;}input:focus::-moz-placeholder {color: transparent;}#searchbox input { outline: none;}#searchbox input[type=”text”] { background: transparent; margin: 3px 0px 0px 20px;padding: 5px 0px 5px 0px; border-width: 0px; font-family: “Arial Narrow”, Arial, sans-serif;  font-size: 15px;   color: #828282;  width: 70%;display: inline-table;  vertical-align: top;}#button-submit { background: url(http://4.bp.blogspot.com/-OcDQ6Z9ojlQ/VD1KnwJjFOI/AAAAAAAAAgs/cu_pKN6bpL8/s1600/magnifier.png) no-repeat;  border-width: 0px;  cursor: pointer;  margin-left: 10px; margin-top: 4px;   width: 21px;  height: 22px;}#button-submit:hover {  background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;}#button-submit:active {    background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat; outline: none;}#button-submit::-moz-focus-inner { border: 0;}</style><form id=”searchbox” method=”get” action=”/search” autocomplete=”off”> <input name=”q” type=”text” size=”15″ placeholder=”search here…..” />  <input id=”button-submit” type=”submit” value=”” /></form> – See more at: http://www.bloggerseotips.com/2015/03/add-beautiful-search-box-widget-for.html#sthash.qXjLto60.dpuf



 <style> #searchbox { width: 280px; background: url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/s1600/search-box.png) no-repeat; } #searchbox input {     outline: none; } input:focus::-webkit-input-placeholder {     color: transparent; } input:focus:-moz-placeholder {     color: transparent; } input:focus::-moz-placeholder {     color: transparent; } #searchbox input[type=”text”] { background: transparent; border: 0px; font-family: “Avant Garde”, Avantgarde, “Century Gothic”, CenturyGothic, “AppleGothic”, sans-serif; font-size: 14px;     color: #f2f2f2 !important;     padding: 10px 35px 10px 20px;     width: 220px; } #searchbox input[type=”text”]:focus { color: #fff; } #button-submit{ background: url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat; margin-left: -40px; border-width: 0px; width: 40px; height: 50px; } #button-submit:hover { background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png); } </style> <form id=”searchbox” method=”get” action=”/search” autocomplete=”off”> <input name=”q” type=”text” size=”15″ placeholder=”Search here…..” /> <input id=”button-submit” type=”submit” value=” “/> </form> – See more at: http://www.bloggerseotips.com/2015/03/add-beautiful-search-box-widget-for.html#sthash.qXjLto60.dpuf
Dosto jaise k uper code k sath imsges di h..apko jo b acha lage try kijiye. Agar apko j content acha lgaa ho toh jrur comment kre..agar apko koi problm ati hai toh be muje jrur bataye..aldi hi me stylish Search Box ki or b post daal dunga.

Hi Guys, Welcome to HarpreetKumar.Com I’m Harpreet Kumar, a professional Hindi blogger from Punjab, India. On this blog, I’m going to provide you exclusive fresh & usefull content about SEO, Adsense, WordPress, Blogger, Making Money & Internet related all other topics etc.

3 COMMENTS

LEAVE A REPLY