Tuesday, July 26, 2016

Added Two Unique Search Box Widgets In Blogger

Each of the Search Box must have a blog or web site. Search Box can not be perfect without any kind of web sites. By default, this blogger has the option to add their own search box, so that anyone can easily add search box. But bloggers have their own designs for the search box that there is not any type of design. In a word, it's an old model search box.



 In this post, I will discuss today how to blogger to add custom search box. In this post, I will discuss two of Unique Search Box, which will be two different designs for the search box. The two designs in the search box you can add any kind of blog. Moreover, the search box in order to add funds to the hassle of coding of any kind will not be warm. Modify copy and paste it into the search box, without any type of fire can add to your Blogger blog.

How to Added this Widget

To add it to your web design ideas will not be any different. Who has not dwelling on any day blog more easily be able to add it.
  1. First, log in to your Blogger account.
  2. Then go to your blog dashboard.
  3. Add a Gadget from the left side of the Layout options to clean.
  4. The HTML / JavaScript and clean.
  5. Now, copy the following codes HTML / JavaScript paste it into the box from bellow tag 
  •  If want to look out in normal interface

    <style>
    #searchbox {
    display: block;
    clear: both;
    margin: 10px 0;
    }
    #searchbox #input {
    background: url("http://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>
     
  • If want to look out in hovor/dynamic interface 

     
    <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('http://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(http://4.bp.blogspot.com/-AYxiudNOvpg/VTR2a_JY6ZI/AAAAAAAAEJg/w3Ek0r0egEY/s1600/Red.png) no-repeat;
    }
    #button-submit:active {
    background: url(http://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>

Note:

  • Height or Width to change the search box, you can change it any time.
  • Finally, click on Save 
Previous Post
Next Post

0 comments: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

Post a Comment

 
Copyright © Poisa Click Registered Surf. Modified: PC Team, Server Hosted: GSE