• ABOUT
  • CONTACT
  • PRIVACY
  • SITEMAP
  • OFFICE
  • DOWNLOADS

টেক রাজ্য

বাংলা ভাষায় প্রযুক্তির রাজ্যে

Menu
  • HOME
  • Tech News
  • Create Blog
  • Blog Design
    • Sub-Menu 1
    • Sub-Menu 2
      • Sub Sub-Menu 1
      • Sub Sub-Menu 2
      • Sub Sub-Menu 3
      • Sub Sub-Menu 4
      • Sub Sub-Menu 5
    • Sub-Menu 3
      • Sub Sub-Menu 1
      • Sub Sub-Menu 2
      • Sub Sub-Menu 3
      • Sub Sub-Menu 4
      • Sub Sub-Menu 5
  • Blogger Widget
  • Computer
    • Sub-Menu 1
    • Sub-Menu 2
      • Sub Sub-Menu 1
      • Sub Sub-Menu 2
      • Sub Sub-Menu 3
      • Sub Sub-Menu 4
      • Sub Sub-Menu 5
    • Sub-Menu 3
      • Sub Sub-Menu 1
      • Sub Sub-Menu 2
      • Sub Sub-Menu 3
      • Sub Sub-Menu 4
      • Sub Sub-Menu 5
Home Blogger Widgets Blogger's two unique Search Box Widgets

Saturday, June 09, 2018

CEO

Blogger's two unique Search Box Widgets

  CEO      Saturday, June 09, 2018     Blogger Widgets      No comments   
Each blog or website must have a Search Box. No type of website without search box will be full. For this, Blogger has the option to add their own search box by default, so that anyone can easily add a search box. But there is no type of design that has been placed by the blogger's own design box. In a word, it is an old model's search box. In today's post, I will discuss how to add a custom search box to Blogger. In this post, I will discuss two unique Search Box, which will be two search boxes, different designs. You can add these two search box to any type of blog. Besides, you will not have to worry about coding any type of search box. Without any modifications, just copy paste the search box into your blogger's blog.

How to add:

  • First log in to your Blogger account.
  • Then click on Layout from the Blogger Dashboard.
  • Now click on Add Gadget from right side layout.
  • Then click on HTML / JavaScript.
  • Now copy the code below and paste it into the HTML / JavaScript box

Unique Blogger Search Box
[code start] <style>
#searchbox {
 display: block;
 clear: both;
 margin: 10px 0;
}
#searchbox #input {
 background: url("https://1.bp.blogspot.com/-WljTAWmd9ag/VTR2bChJy5I/AAAAAAAAEJc/S4gLEMHX8vE/s1600/Search.png") no-repeat scroll 8px center transparent !important;
 padding: 7px 15px 7px 35px !important;
 color: #444;
 text-decoration: none;
 width: 130px;
 font-size: 12px;
 font-family: "Arial Narrow",Arial,sans-serif;
 border: 1px solid #4C9ED9;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow: 1px 1px 2px #CCC inset;
 -moz-box-shadow: 1px 1px 2px #CCC inset;
 box-shadow: 1px 1px 2px #CCC inset;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox #submit {
 color: #444;
 font-weight: bold;
 text-decoration: none;
 padding: 6px 15px;
 border: 1px solid #4c9ed9;
 cursor: pointer;
 width: 65px;
 height:31px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 background: #fbfbfb;
 background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
 background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
 background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>

<div id="searchbox">
 <form action="/search" autocomplete="off">
  <input id="input" name="q" type="text" size="15" placeholder="search..." />
  <input id="submit" type="submit" value="Search" />
 </form>
</div> [code end]

Unique Blogger Search Box

