Home thủ thuật blogger Widget 5 thanh tìm kiếm tuyệt đẹp cho blogger

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

9:02 AM
Read
9:02 AM

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


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.
5 thanh tìm kiếm tuyệt đẹp cho blogger
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
5 thanh tìm kiếm tuyệt đẹp cho blogger
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8E-pvmeivma-m_nNsF1uqCXMXn2xuODz9giYQodq4jCbIYzAovkxefJN-0acDddagzjYgiyUQ1kEvqqAFgodBGIk0XoNe4h1c-mXFBBQIF-KKn-tJTNHBCM24EAjqTPczTjf26xFIvLg/s1600/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">
<form id="abt-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." 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" />
</form>
</div>
Style 2
5 thanh tìm kiếm tuyệt đẹp cho blogger
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwl9iZyBoFH5EKNoVuBeyrW9Pmi4OW-WCXDiXlqoGcCTMNsSUAyDhwv1_Cw5H2NSzmr6gqAkEgqmnlDkSy3DSQfp9s1tD6GT34kacO48MdlJCZhGu4Xz8cWpjNQXC3r23x7JaynaqSqcg/s400/whitez+by+abt.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">
<form id="abt-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." 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" />
</form>
</div>
Style 3
5 thanh tìm kiếm tuyệt đẹp cho blogger
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivMEEGaqIGlOYbWQZIQH6M5tMMw6xGYcrFUe9rwOZMttljKB06kv1-lhL_ovw3sGmzhmP1AvG6OUfF4TMrqezHxQSXkXG-AozmrLthzSimpZZYiYAq5VxJ2i9woFU2-uv8ibz9uUQS-MM/s400/bluez+by+allbloggingtips.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">
<form id="abt-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." 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" />
</form>
</div>
Style 4
5 thanh tìm kiếm tuyệt đẹp cho blogger
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP5clL2fSmzR5uYeOD1Z3Nm6tyNzZbrqKkJAL_Cepd6lZYtfKjmdnITYqFJo_5GaIJpWDNH3FOG5lT_smDu-2DTALR2vHVxggE3q9VQ3MwRxx0rCmooe_11XAqhVejX1jIe5wgC1QhwYo/s400/transparent+by+allbloggingtips.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">
<form id="abt-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." 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" />
</form>
</div>
Style 5
5 thanh tìm kiếm tuyệt đẹp cho blogger
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqZqkHJJVFmH9h7L6i8toSRfpg6LUjtktEf0XgwcgqpUoszQddK0ORNVAUV81uubl690qfS-In51A0ibyf9hx0P9r935UQ1Gx_2720lNdHw_XoD3uAhnlzlCyooJelWAiQbfuPIq3-gh4/s400/pinkz.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">
<form id="abt-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." 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" />
</form>
</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 :

No comments:

Subscribe to: Post Comments ( Atom )