Home »

5 thanh tìm kiếm tuyệt đẹp cho blogger

14 thg 9, 2013
Hẳn là ai cũng đã biết được tầm quan trọng của các ô tìm kiếm trong các blog hay website. Nếu bạn đang phân vân hay chưa biết phải chèn thanh tìm kiếm vào blog của mình như thế nào thì các bạn cũng đừng nên quá lo lắng , vì hôm nay mình sẽ chia sẻ với các bạn đến 5 thanh tìm kiếm và tất cả đều rất đẹp.
Các bạn lần lượt làm theo các bước sau đây:
Bước 1 : Đăng nhập vào Blogger :  Dashboard   => Design tab  => Page Elements
Bước 2 : Click chọn Add a Gadget nơi mà bạn muốn đặt ô tìm kiếm
Bước 3 : Chọn HTML/JavaScript từ danh sách
Bước 4 : Bây giờ là phần thú vị nhất, các bạn chỉ cần chọn 1 trong 5 đoạn code sau đây và dán (paste) vào cho blog của mình
Style 1
01<style type="text/css">
02#abt-searchbox{
03border-radius:5px;
04background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3oQjv-P3lLDiLzNzd_QaQSuRJdtIaPVoVJvj7_gr0EKUPKaJYkgD-9No50aruohBuyHRfhqxblti4i1H4vM88tnso863Ay28_8LYr3qlsPRwPycBamnqsoMiBf5GftCO-Uas3i672ro/s1600/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
05form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
06form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
07form#abt-searchform
08#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
09</style>
10<div id="abt-searchbox">
11 
12<form id="abt-searchform" action="/search" method="get">
13<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
14<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"/>
15</form>
16</div>
Style 2
01<style type="text/css">
02#abt-searchbox{
03border-radius:5px;
04background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq47mgSSgaqlQIbtgZlB_GO7QXiecemyvE5bmL-Qq-veDewHvN4SWbXFdwMgQmiL7oIvCLW8MqUdG2CPXivkGsGCiKGAjiNX3H1wxVb9xxZvFnLClUmW9QWosbemvz6KBzCyD4mEiFd0s/s400/whitez+by+abt.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
05form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
06form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
07form#abt-searchform
08#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
09</style>
10<div id="abt-searchbox">
11 
12<form id="abt-searchform" action="/search" method="get">
13<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
14<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"/>
15</form>
16</div>
Style 3
01<style type="text/css">
02#abt-searchbox{
03border-radius:5px;
04background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNgRY4EHRwRgS8yLoljdoYs8sCd_6zl18lpHOl2sJ0wNOjI_MzisMRtSY6qc713EuuxmM2olCa202FkyPBZcigC4DDx9SzJCYbMbnOL4JpEhBeGJa_Nc-KvpKix9aLOwWsrwgeFFfZEGA/s400/bluez+by+allbloggingtips.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
05form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
06form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
07form#abt-searchform
08#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
09</style>
10<div id="abt-searchbox">
11<form id="abt-searchform" action="/search" method="get">
12<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
13<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"/>
14</form>
15</div>
Style 4
01<style type="text/css">
02#abt-searchbox{
03border-radius:5px;
04background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzrnU0z3ZKQILXLBTGZH6hKPLQwA_GgflbZNhwhHbpOSm6S7IF6IJEnXiw7ATfs6326-djnXjbZC8AF-HoeFWvZCxl8ANk36lJA5GdkA80xQeOiWqMU6_t4BChqf3F_qS7YYCvS9xStSc/s400/transparent+by+allbloggingtips.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
05form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
06form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
07form#abt-searchform
08#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
09</style>
10<div id="abt-searchbox">
11<form id="abt-searchform" action="/search" method="get">
12<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
13<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"/>
14</form>
15</div>
Style 5
01<style type="text/css">
02#abt-searchbox{
03border-radius:5px;
04background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqhCqRJqJnnXXPP9FNneqXOYEWTVGZI9o1-0JfS7rEElZpC3GFK5k-fXoEpx_bQJLE723SORtGdiMpv7puVCfP4ZXnVRuuSTLJJpjqipoHpIYrUkZLwHYhcXLhqHYOTea9C1c_6PRtUbc/s400/pinkz.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
05form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
06form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
07form#abt-searchform
08#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
09</style>
10<div id="abt-searchbox">
11<form id="abt-searchform" action="/search" method="get">
12<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
13<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"/>
14</form>
15</div>
 Tha hồ mà chọn lựa cho ô tìm kiếm cho blog của mình. Chúc các bạn thành công !
Tags:

Comments[ 0 ]


Đăng nhận xét