Well everyone want to boost traffic in their site and optimize their SEO. We have already posted How to Add Facebook pop up To Blogger which will help to drive the Facebook traffic to your blogger. Now we are back with something more cool, The Custom Search Bar. Well you must be wondering whats the purpose of a custom search bar for blog since they have already given a default search bar.Well the reason is Bloggers might not have products to offer, but adding a custom search gadget to Blogger can help site analytics and SEO.
Google Analytics offers a tool that will track all the searches performed by your search bar, so that you can use this data when improving your keyword usage and content choices. Google web crawlers and search engine bots will also test out phrases in these boxes on the rare occasion to make sure that all your content leads to somewhere creates a closed loop.
INSTALLATION:
- STEP 1: Log in to your Blogger Account and move to the "Layout" tab.
- STEP 2: Click on "Add a gadget" that is seen the area where you have to see them in your blog.
- STEP 3: Now, From the pop up displayed drag down to "HTML/Javascript" and click on it.
- STEP 4: Copy and paste any of the below codes into that HTML/Javascript text box.
- STEP 5: Click on save.
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtTGPgLOiUlejjq-9wTTV_b4Tl_ASM8mP4EAnaVrMcmQVJY4uinh8R-7DCeoCcwuOpGppCTVAmjC8V-KkNMd3x81R2KO7sx0ACDfDK-6ekxF_qF-55IwiqG543pZtl6CTCAqaXtZMzMXFa/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
font: bold 12px 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-IKtWisNIezAi6PMn5rS1kvlsww9cOHd9tLkJkkCe3ciYYpJ4FrcQyidosUUgzJGsHshCaKw8bcId4WtYZBb6oASsaD9KAe-GGoFwEG-1yQjn2GEQGgSJYN6p_74GqeRly1V57hoiSZX/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="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>
<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0FWEtByI-hEOsXFnvYMwsTstQL3ld1Dp3SLZDuCx_g3EoAV1W3Izq4p7OE3yMrZCWD1BQd-3k3yzh_-nFVwwBzYpFL4banqNgZSUP7OijnoniRzBy0_eV601-9r3AIEVhPJyg06qNXYoB/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuOiEc7GPn5RqzNrFk2v9SuI_xb4QLiwBi-KUwna_ssEWwOrh2TdZgHxq7HhixOjdvJkmrSnTL8bbulfTGaU9pU1eMw_HrIZ1hHOkYy9Cf1WSMNrgFquaE90AYOzcoSJoDY7JoFeXxujLf/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4UgbGew3BZ9DTIq21s_0dKhrVCCDPuwdI9FJa5TDJVrNLqUx8Ps20paDQfIDivBzNAMGtVzEXrE4YJRrl7iIilp3oRDu80q_l8t7hGSW6ki5XsyAe1c01fuPIQoYyR4ggx6jS9zwYHJSU/s1600/search-icon-hover.png);
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>
<style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4HBICozV-i42fHZm8nMoQ9R6_MPYxQ_zByn4Hw8i6ff6DGttz1-Dpyt8WOBA70Gy7PTSyCA158FTnVFe011_shHhD7YwiJ6q1t3VwvKz0O_9JPkxhlzc1VSOxpBsiQlvAu7-bk8e9f7mJ/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: 12px;
color: #828282;
width: 70%;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOZgJT35pxxOtyg7hF4GbQ3u-6pAWclx9-N8gCZemTJlPWJdHz_05-kwd218QozYCtMBFsnHAqDe7mQhpnGG5Z3j2DOGMg-NQdrIJvKnDMEPTHnu-0dMJGajPGzBXTTc0LqKBRYiGZxVGS/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYiLezZQRD81J0KXbLIqPE1oP2p8D4egfY5ldzMX1wVlU4HOsjFBysy0VSXPBExOW74vHD-js272CxphBKO36I0IIy1qjtzonDgxhAv1PFRjbzXmEgplwUn7D5mVfIcSPL_pbEceqqTdD/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYiLezZQRD81J0KXbLIqPE1oP2p8D4egfY5ldzMX1wVlU4HOsjFBysy0VSXPBExOW74vHD-js272CxphBKO36I0IIy1qjtzonDgxhAv1PFRjbzXmEgplwUn7D5mVfIcSPL_pbEceqqTdD/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>
Post a Comment