[Blogger] Một số style searchbox đẹp

Bài viết này mình xin chia sẻ một số style searchbox (khung tìm kiếm) đẹp để các bạn có thể lựa chọn kiểu mình thích đưa vào blog.

Kiểu 1:

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ipX1D_2d8tJgdLEz2WS2M3AAECySiJW3np6-5bUCJNWK6Vrsrfyio3OCsV-3PkN_7Y0vijgkucWWUymc2qDwMffDEeuC5NSA12cVexASXHU6kF8GwnUPyw2OX2ibpJ3iU6anma8Hiak/s380/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

Kiểu 2:

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcnvmv_xrjihdf7ZhevhrC76FWWAWWytm5O-Zfz-90KwUtiBICEjUYYCwgDH16zeZvTZhTeEo951F8ZseVEHMHgMxgViFu4QDNRWrD73NitSSAtBLFTiGoRqmBCLru4qXI6kkYiAI9hk/h57/white-searchbox+%2528www.%25C4%2591oa%25CC%2580ntri%25CC%25A3nh.vn%2529.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

Kiểu 3:

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOg8009KJHutqoEVAaX32sJMrXLX-wScQb0cIxwiKOYTflON2-hFuKDySorEtnXDo3ASMnwtiU7RBcEPMgMlgSPN3v7MEpvpXKFOSTVz5oW27q-S-XAvDlONyPpyQn2mLcZpQtD8UBwGg/h57/blue-searchbox+%2528www.%25C4%2591oa%25CC%2580ntri%25CC%25A3nh.vn%2529.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

Kiểu 4:

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh38-TiJfddjK12iWM4zxtM_9sDroLbI3u1N-J7gnJXXEvM5ai0A84_H0sxA2hBQGFcjX8RNS9DtvnrsjCszPDvZpRlOwov1yVIOBemxAYhV7MbCZ4MmyFTjRjSBve1ES7zrJuR62_w73A/h57/transparent-searchbox+%2528www.%25C4%2591oa%25CC%2580ntri%25CC%25A3nh.vn%2529.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

Kiểu 5:

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1t8Bb4thGa0P0As8dxtL93linRjmSMIQ4OIGaUmKu8QB-HBeFDUb-i0XuzjSdpd7HqyKpROEY_irKpMSvBDj7VQnEKexhoWmDF69kdHhsnYRb2sCNstxefakkSZfYE6Wr_Sf5NKuRZI4/h57/pink-searchbox+%2528www.%25C4%2591oa%25CC%2580ntri%25CC%25A3nh.vn%2529.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

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