Make Search Box berGaya Google+

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
      <div class="gigirSearch"><form method="get" id="searchform" action="http://www.google.com/search?q" target="top"><input name="sitesearch" value="beben-koben.blogspot.com" type="hidden"/><input type="submit" id="searchsubmit" value="Search"/><input type="text" name="q" id="ss" class="input" placeholder="Text goes here ..."/></form></div>
<span style="font-size:20px;color:#d00;font-weight:bold">Lihat ke sisi kanan, dan lakukan scroll ke bawah...</span><br>...

CSS

*
{margin:0;padding:0;}
body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred {padding-top:5px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:15px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}
.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:...

JavaScript

$(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
            });
        }
    });
});