[code start] <style>
#searchbox {
    background: #FFFFFF;
    width: 245px;
    height: 29px;
    border: 2px solid #4c9ed9;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
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: none repeat scroll 0% 0% transparent;
    margin: 2px 0px 0px 20px;
    padding: 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow",Arial,sans-serif;
    font-size: 12px;
    width: 75%;
    display: inline-table;
    vertical-align: top;
    color: #000;
    border-right: 1px solid;
}
#button-submit {
    background: url('https://4.bp.blogspot.com/-SDJMUugR4A0/VTR2azxncjI/AAAAAAAAEJY/qCTew3cf78c/s1600/Blue.png') no-repeat scroll 0% 0% transparent;
    border-width: 0px;
    cursor: pointer;
    margin-left: 9px;
    margin-top: 6px;
    width: 21px;
    height: 22px;
}
#button-submit:hover {
    background: url(https://4.bp.blogspot.com/-AYxiudNOvpg/VTR2a_JY6ZI/AAAAAAAAEJg/w3Ek0r0egEY/s1600/Red.png) no-repeat;
}
#button-submit:active {
    background: url(https://4.bp.blogspot.com/-AYxiudNOvpg/VTR2a_JY6ZI/AAAAAAAAEJg/w3Ek0r0egEY/s1600/Red.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> [code end]


  • To change the height or width of the search box, you can change it to be the red part.
  • Finally, click Save.
Admin

About Writer
Nothing to say
Follow her @ Twitter | Facebook | Google+

পোষ্টটি শেয়ার করুনঃ
Tweet Share Share Share Share Share

Related Posts

← Newer Post Older Post → Home

0 comments:

Post a Comment

It can be commented that the post was good. You can also comment on any problem. We will try to solve as much as possible.

The Tech Passion

Date & Time

Current local time in
Bangladesh

  • Popular
  • Comments
  • Archive

Popular Posts

  • ব্লগারে একটি আকর্ষণীয় HTML Sitemap Page তৈরী করে নিন
    হ্যালো বন্ধুরা, TechRajjo.Com – Create Your Own Creativity তে আপনাকে স্বাগতম । কেমন আছেন সবাই ? নিশ্চয় ভালো আছেন । আর ভালো আছেন বলেই হয়ত...
  • Create your own professional blog (Part - 09)
    You may know that the easiest platform to create a blog for personal or business purposes is Google's Blogger. It is very easy to cre...
  • How does credit card work?
    It is very close to taking credit cards from the bank or getting a micro credit or bank loan from the rural bank. A little bit of credit c...

Blog Archive

  • ►  2019 (28)
    • ►  July (5)
    • ►  June (12)
    • ►  May (7)
    • ►  April (3)
    • ►  February (1)
  • ▼  2018 (107)
    • ►  December (2)
    • ►  November (18)
    • ►  September (15)
    • ►  August (25)
    • ►  July (14)
    • ▼  June (18)
      • An interesting Email Subscription Form widget for ...
      • Change blogger post url after published posts in y...
      • How to Add Floating Social Media Sharing Buttons i...
      • How to add the Facebook Page Plugin Widget to the ...
      • How to add automatically "Guest Author Box" to the...
      • Add attractive header to Social Media Icons
      • How to use font awesome icon in blogger ?
      • How to index blog posts in search engine quickly ?...
      • Blogger's two unique Search Box Widgets
      • Create an interesting HTML Sitemap page in Blogger...
      • Adding to the blog Scrolling Facebook Popup Like B...
      • Add a Stylist Page Number Navigation to the blog
      • Recently 10 Important Google SEO Tips
      • Add Facebook and Blogger Multi Tab comment system ...
      • How to add facebook comment box in blogger ?
      • How to add the Back to Top button to the blog?
      • How to make SEO blog post title useful?
      • How to give Rollover Effect to the two blog posts?...
    • ►  May (3)
    • ►  April (2)
    • ►  March (6)
    • ►  February (1)
    • ►  January (3)

Featured Post

WordPress.Com এবং WordPress.Org এই দুই এর মধ্যে পার্থক্য কি ?

হ্যালো বন্ধুরা, TechRajjo.Com – Create Your Own Creativity তে আপনাকে স্বাগতম । কেমন আছেন সবাই ? নিশ্চয় ভালো আছেন । আর ভালো আছেন বলেই হয়ত...

Contact Us

Name

Email *

Message *

Categories

  • Tips & Tricks (35)
  • Blog Design (28)
  • LifeStyle (13)
  • Blogger Widgets (12)
  • Create Blog (10)
  • Internet (10)
  • Technology (10)
  • Computer (9)
  • Seo (9)
  • Tech News (8)
  • Facebook (5)
  • Freelancing (5)
  • Google Adsense (5)
  • Health Tips (4)
  • Mobile Tips (3)

Our Location

About Admin

I'm not that smart enough to be someone's favorite man. Of course I have a good mindset that can be a favorite friend of many. Maybe you can be your favorite friend. Let's do the same with which to behave like this. So maybe everyone does not love me or does not keep a list of good friends. I did not make my own picture later. Of all, the one-rose rose greetings.
Get more information about me, please ....click here.....

Feelings: 
*** Love never understood Do not seek passion. All day, books, sports and songs are heard.

Oh! Yes - "I'm not waiting for a prince, I'm waiting for him, the way I'm his prince"

Join With Us

For Get All Notifications Update to This Blog!

email updates

Most Commented Post

Copyright © 2018-2019 TechRajjo.Com All Rights Reserved | Design By: AHK Team Bangladesh