Panjang lebar kesana kemari sebenarnya Beben Koben si bloglang anu ganteng kalem tea akan kembali berbagi cara membuat kotak pencarian (search box) seperti yg ada pada home page google+ Lihat disana pasti ada kotak pencarian buat youtube, sisi kanan monitor anda :-/ Seperti itulah box pencarian yg akan Koben share sekarang ;;)
CSS3 Code Search Box Ala Google+
.gigirSearch {
background: whiteSmoke;
border: 1px solid #ddd;
border-right-width: 0;
height: 30px;
padding: 5px 10px;
position: fixed;
right: 0px;
top: 100px;
width: 50px;
overflow: hidden;
z-index: 999999;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.gigirSearch {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#searchsubmit {
background: #ccc;
border: none;
cursor: pointer;
color: #555;
margin: 6px 0 0 0;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.gigirSearch:hover {
width: 250px;
background: #ddd;
}
.gigirSearch form {
width: 100%;
height: 50px;
position: relative;
}
.gigirSearch:hover #ss {
min-width: 195px;
height: 18px;
}
#ss {
position: absolute;
top: 6px;
left: 62px;
min-width: 5px;
height: 18px;
font-size: 10px;
}
.input:focus {
border: 1px solid #3A7FED;
box-shadow: inset 1px 1px 3px #777;
}
background: whiteSmoke;
border: 1px solid #ddd;
border-right-width: 0;
height: 30px;
padding: 5px 10px;
position: fixed;
right: 0px;
top: 100px;
width: 50px;
overflow: hidden;
z-index: 999999;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.gigirSearch {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#searchsubmit {
background: #ccc;
border: none;
cursor: pointer;
color: #555;
margin: 6px 0 0 0;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.gigirSearch:hover {
width: 250px;
background: #ddd;
}
.gigirSearch form {
width: 100%;
height: 50px;
position: relative;
}
.gigirSearch:hover #ss {
min-width: 195px;
height: 18px;
}
#ss {
position: absolute;
top: 6px;
left: 62px;
min-width: 5px;
height: 18px;
font-size: 10px;
}
.input:focus {
border: 1px solid #3A7FED;
box-shadow: inset 1px 1px 3px #777;
}
Markup HTML
<div class="gigirSearch">
<form method="get" id="searchform" action="http://YOUR-BLOG.blogspot.com /search" target="top">
<input type="submit" id="searchsubmit" value="Search">
<input type="text" value="" name="q" id="ss" class="input" placeholder="Text goes here ..."/>
</form>
</div>Dengan begitu saja kalian sudah mempunyai kotak pencarian ala google plus (Demo in single post page, look right side) Apakah hanya itu kita dapat berkreasi! Bagaimana bila diberi sedikit sentuhan jQuery plugins :-/Kalau disisipkan bumbu jQuery posisi fixed akan berubah menjadi relative dimana akan menghasilkan efek mengikuti. Ketika kalian melakukan scroll ke bawah itu kotak pencarian akan ikut" ke bawah juga ;))
CSS3 Code Search Box Like Google+
.gigirSearch {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.gigirSearch {
background: whiteSmoke;
border: 1px solid #ddd;
border-right-width: 0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
height: 30px;
padding: 5px 10px;
position: absolute;
right: 0px;
top: 100px;
width: 50px;
overflow: hidden;
z-index: 999999;
}
#searchsubmit {
background: #ccc;
border: none;
cursor: pointer;
color: #555;
margin: 6px 0 0 0;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.gigirSearch:hover {
width: 250px;
background: #ddd;
}
.gigirSearch form {
width: 100%;
height: 50px;
position: relative;
}
.gigirSearch:hover #ss {
min-width: 195px;
height: 18px;
}
#ss {
position:absolute;
top: 6px;
left: 62px;
min-width: 5px;
height: 18px;
font-size: 10px;
}
.input:focus {
border: 1px solid #3A7FED;
box-shadow: inset 1px 1px 3px #777;
}
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.gigirSearch {
background: whiteSmoke;
border: 1px solid #ddd;
border-right-width: 0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
height: 30px;
padding: 5px 10px;
position: absolute;
right: 0px;
top: 100px;
width: 50px;
overflow: hidden;
z-index: 999999;
}
#searchsubmit {
background: #ccc;
border: none;
cursor: pointer;
color: #555;
margin: 6px 0 0 0;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.gigirSearch:hover {
width: 250px;
background: #ddd;
}
.gigirSearch form {
width: 100%;
height: 50px;
position: relative;
}
.gigirSearch:hover #ss {
min-width: 195px;
height: 18px;
}
#ss {
position:absolute;
top: 6px;
left: 62px;
min-width: 5px;
height: 18px;
font-size: 10px;
}
.input:focus {
border: 1px solid #3A7FED;
box-shadow: inset 1px 1px 3px #777;
}
Markup HTML
<div class="gigirSearch">
<form method="get" id="searchform" action="http://YOUR-BLOG.blogspot.com /search" target="top">
<input type="submit" id="searchsubmit" value="Search">
<input type="text" value="" name="q" id="ss" class="input" placeholder="Text goes here ..."/>
</form>
</div>jQuery Pugin
Demikian sobat sekalian membuat kotak pencarian (box search) bergaya google+ :) Good luck and enjoy it :)<script type='text/javascript'>
//<![CDATA[
$(function() {
var $rightside = $(".gigirSearch"),
$window = $(window),
offset = $rightside.offset(),
topPadding = 50;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$rightside.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$rightside.stop().animate({
marginTop: 0
});
}
});
});
//]]>
</script>
Happy blogging \m/
<style>
.pricing_table{border:1px solid #c4cbcc;margin-top:10px;float: left}.pricing_table ul{list-style:none;float: left;width:140px;margin:0;border:1px solid #f2f3f3;padding:5px;text-align:center;background-color:transparent;-o-transition:.5s ease-in;-moz-transition:.5s ease-in;-webkit-transition:.5s ease-in}.pricing_table ul:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);-webkit-box-shadow:3px 5px 7px rgba(0,0,0,.7);box-shadow:3px 5px 7px rgba(0,0,0,.7);background:#d8e9f9;-o-transition:.3s ease-out;-moz-transition:.3s ease-out;-webkit-transition:.3s ease-out}.pricing_table ul li{border-bottom:1px dashed #fff;padding:10px 0}.pricing_table ul li:first-child{color:#fff;font-size:18px;font-weight:bold;background:#225D68}.pricing_table ul li:nth-child(2){background:#2E808E;color:#fff;font-weight:bold}.pricing_table ul li:nth-child(3){font-size:13px}.pricing_table ul li:nth-child(n+4){font-size:14px}.pricing_table ul li:last-child a{color:#F0F0F0;font-weight:bold;display:block;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border:1px solid #c4cbcc;padding:10px;margin:5px 0;background:#0061bb}</style>