Thursday, August 11, 2016

How to add search box to blogger (Bilingual Post)

Search Box


 Read in English    
বাংলায় পড়ুন


Step:1 First Login to your blogger account and go to your blogger dashboard। Then go to layout.

Dashboard Sidebar
Setp-2: In the pop-up window Choose HTML/JavaScript and Paste the below search box Code inside the empty box.
Add a Gadget        Html/Javascript
<style>
#searchbox {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Ac-ehUa-qJzXYHxp1KvokOq0XSjyuSFetTPCRXvAzmolI0FOuCSBIkJeP8NeLMnncQom6atjfnU6llcaNkIN30S5yUHRj60-tjWZLi9qzNusQL5EUWCaM-E97jP_8IVl8jl7-dzR8CUp/s1600/1.1.png) no-repeat;
 width: 208px;
 height: 37px;
}
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: 6px 0px 0px 20px;
 padding: 5px 0px 5px 0px;
 border-width: 0px;
 font-family: "Arial Narrow", Arial, sans-serif;
 font-size: 12px;
 color: #828282;
 width: 70%;
 display: inline-table;
 vertical-align: top;
}
#button-submit {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMU9FJo9ucZdc75BUyDQb06kFL9EIfi_Sxt8TuE_zCoscVmfuaiZvOm-Q_-2clxv0d1ikbvF9CYvUW8JAvuffJGKp9vIG2spxxPz9I1vhF7razCBq-Z_kWOuKhahnnvNsmIIsE_l6buCrg/s1600/magnifier.png) no-repeat;
 border-width: 0px;
 cursor: pointer;
 margin-left: 9px;
 margin-top: 8px;
 width: 21px;
 height: 22px;
}
#button-submit:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv0CyU1fztXO7MaIbUWkXg5QN5ML5YmqOrUfUSkLZWT9xIu1KUc4OlTEICCFXRU3CHIOq9Jr5ND_APzUvcoqe0eKnC-euVou_utUeMQwmQpC50-hR7leExWnc-Qtg3S3MnHTWNayxbezJ0/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv0CyU1fztXO7MaIbUWkXg5QN5ML5YmqOrUfUSkLZWT9xIu1KUc4OlTEICCFXRU3CHIOq9Jr5ND_APzUvcoqe0eKnC-euVou_utUeMQwmQpC50-hR7leExWnc-Qtg3S3MnHTWNayxbezJ0/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..." />
 <input id="button-submit" type="submit" value="" />
</form>
OR,
<style>
#searchbox {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTRDkQ66dgWFrQuIbjB5hmIdLX-TB9O8KAZGUpIr0Y93GTjQPmpsLtaKVsOTELE7dvJL5yJQLiIlDH-hbTxFFcDRBeCRByim9X97oechspcV7tAhaqQUdg3ZJqGYIObSnh8_fwuyNfUa-S/s1600/1.png) no-repeat;
 width: 252px;
 height: 32px;
}
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: 12px;
 color: #828282;
 width: 70%;
 display: inline-table;
 vertical-align: top;
}
#button-submit {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEZ6HbKPmxXVc3kLa39ISgdT8xLi1bOpZVHhEx0THiJuKgUHq0s02NfCXWVTqlnvxtQ2JUo2OF7QwuSSUvNjaFlpOGO-v1SNfJlibRxg8HZ9ErRZEyAsNCGDBNN6Cj02kNsC8TeQ0sFhvb/s1600/2.png) no-repeat;
 border-width: 0px;
 cursor: pointer;
 margin-left: -28px;
 margin-top: 2px;
 width: 74px;
 height: 26px;
}
#button-submit:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKq5wQ-yfgfa-whmy3tQPPoOm97j_OUYtkbDJWME9j8zMz-MAfK5E-LRW32lJHDoNaYPGZ4Qd2dtFVJZZGYHk0Yac6r3t8RwZD2GXICN2kysCmSjwK1OjcPLN5lA6QbDAALGLzNC_k_vig/s1600/3.png) no-repeat;
}
#button-submit:active {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKq5wQ-yfgfa-whmy3tQPPoOm97j_OUYtkbDJWME9j8zMz-MAfK5E-LRW32lJHDoNaYPGZ4Qd2dtFVJZZGYHk0Yac6r3t8RwZD2GXICN2kysCmSjwK1OjcPLN5lA6QbDAALGLzNC_k_vig/s1600/3.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..." />
 <input id="button-submit" type="submit" value="" />
</form>
OR,
<style>
#searchbox {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi51IzGKuP4xX3VjyOBIXzaVkw5yV5PukW5dUEwQpYFV2Zb2_6tRnQEaF0rB21rCmiTavqRwz-Mx9IfDIR-NhXSvOPEuRJoGEh9nxAcpfzJKPME6Q7zZ5oac5DR5MJM97oZI3wCzvaQDzSG/s1600/1.png) no-repeat;
 width: 250px;
 height: 42px;
}
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: 12px;
 color: #828282;
 width: 70%;
 display: inline-table;
 vertical-align: top;
}
#button-submit {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwg5Hyq2tnVzftug2MgwRNym2Z2-RVcTDB65PNnj3giV8N68UaOw4beHu7OAZUpkJJvlIe1mudPqa4aRUVuVN4BeeXSlEjk1T4aS2UmberZ_tf7RGD4L6XUBrdEvEfKVAPSc1YhyLQPh8y/s1600/2.png) no-repeat;
 border-width: 0px;
 cursor: pointer;
 margin-left: -43px;
 margin-top: -1px;
 width: 90px;
 height: 38px;
}
#button-submit:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWjZFhnuQs9uqWLsr7TYfHdTE1O60OrBzgybSLbhVxzaY1RWH2sKOSQJLHbf8iLE1CLdABOOqR76y1LBCrX_0jbg4NLS2P3JvsnXDURCpnReExD9N69iXDCHqBajMo2X9nhydGKasElQig/s1600/3.png) no-repeat;
}
#button-submit:active {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWjZFhnuQs9uqWLsr7TYfHdTE1O60OrBzgybSLbhVxzaY1RWH2sKOSQJLHbf8iLE1CLdABOOqR76y1LBCrX_0jbg4NLS2P3JvsnXDURCpnReExD9N69iXDCHqBajMo2X9nhydGKasElQig/s1600/3.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..." />
 <input id="button-submit" type="submit" value="" />
