Để cho khách tham quan dễ dàng tìm kiếm các bài đã đăng trên Blog của mình, bạn có thể tạo hộp tìm kiếm (Search...) trên Blog với một số mẫu dưới đây.
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Bố cục (Lay out)
3- Chọn Thêm tiện ích -> Thêm 1 Tiện ích HTML/Javarscip => Xem video:
4- Ứng với mỗi mẫu là code phía dưới, nếu thích mẫu nào bạn chỉ cần Copy mẫu đó và làm theo bước sau là Ok.
Mẫu 1:
Mẫu 2:
Mẫu 5:
<style type="text/css"> #namkna-searchbox{background:url(ahttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipxA72JdikwZ6QkIjdtlYGBK684ukLzg0L5A598NE204Qm0JqS01vrXboCLEZ554YzCvSXeU4DJ6Fvil9DCZZz1Q8_8ZzjITFa527XRDiiSjbvjgQ0up7lJzzwT8mgPAnOu-zR2m2QLlA/h58/searchbox1-namkna-blogspot-com.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#namkna-searchform{display: block;padding: 10px 12px;margin:0;} form#namkna-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#namkna-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="namkna-searchbox"> <form id="namkna-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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD10YyReUV8awKdRmi1FnN5GqWuKzia9RbMh2g2eGMyAoqEl0PeIlN-3MHWNAEMsgsEHLhF7OliuAkNxI4qX_5GPvNq-fQo_hXQAMPOpUUEnBphyphenhyphen7DvBfE3s8S843bl-3Gs9oRSjcraBY/h120/blank-search-namkna-blogspot-com.gif" id="sbutton" /> </form> </div>
Mẫu 2:
<style type="text/css"> #namkna-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjirJF-1c61NmrISFcqP9KL7TWboLGbkT2emxEmh_eAXmf15LzbAXYyQEkDYZf9WfCde5zaKvWxkcmXJw1cTWJtx3LPGPhKtyla4yeRESKK7ekTZRBBNPlRfLDDz1DL8Dbv3je2BFl-ab8/h58/searchbox2-namkna-blogspot-com.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#namkna-searchform{display: block;padding: 10px 12px;margin:0;} form#namkna-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#namkna-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="namkna-searchbox"> <form id="namkna-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>Mẫu 3:
<style type="text/css"> #namkna-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZTKncLnELtDMvONNHki2jx-7vmFRveBSU0dtpcI-pIbnFt464e-kgJjUsVOrB8uONe1Nwayb7vUHpkybMX1YLc6WBoUYZFtB1ZIJ0WGApF53U0oDgRdOszY-6TEqBQT5_k2pITM_MjS1L/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#namkna-searchform{display: block;padding: 10px 12px;margin:0;} form#namkna-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#namkna-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="namkna-searchbox"> <form id="namkna-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>Mẫu 4:
<style type="text/css"> #namkna-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ_mKALDT2zUufdPTvcrk19AcWyZEDZmq112tuxy0lu3TlDRoABNkclEs8B7Tdm9TLDZbi6_tQRyBVJEhCQWwehTBNL0Pr77ZHyqjEWA5yR6orLKQAh9it4PQwk0ZH3opyODgQMcj_rHDW/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#namkna-searchform{display: block;padding: 12px;margin:0;} form#namkna-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#namkna-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="namkna-searchbox"> <form id="namkna-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>
Mẫu 5:
<style type="text/css"> #namkna-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUuGYx2b1ENZVu4At8sa_HTeNg3gGMYayE2rJ0WBaZ-LmFRw-AvONNPRQLZ4GCE32e6YiBDwpdXvzskYcONKmbClqvxbWhjqDmJTjIyvux-Uy3iqVnxAdbvk6MY9vxakHURQhpc20st6iz/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#namkna-searchform{display: block;padding: 12px;margin:0;} form#namkna-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#namkna-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="namkna-searchbox"> <form id="namkna-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/><br /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>
Nếu có chút kinh nghiệm về XML bạn có thể chèn các đoạn code trên vào trong Template và nâng cấp nó lên.
Xem thêm: Chèn công cụ tìm kiếm của Yahoo vào blog
Hiện kết quả tìm kiếm tại Static Page cho Blogspot
Chúc thành công!
Hiện kết quả tìm kiếm tại Static Page cho Blogspot
Chúc thành công!
Nhận xét
Làm sao mà làm được cái search box như của bạn vậy?
Trả lờiXóa@ Mr Son 0977300246: bạn có thể làm theo bài hướng dẫn này:
Trả lờiXóahttp://namkna.blogspot.com/2011/08/nang-cap-search-box-cua-blogspot.html
Chúc thành công! :)
có cách nào làm cho ô search nhỏ lại được hông
Trả lờiXóa@Richard Wibson Bạn chỉnh lại các thuộc tính sau: width:307px;height:50px
Trả lờiXóaVới width là chiều rộng và height là chiều cao.
mà chèn vào đâu?????
Trả lờiXóa@uzumaki luxifer Chèn vào một Wiget mà bạn muốn.:1) :1) :1)
Trả lờiXóanếu muốn tích hợp vào template luôn thì làm sao vậy anh Nam?
Trả lờiXóanếu muốn tích hợp vào template luôn thì làm sao vậy anh Nam?
Trả lờiXóaEm dán thẳng vào vị trí em muốn thêm trong template của em nha,
Xóacô muốn dán vào thanh Menu thì dán vào chỗ nào vậy ? co mong tin cháu!
Trả lờiXóacháu chỉnh cho cô một cái sao cho nó thanh mảnh như cái hộp tìm kiếm trong blog hồng anh của cô có được ko . cái mẫu này cho vào sao nhìn nó cộm quá cháu à
Trả lờiXóaCode search của cô là
Xóa<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Tìm kiếm ....'/>
<input class='searchbutton' src='http://1.bp.blogspot.com/-N_4TWVUmXv4/UDdKJf5NwCI/AAAAAAAAIgY/AGrKXgwkrTo/s1600/tombolcari.gif' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>
<style>
/* search form
-------------------------------------- */
.menusearch{float:right;padding:0px 0px ;
margin:10px 0px 0px 0px;
height:23px;}
.searchform {margin-top:0px;padding:0;background:#fff;width:193px;height:23px; overflow:hidden;border:0px }
.searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 150px;height:23px;border:0px;outline: none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}
</style>
Cô muốn dán vào blog nào thì để lại link cháu xem giúp cho nha cô.
Các bạn nên làm theo dạng hộp tìm kiếm nâng cao của google như ví dụ sau: http://thietbidiennhe.blogspot.com/
Trả lờiXóaCách làm: http://forum.idichvuseo.com/threads/toi-uu-hoa-cong-cu-tim-kiem-blogspot.19705/
http://phanmemcongngheit.blogspot.com/
Trả lờiXóabạn xem cái blog mình làm như thế có ổn không, mình cũng vừa mày mò tới cái này, bạn xem chỗ nào không ổn để mình sửa lại nha, cảm ơn bạn nhiều.
Mình muốn đặt hộp tìm kiếm này trên menu và căn sang bên phải được không bạn? Bạn giúp mình với
Trả lờiXóa