5 Κομψά πλαίσια αναζήτησης [Blogger]



Η προσαρμογή είναι πολύ εύκολη, μπορείτε να το εγκαταστήσετε στο blog σας κάνοντας αντιγραφή και επικόλληση έναν από τους παρακάτω κώδικες.
Blogger Search Box Widget Style 1:



<style>
/* foulscode.com */
#search-box-danger {margin:0 auto;height: 36px;position:relative;width:100%;float:none;}
#bo-search-box{padding:0;background:#fff;height: 35px;position:relative;line-height:1.5em;font-weight:normal;margin:0;border-radius:5px;border:1px solid #ddd;}
.bo-sb-buttonwrap {border-top-right-radius: 5px;border: none;cursor: pointer;position: absolute;height: 35px;right: 0;border-bottom-right-radius: 5px;width: 14%;display: block;top: 0;background: #d9534f;}
.bo-sb-buttonwrap:hover {background-color: #c9302c;}
.bo-sb-submit {height: 35px;right: 50%;background: transparent;position: absolute;width: 35px;cursor: pointer;margin-right: -17.5px;margin-top: -17.5px;top: 50%;border: none;}
.bo-sb-submit:after {position: absolute;border: 2px solid white;left: 10px;height: 8px;content: '';top: 9px;width: 8px;border-radius: 50%;box-sizing: content-box;}
.bo-sb-submit:before {width: 2px;position: absolute;transform: rotate(-35deg);left: 21px;content: '';top: 19px;height: 8px;background: white;}
#bo-sb-input {outline: none;border-top-left-radius: 5px;padding: 0 15px;transition: all 0.5s;width: 84%;border: none;position: absolute;height: 35px;background-color: #fff;color: #333;border-bottom-left-radius: 5px;}
#bo-sb-input:focus {outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
/* foulscode.com */
</style>
<div id="search-box-danger">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>



Blogger Search Box Widget Style 2:



<style>
/* foulscode.com */
#search-box-info {position:relative;margin:0 auto;width:100%;height: 36px;float:none;}
#bo-search-box{height: 35px;border:1px solid #ddd;line-height:1.5em;margin:0;font-weight:normal;padding:0;border-radius:5px;position:relative;background:#fff;}
.bo-sb-buttonwrap {border-bottom-right-radius: 5px;width: 14%;background-color: #5bc0de;position: absolute;border: none;border-top-right-radius: 5px;right: 0;cursor: pointer;display: block;height: 35px;top: 0;}
.bo-sb-buttonwrap:hover {background-color: #31b0d5;}
.bo-sb-submit {background: transparent;top: 50%;cursor: pointer;right: 50%;height: 35px;position: absolute;margin-top: -17.5px;width: 35px;border: none;margin-right: -17.5px;}
.bo-sb-submit:after {border-radius: 50%;top: 9px;position: absolute;height: 8px;content: '';width: 8px;border: 2px solid white;left: 10px;box-sizing: content-box;}
.bo-sb-submit:before {transform: rotate(-35deg);position: absolute;content: '';width: 2px;left: 21px;height: 8px;background: white;top: 19px;}
#bo-sb-input {width: 84%;border: none;border-bottom-left-radius: 5px;position: absolute;padding: 0 15px;height: 35px;color: #333;outline: none;background-color: #fff;border-top-left-radius: 5px;transition: all 0.5s;}
#bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);border-color: #66afe9;}
/* foulscode.com */
</style>
<div id="search-box-info">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>



Blogger Search Box Widget Style 3:



<style>
/* foulscode.com */
#search-box-primary {float:none;position:relative;height: 36px;width:100%;margin:0 auto;}
#bo-search-box{margin:0;padding:0;position:relative;background:#fff;height: 35px;border:1px solid #ddd;line-height:1.5em;border-radius:5px;font-weight:normal;}
.bo-sb-buttonwrap {cursor: pointer;height: 35px;position: absolute;border-bottom-right-radius: 5px;right: 0;border: none;width: 14%;background-color: #337ab7;top: 0;border-top-right-radius: 5px;display: block;}
.bo-sb-buttonwrap:hover {background-color: #286090;}
.bo-sb-submit {cursor: pointer;margin-top: -17.5px;position: absolute;top: 50%;background: transparent;right: 50%;width: 35px;height: 35px;border: none;margin-right: -17.5px;}
.bo-sb-submit:after {width: 8px;left: 10px;content: '';top: 9px;height: 8px;border-radius: 50%;position: absolute;box-sizing: content-box;border: 2px solid white;}
.bo-sb-submit:before {transform: rotate(-35deg);height: 8px;background: white;position: absolute;width: 2px;top: 19px;content: '';left: 21px;}
#bo-sb-input {border: none;width: 84%;color: #333;padding: 0 15px; height: 35px;position: absolute;border-bottom-left-radius: 5px;outline: none;background-color: #fff;border-top-left-radius: 5px;transition: all 0.5s;}
#bo-sb-input:focus {border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;}
/* foulscode.com */
</style>
<div id="search-box-primary">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>




Blogger Search Box Widget Style 4:


<style>
/* foulscode.com */
#search-box-success {height: 36px;float:none;position:relative;width:100%;margin:0 auto;}
#bo-search-box{background:#fff;line-height:1.5em;height: 35px;border-radius:5px;border:1px solid #ddd;margin:0;padding:0;font-weight:normal;position:relative;}
.bo-sb-buttonwrap {background-color: #5cb85c;display: block;border: none;border-top-right-radius: 5px;height: 35px;height: 35px;position: absolute;right: 0;border-bottom-right-radius: 5px;width: 14%;top: 0;cursor: pointer;}
.bo-sb-buttonwrap:hover {background-color: #449d44;}
.bo-sb-submit {position: absolute;margin-right: -17.5px;right: 50%;margin-top: -17.5px;cursor: pointer;top: 50%;height: 35px;width: 35px;background: transparent;border: none;}
.bo-sb-submit:after {top: 9px;border-radius: 50%;content: '';height: 8px;width: 8px;border: 2px solid white;left: 10px;position: absolute;box-sizing: content-box;}
.bo-sb-submit:before {width: 2px;top: 19px;height: 8px;position: absolute;background: white;left: 21px;content: '';transform: rotate(-35deg);}
#bo-sb-input {padding: 0 15px;background-color: #fff;border-bottom-left-radius: 5px;height: 35px;transition: all 0.5s;color: #333;outline: none;width: 84%;border: none;position: absolute;border-top-left-radius: 5px;}
#bo-sb-input:focus {box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;border-color: #66afe9;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
/* foulscode.com */
</style>
<div id="search-box-success">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>


Blogger Search Box Widget Style 5:



<style>
/* foulscode.com */
#search-box-default {width:100%;position:relative;margin:0 auto;float:none;height: 36px;}
#bo-search-box{border-radius:5px;border:1px solid #ddd;height: 35px;position:relative;line-height:1.5em;margin:0;background:#fff;padding:0;font-weight:normal;}
.bo-sb-buttonwrap {position: absolute;right: 0;border-top-right-radius: 5px;background-color: #fff;border: none;width: 14%;display: block;top: 0;cursor: pointer;height: 35px;border-bottom-right-radius: 5px;border-left: 1px solid #ddd;}
.bo-sb-buttonwrap:hover {background-color: #e6e6e6;}
.bo-sb-submit {right: 50%;border: none;top: 50%;margin-right: -17.5px;position: absolute;margin-top: -17.5px;background: transparent;width: 35px;cursor: pointer;height: 35px;}
.bo-sb-submit:after {left: 10px;width: 8px;border-radius: 50%;height: 8px;content: '';position: absolute;border: 2px solid black;box-sizing: content-box;top: 9px;}
.bo-sb-submit:before {content: '';background: black;transform: rotate(-35deg);position: absolute;height: 8px;left: 21px;width: 2px;top: 19px;}
#bo-sb-input {height: 35px;background-color: #fff;width: 84%;border: none;border-top-left-radius: 5px;outline: none;border-bottom-left-radius: 5px;padding: 0 15px;position: absolute;transition: all 0.5s;color: #333;}
#bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
/* foulscode.com */
</style>
<div id="search-box-default">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>
Κατηγορίες:
Σχόλια