গুগল কাসটম সার্চবার ৷ HTML code for Google search page | techshohag.com

 

গুগল কাসটম সার্চবার ৷ HTML code for Google search page

গুগল কাসটম সার্চবার ৷ HTML code for Google search page

আসসালামু আলাইকুম বন্ধরা 

সবাই কেমন আ‌ছেন । সার্চবার এক‌টি ও‌য়েবসাই‌টের জন‌্য অ‌নেক গুরুত্বপুর্ন, সাইট ভি‌সি‌টের পর Viewer নি‌জের প্রয়োজন অনুযায়ী কোন ফাইল যা‌তে খুজ‌তে পা‌রে তাই Search Bar ব‌্যবহার করা হয়।  আপনা‌দের সা‌থে আজ শেয়ার কর‌বো Blogspot এর জন‌্য Search box HTML code. যারা নি‌জের সাই‌টে সুন্দর এক‌টি সার্চবার এড কর‌তে চান তা‌দের জন‌্য ২ ‌টি Stylish search box in HTML.



কিভা‌বে এড কর‌বেন | How to Add Google custom search in Blogger

Google search page  এড করার জন‌্য আপনার Blogger এর Theme অপশন থে‌কে Edit HTM এ গি‌য়ে যেখানে আ‌পনি সার্চবার Show করা‌তে চা‌চ্ছেন , নি‌চের Search box HTML code টি Past ক‌রে দি‌লেই হ‌বে।



Google Search Bar Txt code STyle 1 | Free search bar for website

Google Search Bar Txt code STyle 1 | Free search bar for website


এ‌টি Simple স্টাই‌লের গুগল সার্চবার । যা আপনার সাই‌ট‌কে আকর্ষনীয় ক‌রে তুল‌বে। আপনার ই‌চ্ছামত কালার এ‌ডিট ক‌রে  নি‌তে পা‌রেন।


STyle 1


<code> &lt;style&gt;<br /> #Search {<br /> display: block;<br /> clear: both;<br /> margin: 10px 0;<br /> }<br /> #Search #input {<br /> background color: transparent;<br /> padding: 7px 15px 7px 35px !important;<br /> color: #444;<br /> font-weight: bold;<br /> text-decoration: none;<br /> border: 1px solid #D3D3D3 !important;<br /> -webkit-border-radius: 4px;<br /> -moz-border-radius: 4px;<br /> border-radius: 4px;<br /> -webkit-box-shadow: 1px 1px 2px #CCC inset;<br /> -moz-box-shadow: 1px 1px 2px #CCC inset;<br /> box-shadow: 1px 1px 2px #CCC inset;<br /> width: 52%;<br /> }<br /> #Search #submit {<br /> color: #444;<br /> font-weight: bold;<br /> text-decoration: none;<br /> padding: 6px 15px;<br /> border: 1px solid #D3D3D3;<br /> cursor: pointer;<br /> -webkit-border-radius: 4px;<br /> -moz-border-radius: 4px;<br /> border-radius: 4px;<br /> background: #fbfbfb;<br /> background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);<br /> background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), colorstop(100%,#f4f4f4));<br /> background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br /> background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br /> background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br /> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );<br /> background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);<br /> }<br /> &lt;/style&gt;<br /> &lt;div id="Search"&gt;<br /> &#160;&#160;&#160;&#160;&lt;form action="/search/max-results=8"&gt;<br /> &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;input name="q" id="input" type="text" /&gt;<br /> &#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;input value="Search" id="submit" type="submit" /&gt;<br /> &#160;&#160;&#160;&#160;&lt;/form&gt;<br /> &lt;/div&gt; </code>



Google Search Bar Txt code STyle 2 | Search icon click open search box


Google Search Bar Txt code STyle 2 | Search icon click open search box


কালারফুল স্টাই‌লের সুন্দর গুগলের এক‌টি সার্চবার।  আপনার ই‌চ্ছামত কালার এ‌ডিট ক‌রে  নি‌তে পা‌রেন। আশা ক‌রি আপনার পছন্দ হ‌বে।


STyle 2


<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>



ধন‌্যবাদ
আজ এইটুকই!  কোন সমস‌্যা ফেস কর‌লে ,ক‌মে‌ন্টে অবশ‌্যই জানা‌বেন ।  টাটা আল্লাহ হা‌ফেজ


Previous Post Next Post

Contact Form