Thêm box Tìm kiếm thông minh đẹp và phong cách cho blog
10/30/12
Bài viết này sẽ hướng dẫn bạn thêm công cụ tìm kiếm bài viết trên blog của bạn nhưng với một giao diện đẹp mắt hơn rất nhiều so với nguyên bản của google search
1. Blogger > Mẫu > Chỉnh sửa HTML
2. Dán code dưới trước thẻ </head>
4. Vào blogger > Bố cục > Thêm tiện ích HTML/Javacript vào vị trí bạn muốn thêm search box
5. Dán code bên dưới vào form Nội Dung của HTML/Javascript
<div id='search'>
1. Blogger > Mẫu > Chỉnh sửa HTML
2. Dán code dưới trước thẻ </head>
<style type='text/css'>3. Lưu lại template
#search {
height:34px;
width:auto;
margin-top:10px;
padding:17px 5px 10px 15px;
width:311px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwtPTmEMH4gm1ConqGGZiaZOv4lWdeIsaSrApfMKOuZV3CF6268o65E20G42YDohmbWeY3_ZMG3dk6mKxyWK5L1gZk50zwtQBLEBF0qSPEXW4pgkiofSqt3qOT1Wty2RAf8_siYLqVAjLO/);
}
#search form {
margin: 0;
padding: 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search p {
margin: 0;
font-size: 85%;
}
#s {
margin-left:0px;
float: left;
width:231px;
padding: 6px 2px 6px 5px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgND6nI0mneanSW1LDMo2RVLiRuQyctZa-x0ZhkW5DPHLqPcY8GswlTGoI5zRVISO99ivA3rTPsiTZVj825r6OMyrPpPllcSPrPBvuJWvdJ570uV_UQNXRWg-6gC3kWYf2WadJ78G_6GSSQ/s1600/sform.png) no-repeat;
border:none;
font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;
color:#C6C6C6;
}
#searchsubmit {
width:57px;
float: left;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfJ9eO3CkL75ajLm2228Inn4ymznp5WXCyl0grryTn64WhB0J5AGjr-_oRNS436O2FG7Ull49kVwPaH6WexSW-KJbFlOYn2W8VGb_dE5lE-aU0TZ4TRePKuF94nY440qTVNJqceaCJMnw/);
border:none;
font: bold 100% "century gothic", Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:28px;
margin-left:5px;
}
</style>
4. Vào blogger > Bố cục > Thêm tiện ích HTML/Javacript vào vị trí bạn muốn thêm search box
5. Dán code bên dưới vào form Nội Dung của HTML/Javascript
<div id='search'>
<form id="searchform" action="http://trollvl.blogspot.com/search" style="display:inline;" method="get">
<input id="s" name="q" type="text" value=""/>
<input id="searchsubmit" value="" type="submit"/>
</form>
</div>
- Nhớ thay đổi trollvl.blogspot.com thành link blog của bạn
6. Lưu lại và hoàn thành
Chúc bạn thành công
Tin liên quan
XEM TRÊN MOBILE
No comments:
Post a Comment