Search box là một thành phần quan trọng trong mỗi blog, nó giúp độc giả có thể tìm thấy các bài viết họ muốn chỉ với vài thao tác nhỏ, ngoài ra nó còn có chức năng điều hướng và phân loại các kết quả tìm kiếm. Nó giúp độc giả ở lại lâu với trang của bạn mà không cần sử dụng các công cụ tìm kiếm khác.
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.
» Có 2 hình thức bạn có thể thêm search box vào trang của bạn như sau:
- Tạo một tiện ích HTML/JAvascripts và dán mã của khung tìm kiếm bạn thích vào phần nội dung của tiện ích đó (với cách này khung tìm kiếm thường chỉ nằm ở một số vị trí nhất định, bạn không thể đưa đến những vị trí ngoài b:section như vào trong menu chẳng hạn)
- Thêm trực tiếp vào trong mẫu (Template) của bạn (với cách này bạn có thể cho vào bất cứ đâu bạn muốn, tuy nhiên bạn phải am hiểu về coder, Tất nhiên nếu bạn không tìm được vị trí hãy để lại comment của bạn ở bên dưới bài viết này).
» Dưới đây là một số kiểu chính bạn có thể lựa chọn bạn thích nha.
» Kiểu 1:
<style type="text/css"> #dt-searchbox{ border-radius:5px; background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwxEqmiV_fGYlmcANmnZigla0KfP0xSzI18geCEKkhrxVe5wGNQd1C1q1UOZ1iuZP29KDTLJubGTbe_CFHJ1Jrj3ft_krzF1uJa0nrOFDPEpUjW_OdKqBr3xSEaWJHu2KOvFcijsEcFnGM/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/AVvXsEiSz15xZ_o3EsXAbFbyPl5RnIM7OjY4fbymjuwhlc6YeiEQp0euoMpFzNcqR-VMUB7XU-hwStVf4NA6BpAmdqYJHBArSqDlhxgvUukvDNv19EeODGtpV-n2_jxF7-18EWrrjPFYdaB-eo2T/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/AVvXsEj0_Wp2sNM9W1PeQdM_1xQWJiQEZ9BYirBYup-nhoO_auKQBXGLXOw2vNepa9fbITpM95HGF-5d2Fk-tH64Xas8cYDrifGPgGSzfQnH7Mts6zPYc2nXi1nmQQCcWX8dX_A209xNRL8n9Trq/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/AVvXsEhy1pMS71r1WthUCalSja6IdtD8A4lh0z0SdWDFBNxs6jHO9FKzOOQHkeYOf_uv4mabpJZpC1Pc1eJuQZ79yNomBftw8r8YVMzaq86tvlUn_WYSb82dDitDU8SB0Y7dpZuT4V_ZBVu9Qa8y/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/AVvXsEge71k_KztEuMczohaWbxPhgelGI_7dRBeGJpDmL_x7vlWQ5zRL-jZtbvOMtRF_iQRWXYbGZjjgOQL0fgwofP_5mQj3NDO_4gTW9K0gYwpFvzD8hEYJlsLr77ZFJU3BbflntkBwtoC_25Da/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 !
Xem thêm thủ thuật: www.đoàntrịnh.vn
Nhận xét
Cảm ơn cháu vì bài viết rất bỏ ích
Trả lờiXóaCho cô sẽ cóp bài cung đường linh sang blog nháp của cô để khi cần tìm xem cho dễ nhé ?
Trả lờiXóaBài này được cộng tác viên Doan Trinh viết cô ak. Tất nhiên cô có thể làm như cô muốn ;)
XóaBlog của cháu nhiều bài quá . đôi khi phải tìm kiếm một bài nào đó mệt quá . nên cô phải làm vậy cháu ạ .hi... không có các cháu bà già này lắm lúc muốn khóc đó.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóae muốn thay khung này vào chỗ seach mặc định của blog thì làm thế nào a..
Trả lờiXóa