Join Our Telegram Channel Contact Us Join Now!
Home
Blog Design
Tips And Tricks 1

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/AVvXsEg7giyilBu33SdQLomA2TymlcBSNNwEguwAGA-Q0BYvIlMa-HJM0JEcPuvO4R0FQkMNq3Q2pBUFdnv6C6H7N_DzrvYO42w2aYZWRD7WUCmW9EfleShwobWHfazGyEqQxXYuM8rw2Y79T0Zy/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/AVvXsEigHis5DQ-bJc7U_aPP2mtAgpfleoIS4m-PF_ZsV6WkszW9i3X03QeOKa1UESbZIQx_CVbYrcpDN4ucKzSArDt9aAvvFmdOnvBS1E5WaWdBQYI1NGgoJebjZEgSkJoWtHfsp4DAgI-Vhk1v/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/AVvXsEiNQRQS04bMjako_oej4iPwOwaj5XKR-s154I39ZOvtvDmqLwsvTFQdUiIUWoyovPYr65G_sQpbHQ-u84Mf-xi6rGbN2skf2cd2jfC-XTGZAvVOnmXgrqh_Dm7WcYqXbKY-oHFUrIjuB7R_/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQRQS04bMjako_oej4iPwOwaj5XKR-s154I39ZOvtvDmqLwsvTFQdUiIUWoyovPYr65G_sQpbHQ-u84Mf-xi6rGbN2skf2cd2jfC-XTGZAvVOnmXgrqh_Dm7WcYqXbKY-oHFUrIjuB7R_/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/AVvXsEhmMGTeSLF8x65Tf5E2JBRO0CgtUTnz2S9g7Byd1d4pCzjolxqXrRU5LAp_Yuudv-eL7Y9dWZVqgVx8mRyXT0EsDbcfycH8v-0kZxahmMaq4ZzrR8OmObIxsZBbMYMfBkT9ceP3YkVnjPKq/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/AVvXsEikiw0cWr1PN2uuGn_jOKHO06GwT9Ok4upYBir_EqI46FD2uO79ImAMnpS9pcpQIMl8IF4XGB8ODObez4u4ncl5kOvTsm2jWpoBAMzciZ6FEMo4BeOQi_obLLvuy4YnHtDwROKBgsYe7Msb/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/AVvXsEiNHJAB98lNZq5LGKGi3R53Upv_JJg-yAY9rqyxGOq9lq76pzrCLZSaQaNjODK_NKstZhpnY9No8d9I_ouPK04QiNcVqGXngdyepIacMqsR1kKqPux51ooG2erM-OibaaxI6z8QXuEsXafU/s1600/3.png) no-repeat;
}
#button-submit:active {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNHJAB98lNZq5LGKGi3R53Upv_JJg-yAY9rqyxGOq9lq76pzrCLZSaQaNjODK_NKstZhpnY9No8d9I_ouPK04QiNcVqGXngdyepIacMqsR1kKqPux51ooG2erM-OibaaxI6z8QXuEsXafU/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/AVvXsEh9QeuClTus0Oai9o2wIA-h0edpIPF1lb3t09rweReUNB6wOvit61aqPYiWyxbqNrVxdO5IkSeyma9nHgtDjPGzDKmBEL_zPt_m9aG7mM9wo5rsjuy1LmpaVxVT60uGurmvZD9DbbvRXinI/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/AVvXsEiK6UtSTy_fWFOdeGO7-oUbBvL-QEJ10Z3VHohD3jZ8h3hM5837_7JsNhZ7_4Vfg3fzwp1ClN9PQP1h3w1sB1lcsu7gd6zjGXvcSyYaYKwm0bG_aMhRdBXP8D4xFKi7vhcnhxsJ6eSfS160/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/AVvXsEhOAQ_amRAqG2FjS5s7a2Ed3zP-SsVLzEaTbzmj9Zuwpoa6Lo3Zh_eSQKHQUqJRsjYE20SmKysrRptTCTZ2ghiyHgXFlG3Kyq-izJaIXFys4O-7RnCYLgFL7tDeJ6brMxhgp8RCJaQHsL5x/s1600/3.png) no-repeat;
}
#button-submit:active {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOAQ_amRAqG2FjS5s7a2Ed3zP-SsVLzEaTbzmj9Zuwpoa6Lo3Zh_eSQKHQUqJRsjYE20SmKysrRptTCTZ2ghiyHgXFlG3Kyq-izJaIXFys4O-7RnCYLgFL7tDeJ6brMxhgp8RCJaQHsL5x/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/AVvXsEi5YjPtdcxmv5xTeF8q_3_C3NfcEWuMH5exhv455PHb2xnH27HMKWmwEBTnTUEN8FIzCovzgNpajMmDsxaGlbSo5Xakr04P0Z1P6Gde3eDvoRwudMGu-5MqwpmfdtoIEfwCUV5K9uW5nfOL/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/AVvXsEgOJVtPSzsUvsgTM7CB42DmdS_T8ALw1OdJwyBuW-psIYDYrX4CrxPHrUW3ZtivRQstZUW14J0xsWV-peYrOx1B6e-8DS1IWfNXliMU6l6zcnPsmR6HEWaGPltw7cmhi2-2II1Pox8TQtsJ/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/AVvXsEiz-p60Khp3wUBAC4Di_9CwFELkAzN9fvuW4bjkso-OmfoRxAhgujqS0vCBbyG8HvCv1KVPkFeURxu6fviZrjTIccr3C9jynfexPNMG2MZDoild8rvoFMneC7EN1CV6wztcin1c1q_GBbgg/s1600/3.png) no-repeat;
}
#button-submit:active {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-p60Khp3wUBAC4Di_9CwFELkAzN9fvuW4bjkso-OmfoRxAhgujqS0vCBbyG8HvCv1KVPkFeURxu6fviZrjTIccr3C9jynfexPNMG2MZDoild8rvoFMneC7EN1CV6wztcin1c1q_GBbgg/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/AVvXsEiUQTGOzV4SYwwyc3xO4e2smIrkIiRpNsyxaqxeJbIJRuSaD7VVBHAQzQ8v3IGLOPedlChHl_4ReDiACmhs67tRd71KfdJdMkAoDaJDzxl4V1eJMiiuAKiFfBT9H86YJl35ncYlk-R7izg3/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/AVvXsEh_GFPuwpLkh4DE4SUP6uMhtukch9exrg3bW-_VsOU0eRJ8hNW-LgeVHfEn-IvaFzmyVu1W_-XnQiLEKZGRM8fy21VkJ7gY2dzCofJPmz9pppFkdDF_vyPJbzV02wy5id_ncIXvRus_8ErL/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/AVvXsEjhyUmpReYi8hhkMF6uN1p6XkWGkLxijkiNlR7101yIToanzvEB9zTBzrp9F3TU_exoBT3WScbOSbYTrotPjyoPyesBwSDeqDi4f3b0-vWiOKz1Cp9wfqaHnbAowd2QA8ByYnLCK1W4oyLA/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।









Rate this article

Loading...

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Lantro UI, you agreed to use cookies in agreement with the Lantro UI's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.