Make Search Box berGaya Google+

Sejak menampilkan artikel membuat kotak pencarian Koben perhatikan ternyata keberadaannya memang harus ada pada setiap situs! Mengapa saya bisa berpendapat begini karena walau sebuah site tidak memberikan fasilitas ini pada web/blognya, tetap saja bisa memakai jasa search engine guna mencari konten! Kalian bisa simak disini Tricks Search and Secret by Google & Believe it (Google) if You a True SEO!
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;
}

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;
}

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

<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>

Demikian sobat sekalian membuat kotak pencarian (box search) bergaya google+ :) Good luck and enjoy it :)
Happy blogging \m/