Google Search Box phong cách mới cho blogspot

Sau đây mình sẽ hướng dẫn các bạn chèn Google Search Box cho Blogger.

Demo: Click vào đây để xem demo

Hướng dẫn:
1. Đăng nhập vào Blogger
2. Tới Edit HTML
3. Copy đoạn code dưới đây lên trên  ]]></b:skin>
 

/* div container containing the form */ #searchContainer { margin:20px; } /* Style the search input field. */ #field { float:left; width:200px; height:27px; line-height:27px; text-indent:10px; font-family:arial, sans-serif; font-size:1em; color:#333; background: #fff; border:solid 1px #d9d9d9; border-top:solid 1px #c0c0c0; border-right:none; } /* Style the "X" text button next to the search input field */ #delete { float:left; width:16px; height:29px; line-height:27px; margin-right:15px; padding:0 10px 0 10px; font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif; font-size:22px; background: #fff; border:solid 1px #d9d9d9; border-top:solid 1px #c0c0c0; border-left:none; } /* Set default state of "X" and hide it */ #delete #x { color:#A1B9ED; cursor:pointer; display:none; } /* Set the hover state of "X" */ #delete #x:hover { color:#36c; } /* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */ #submit { cursor:pointer; width:70px; height: 31px; line-height:0; font-size:0; text-indent:-999px; color: transparent; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwji5GMGiTpQ0daFgQKIWdQxt3dzuJst6j6GfCPUz5bOiVmvRwF031O0gAAFGFcRAHnidgsZ2OmADY3InKGvhuBKHLplyd1hXlJEUuKwTCiwKTAMntCwhPuy3VV32S61OTCHiF_4qULx6/s1600/ico-search.png) no-repeat #4d90fe center; border: 1px solid #3079ED; -moz-border-radius: 2px; -webkit-border-radius: 2px; } /* Style the search button hover state */ #submit:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwji5GMGiTpQ0daFgQKIWdQxt3dzuJst6j6GfCPUz5bOiVmvRwF031O0gAAFGFcRAHnidgsZ2OmADY3InKGvhuBKHLplyd1hXlJEUuKwTCiwKTAMntCwhPuy3VV32S61OTCHiF_4qULx6/s1600/ico-search.png) no-repeat center #357AE8; border: 1px solid #2F5BB7; } /* Clear floats */ .fclear {clear:both}

4. Copy đoạn code dưới đây lên trên thẻ </head>
 

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/><script type='text/javascript'>$().ready(function() { // if text input field value is not empty show the "X" button $("#field").keyup(function() { $("#x").fadeIn(); if ($.trim($("#field").val()) == "") { $("#x").fadeOut(); } }); // on click of "X", delete input field value and hide "X" $("#x").click(function() { $("#field").val(""); $(this).hide(); }); }); </script>

5. Save lại nhé.

Chúc các bạn thành công.