Tiện ích tìm bài viết theo ngày tùy chỉnh

Mỗi blog ít nhiều phải có công cụ tìm kiếm tại blog với từ khóa,...Tuy nhiên, bạn muốn cho người đọc tìm kiếm bài viết theo ngày xuất bản có phần mới mẻ hơn cho việc người đọc luôn tìm cái mới.


Để cài đặt tiện ích này, bạn hãy thực hiện như sau.

Bước 1. Vào thiết kế blog, chọn chỉnh sửa HTML. Đặt đoạn code bên dưới vào trước thẻ </head>.
Lưu ý : Code này mình đã mã hóa (chuyển đổi) vì code nguyên mẫu khi bạn dán vào lưu thì sẽ bị lỗi mình đã Demo như thế này : Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "updated-min" must end with the ';' delimiter.
<style type="text/css"> #findXdate { background-color: #191919; border: 2px solid #434343; border-radius: 3px; margin: 0 auto; padding: 5px 0 10px; text-align: center; width: 278px; } #findXdate span { color: #FFFFFF; font-weight: bold; display:block; margin-bottom: 5px; } #findXdate select { background-color: #191919; border: 2px solid #434343; color: #fff; font-size: 11px; width: 60px; } #findXdate input { background-color: #191919; border: 2px solid #434343; color: #fff; cursor: pointer; font-size: 10px; font-weight: bold; } </style> <script type="text/javascript"> home_page = "http://vnbacklink.blogspot.com/"; timezone = "+07:00"; function submitdate(){ year = document.selectdate.year.options[document.selectdate.year.selectedIndex].value;month = document.selectdate.month.options[document.selectdate.month.selectedIndex].value;day = document.selectdate.day.options[document.selectdate.day.selectedIndex].value;tmax = year+"-"+month+"-"+day+"T23:59:59"+timezone; tmin = year+"-"+month+"-"+day+"T00:00:00"+timezone; tlink = home_page+"search?updated-max="+encodeURIComponent(tmax)+"&updated-min="+encodeURIComponent(tmin)+"&max-results=20"; if(year=="" || month=="" || day=="") { alert("Vui lòng chọn ngày chính xác!"); return false; } else { self.location.href=tlink; } } </script>

Nếu blog bạn không bị lỗi như trên thì dùng code nguyên mẫu dưới đây cũng được, tùy bạn:

<style type="text/css"> #findXdate { background-color: #191919; border: 1px solid #434343; border-radius: 3px; margin: 0 auto; padding: 5px 0 10px; text-align: center; width: 278px; } #findXdate span { color: #FFFFFF; display:block; margin-bottom: 5px; } #findXdate select { background-color: #191919; border: 2px solid #434343; color: #ffffff; font-size: 11px; width: 60px; } #findXdate input { background-color: #191919; border: 2px solid #434343; color: #ffffff; cursor: pointer; font-size: 10px; font-weight: bold; } </style> <script type="text/javascript"> home_page = "http://huynh-nhat-ha.blogspot.com/"; timezone = "+07:00"; function submitdate(){ year = document.selectdate.year.options[document.selectdate.year.selectedIndex].value;month = document.selectdate.month.options[document.selectdate.month.selectedIndex].value;day = document.selectdate.day.options[document.selectdate.day.selectedIndex].value;tmax = year+"-"+month+"-"+day+"T23:59:59"+timezone; tmin = year+"-"+month+"-"+day+"T00:00:00"+timezone; tlink = home_page+"search?updated-max="+encodeURIComponent(tmax)+"&updated-min="+encodeURIComponent(tmin)+"&max-results=20"; if(year=="" || month=="" || day=="") { alert("Vui lòng chọn ngày chính xác!"); return false; } else { self.location.href=tlink; } } </script>

Các bạn nhớ thay đổi địa chỉ của bạn và thông số màu sắc, độ rộng cao ở code trên cho phù hợp blog bạn nhé!
Xong rồi, lưu Mẫu.

Bước 2. Vào Phần tử trang, thêm một tiện ích HTML/Javascript hoặc Widget đã có sẵn nơi bạn muốn hiện thị và dán đoạn code sau đây vào phần nội dung tiện ích.

<form id="findXdate" name="selectdate"><span>Tìm kiếm bài viết theo ngày</span> <select name="day"><option value="" selected />Ngày<option value="01" />1<option value="02" />2<option value="03" />3<option value="04" />4<option value="05" />5<option value="06" />6<option value="07" />7<option value="08" />8<option value="09" />9<option value="10" />10<option value="11" />11<option value="12" />12<option value="13" />13<option value="14" />14<option value="15" />15<option value="16" />16<option value="17" />17<option value="18" />18<option value="19" />19<option value="20" />20<option value="21" />21<option value="22" />22<option value="23" />23<option value="24" />24<option value="25" />25<option value="26" />26<option value="27" />27<option value="28" />28<option value="29" />29<option value="30" />30<option value="31" />31</select> <select name="month"><option value="" selected />Tháng<option value="01" />01<option value="02" />02<option value="03" />03<option value="04" />04<option value="05" />05<option value="06" />06<option value="07" />07<option value="08" />08<option value="09" />09<option value="10" />10<option value="11" />11<option value="12" />12</select> <select name="year"><option value="" selected />Năm<option value="2011" />2011<option value="2012" />2012<option value="2013" />2013<option value="2014" />2014<option value="2015" />2015</select> <input type="button" onclick="submitdate()" value="TÌM"/></form>

Các giá trị trong code này bạn cũng có thể tùy chỉnh thêm.
 Demo code trên:

Xong rồi, Lưu widget và xem thành quả.

Please share it! :(