Subscrible via email

custom CSS search Box in blogger

Open a NEW Javascript box and put the following code:


<style type="text/css"> #hbz-searchbox {
    background: url(http://3.bp.blogspot.com/-g-zH25_DoxI/VD1BuatkgII/AAAAAAAAAgc/00hxspfvv3s/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
}

#hbz-searchbox input {
    outline: none
}

#hbz-searchbox input[type="text"] {
    background: transparent;
    margin: 3px 0 0 20px;
    padding: 5px 0;
    border-width: 0;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    color: #828282;
    width: 70%;
    display: inline-table;
    vertical-align: top
}

#button-submit {
    background: url(http://4.bp.blogspot.com/-OcDQ6Z9ojlQ/VD1KnwJjFOI/AAAAAAAAAgs/cu_pKN6bpL8/s1600/magnifier.png) no-repeat;
    border-width: 0;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 21px;
    height: 22px
}

#button-submit:hover {
    background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat
}

#button-submit:active {
    background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;
    outline: none
}

#button-submit::-moz-focus-inner {
    border: 0
}

</style> 

<form id="hbz-searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

REPLACING the red lines url you can customize the search box style





BONUS CODE

To put this fox Upper of your blog as fixe TOP RIGHT seach bar: 
put this code in youe Template Template/Advance/Add CSS >>>
#hbz-searchbox { position: fixed; top: 0px; right: 0px; z-index: 999; width:100%





No comments:

Post a Comment

Pages