</form>
OR,
<style>
#searchbox {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmuUsSToGIXvuKKYi-fV4JoE_bN501ChFjXKcxMMlQq4YsqJoHVOJOhq-d1pTW9CFKz9mg3L8TaYcryQPddB2TXO3n5iXo1YvBcw_I1HVW8KrKx7qf6ElZzhmaFF5nUuCMh3WC8xO_7TzQ/s1600/1.4.png) no-repeat;
 width: 271px;
 height: 50px;
}
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: 11px 10px 0px 22px;
 padding: 5px 0px 5px 0px;
 border-width: 0px;
 font-family: "Arial Narrow", Arial, sans-serif;
 font-size: 12px;
 color: #828282;
 width: 70%;
 display: inline-table;
 vertical-align: top;
}
#button-submit {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUMCql_gi4-bGiWIpgu0IsKaeJb-eIyxXhbKjeLoltWE7v1VzsuOMSupo8ySD9j1GJAfjrJlIvOF5SCqO-KvRHZmWLn8a88F-arFiYOJrZiCE5alN3kU1v4CE7URHiRfmg28CKYTqYDawF/s1600/2.png) no-repeat;
 border-width: 0px;
 cursor: pointer;
 margin-left: -25px;
 margin-top: 5px;
 width: 64px;
 height: 38px;
}
#button-submit:hover {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm7Jk8gqQ79bRI93RiXEGr5uqoS9HMQWPbUe0rnz0mNY1BgzUlA8YxF8QPxeUkzvNw3eHaBNqNuAsgN8eiJ0Mt47JVlV-XPU9I75DcQN2jYw6etMYYGUG2QYIhZrRyqa0JHIq2jtOfGPkb/s1600/3.png) no-repeat;
}
#button-submit:active {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm7Jk8gqQ79bRI93RiXEGr5uqoS9HMQWPbUe0rnz0mNY1BgzUlA8YxF8QPxeUkzvNw3eHaBNqNuAsgN8eiJ0Mt47JVlV-XPU9I75DcQN2jYw6etMYYGUG2QYIhZrRyqa0JHIq2jtOfGPkb/s1600/3.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..." />
 <input id="button-submit" type="submit" value="" />
</form>
OR,
<style>
#searchbox {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2u8vdbPKW6J0Si1_2_zkQA6C71FqvvgHPyyG6HAomdWj2Ls41d_qYrnpSMJreM_nZsuFnBge7gSxwDe-Ib9Kk3Y_OyvhZH0oKA7AdaXshg0XZeFaI2AomzzDoHFjjnBgpk-DDf4TXKaR3/s1600/searchboxpsddesign23.png) no-repeat;
 width: 285px;
 height: 50px;
}
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: 11px 10px 0px 22px;
 padding: 5px 0px 5px 0px;
 border-width: 0px;
 font-family: "Arial Narrow", Arial, sans-serif;
 font-size: 12px;
 color: #828282;
 width: 70%;
 display: inline-table;
 vertical-align: top;
}
#button-submit {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8VLfSw-uotQXaJP4HQWIosXXK5fs6EOF-uFzUZtSQ84rvwXuyifWXfVjIWH1Hf0sRAND0CAgYTaqsK4YGwjVPWXzei4Bwn9x265ahpnnXreOyLH4k6fGosgSdbJpW8cOrjGtFEt1Cn0Y8/s1600/2.png) no-repeat;
 border-width: 0px;
 cursor: pointer;
 margin-left: -25px;
 margin-top: 10px;
 width: 64px;
 height: 27px;
}
#button-submit:hover {
 background: url(http://3.bp.blogspot.com/-tE9engUq47U/VV67pWPHjavascript:void(0)lbI/AAAAAAAAArE/JvuGT9yQ2k0/s1600/3.png) no-repeat;
}
#button-submit:active {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOZYvG6DAMUFbWxWS41i_ODcWTRssceEB6p87MtYu16zbjVhek9yXfNze11fFo2VbjiAPihNgh09td0oy51nNbMe-_6LTXou3si7EL5IkvYoeP1rFlfBeGlGe1YHSKrXKfvG0a3IY3fQL3/s1600/3.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..." />
 <input id="button-submit" type="submit" value="" />
</form>
Step-3: Now Click on the Save Button।









Posted by at Labels: , ,

No comments:

Post a Comment

author
Rocky
Search the world's information, including webpages, images, videos and more. Search Bd has many special features to help you find exactly what you're looking for.
© Search BD All Rights Reserved. Created By ThemeXpose