segunda-feira, 18 de janeiro de 2016

Search Box modelos Blogger

search-box-responsive-2016-blogger

Hoje vamos mostrar como adicionar search box variados para modelo de seu blog isso da um tom mais elegante e também ajuda a crescer seu blog aumentando as pesquisas no blog


Para Adicionar search box  no blogger siga os passos 

Faça login no blogger então no menu 
layout procure por adicionar novo gadget 
Javascript/HTML copie o código que preferir e cole dentro da caixa depois salve.


search-box-2016



style>
#searchbox {
width: 280px;
background: url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/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(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/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>


search-2-widget-2016


<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(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/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(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/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>


new-search-widget


<style type="text/css">#blr_torn_page_search {   background:rgba(0,0,0,0) url('http://2.bp.blogspot.com/-WOtFhkqSuwM/Un9kXYdUhGI/AAAAAAAAC5k/P2F5OeupizU/s1600/torn_page_image.png') scroll 50% 50% no-repeat;   width:340px;   height:58px;   display:block;}#blr_torn_page_search_box {   display:block;   padding:14px;   margin:0;}#blr_torn_page_search_input {   padding:6px;   margin:0;   width:266px;   font-size:14px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}#blr_torn_page_search_submit {   margin:0;   padding:0;   height:25px;   width:25px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}</style>

<div id="blr_torn_page_search">    <form expr:action="/search" method="get" id="blr_torn_page_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_torn_page_search_input" />        <input type="image" id="blr_torn_page_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />    </form></div>


search-box-hover-effect


<style>
#searchbox {
    background: url(http://2.bp.blogspot.com/-Un3z-hkw1XA/VD0V9GO8zrI/AAAAAAAAAf0/ww_5VsvWayY/s1600/search-box1.png) no-repeat;
    width: 250px;
    height: 65px;
}

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;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Brush Script MT", cursive;
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(http://1.bp.blogspot.com/-zyJC7B-dSaU/VDv8-68fNJI/AAAAAAAAAe0/pkUajFr2kcQ/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}

#button-submit:hover {
    background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/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 class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
    <input id="button-submit" type="submit" value="" />
</form>


search-box-widget-2016


<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}

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: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}

#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}

#button-submit:hover {
    background: #4f5356;
}

#button-submit:active {
    background: #5b5d60;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

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


new-style-search-box-widget-2016

<style>
.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}   

 /* Form wrapper styling */
.search-wrapper {
width: 288px;
margin:10px 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}

/* Form text input */

.search-wrapper input {
width: 190px;
height: 20px;
padding: 10px;
float: left;
font: bold 14px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #EEE;
border-radius: 3px 0 0 3px;
}

.search-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.search-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.search-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.search-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}   

/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 78px;
font: bold 14px/35px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: white;
text-transform: uppercase;
background: #D83C3C;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
  
.search-wrapper button:hover{    
    background: #e54040;
}  
  
.search-wrapper button:active,
.search-wrapper button:focus{  
    background: #c42f2f;
    outline: 0;  
}

.search-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.search-wrapper button:hover:before{
    border-right-color: #e54040;
}

.search-wrapper button:focus:before,
.search-wrapper button:active:before{
        border-right-color: #c42f2f;
}     

.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}   
</style>
<form action="/search" class="search-wrapper cf">
        <input type="text" method="get" name="q" placeholder="Search here..." required="" />
        <button type="submit">Search</button>
    </form>



responsive-search-box-2016


<style>
#search-box {
position: relative;
width: 100%;
margin: -15px 0px -20px 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

Então escolha seu modelo e melhore o design do blogger


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner