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

Có nhiều cách để tìm bài viết trên một blogspot, chẳng hạn như tìm bằng từ khóa trên công cụ tìm kiếm, tìm bài viết tại trang lưu trữ, tìm theo nhãn, tìm bài viết theo ngày tháng. Bài viết này sẽ hướng dẫn bạn cách tạo tiện ích Tìm bài viết theo ngày, một tiện ích cũng rất cần thiết cho blogspot. Bạn có thể xem Demo bên dưới.

Tìm bài viết theo ngày
Ngày12345678910111213141516171819202122232425262728293031 Tháng010203040506070809101112 Năm20102011

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

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước thẻ </head>.

<style type="text/css">
#findXdate {
background-color: #243240;
border: 1px solid #4D5B68;
margin: 0 auto;
padding: 5px 0 10px;
text-align: center;
width: 250px;
}
#findXdate span {
color: #FFFFFF;
display:block;
margin-bottom: 5px;
}
#findXdate select {
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
font-size: 11px;
width: 60px;
}
#findXdate input {
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
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>

Trong đoạn code trên, bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn, lưu ý timezone tại Việt Nam chọn là +07:00.

Lưu Template.

Bước 2. Vào Page Elements, thêm một tiện ích HTML/Javascript và đặt đoạn code sau đây vào phần nội dung tiện ích.

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

Tip Package Download:
searchpostbydate.txt

More about →

TẢI VIDEO VÀ GAME FLASH DỄ DÀNG VỚI FIREFOX

Nếu khi duyệt các trang Web Blog nào có video hay khi chơi các game flash, bạn muốn tải chúng về máy tính thì có thể sử dụng Add-on Download Flash and Video dành riêng cho trình duyệt FireFox.

Để thực hiện, bạn kích hoạt FireFox và truy cập VÀO ĐÂY, sau đó bấm nút Add to FireFox > Install Now. 

Khi cài đặt xong, bạn khởi động lại trình duyệt sẽ thấy một mũi tên màu đen hướng xuống nằm ở  phía dưới góc phải màn hình. Mỗi khi truy cập vào trang Web/Blog có video hay game flash, bạn muốn tải về thì bấm vào mũi tên, ngay lập tức chương trình sẽ hiển thị danh sách các tập tin flash có trên trang Web/Blog đó và bạn chỉ việc chọn lựa các tập tin mình muốn từ danh sách này để tải về.

More about →

☆ THAY ĐỔI KÍCH THƯỚC ẢNH ĐỘNG GIF

Với sự hỗ trợ của phần mềm GifResizer (dung lượng 627KB), bạn có thể thay đổi dễ dàng kích thước của ảnh động Gif, phần mềm này hoàn toàn miễn phí và chạy độc lập không cần cài đặt.

Bạn tải phần mềm TẠI ĐÂY, khi tải về bạn giải nén kích đôi biểu tượng hình chữ G màu xanh để chạy phần mềm.

Bạn chọn tập tin ảnh động Gif cần thay đổi kích thước ở mục Source Gif Image file, chọn đường dẫn để lưu tập tin đã thay đổi kích thước ở mục New Gif image file. Sau đó, bạn thay đổi kích thước mình muốn ở 2 ô Width hoặc Height và chọn mục Good Quality để có chất lượng hình tốt hơn, xong bấm Resize để phần mềm thực thi.

More about →

☆ CHỤP MÀN HÌNH BẰNG CÔNG CỤ CÓ SẲN TRONG WIN7

Nếu bạn đang sử dụng Windows 7, bạn có thể dễ dàng chụp ảnh màn hình bằng công cụ được Windows 7 tích hợp sẳn, đó là công cụ Snipping Tool.

Đầu tiên, bạn nhập Snipping tool vào hộp tìm kiếm trên menu Start.

Cửa sổ chương trình hiện ra với giao diện nhỏ gọn bao gồm 3 nút chính là New, Cancel và Option.

Để bắt đầu chụp, bạn chỉ cần click vào mũi tên kế hộp New để chọn chế độ chụp, chương trình gồm 4 chế độ chụp là:

* FREE FORM SNIP: Chụp tùy chọn với hình dạng tùy ý do người dùng vẽ.

* RECTANGULAR SNIP: Chụp theo hình chữ nhật được chọn.

* WINDOWS SNIP: Chụp lại cửa sổ một chương trình đang chạy, nếu không có chương trình nào đang chạy thì Snippingtool sẽ xuất hiện các đường viền màu đỏ tại màn hình.

* FULL SCREEN SNIP: Chụp toàn màn hình.

Sau khi chọn xong một trong 4 chế độ chụp kể trên, tiếp theo bạn bấm nút New, khi đó màn hình sẽ mờ và chỉ hiện rõ vùng đang được bạn chụp. Khi chụp xong, chương trình sẽ tự động mở ra cho bạn một cửa sổ chứa kết quả kèm theo vài tiện ích nhỏ để bạn đánh dấu, vẽ mũi tên, tô highlight...vào tấm hình nếu cần thiết. sau đó bạn nhấn nút Save snip để lưu lại với các định dạng mình muốn.

More about →

THAY ĐỔI FAVICON CHO BLOGGER

Favicon là một biểu tượng nhỏ nằm trước địa chỉ một trang Web/Blog nào đó

Mặc định Favicon của Blogger là biểu tượng chữ B, bạn có thể thay đổi Favicon bằng Icon của riêng mình bằng cách

Đầu tiên bạn đăng nhập vào Blog, chọn Thiết kế > Chỉnh sửa HTML, sau đó bấm Ctrl+F để mở khung tìm kiếm, tiếp tục bạn gõ vào khung hàng chữ: <b:include data bạn sẽ thấy đoạn code sau: <b:include data='blog' name='all-head-content'/>

Tiếp tục bạn dán đoạn code sau vào sau nó: 

<link href='http://link icon' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Bạn thay thế dòng code màu đỏ bằng đường link của icon mình.

Bây giờ bạn trở vào Blog sẽ thấy Favicon đã được thay đổi.

Bạn VÀO ĐÂY để kiếm cho mình các mẫu Icon đẹp sau đó upload lên và lấy link thay vào.

More about →

TẠO NÚT "BACK TO TOP" CHO BLOGGER

Để tạo điều kiện thuận lợi cho khách tham quan khi đọc xong bài có thể quay về đầu trang nhanh chóng, bạn phải tạo cho Blog một nút bấm phía dưới cuối trang, khi bấm vào nút này lập tức sẽ đưa khách "về đầu trang".

Đầu tiên, bạn đăng nhập vào blog, chọn Thiết kế > Thêm tiện ích > Thêm HTML/Javacript rồi dán tòan bộ code dưới đây vào ô trống phía dưới, sau cùng bấm Lưu



<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf5MWgojh3hv6T3eY4LtE2kTjmzn9EnZmMxWHI3bJtU4sN-JlqwGlz9FvQPEAcFm4EntkdAsspMXnUV22Uc7Gh2ZdeOq-ze8K7FnBMO9qoEQuzmsktG9UvRfBAlHG365oCz1OJM4n3KMZW/s1600/vers-haut-icone-7320-48.png" /></a>

Bạn có thể thay đổi hàng chữ "Back to Top" thành hàng chữ nào mình thích (thí dụ: về đầu trang, lên trên...), nếu không thích hình mũi tên này, bạn cũng có thể thay đổi đường link "http:....png" bằng đường link hình của mình. (bạn VÀO ĐÂY để kiếm thêm một số hình mũi tên, thích cái nào thì tải về upload lên, rồi lấy link hình thay vào)

More about →

Khắc phục lỗi liên kết phân trang của Blogger

Các liên kết phân trang mặc định trên blogspot là Older Posts, Newer Posts, Home. Chúng ta có thể tùy biến để thay các liên kết này bằng text khác hoặc bằng icon. Tuy nhiên sau khi thực hiện, một số blogspot gặp một sự cố báo lỗi khi click vào liên kết Older Posts và Newer Posts đã được thay thế bằng icon. Bạn có thể xem thông báo lỗi ở hình bên dưới.

Để khắc phục lỗi này, trước tiên chúng ta hãy cùng nghiên cứu code phân trang của blogspot. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm đến đoạn code như bên dưới.

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Trong đoạn code trên, chúng ta có thể tùy biến những dòng sau:

<data:newerPageTitle/> đây là text chỉ các bài đăng mới hơn
<data:olderPageTitle/> đây là text chỉ các bài đăng cũ hơn
<data:homeMsg/> đây là text chỉ trang chủ

Qua quá trình nghiên cứu, Bloggerism phát hiện lỗi trên phát sinh do dòng data:widget.instanceId, đây là dữ liệu tiện ích xác định ID cho các liên kết phân trang, cho nên khi chúng ta tùy biến như thế nào đi nữa thì vẫn không có tác dụng, thậm chí còn gây ra lỗi nói trên.

Để khắc phục điều này, chúng ta chỉ cần loại bỏ dòng data:widget.instanceId ra khỏi đoạn code ở trên.

Thay expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'

Bằng id='blog-pager-newer-link'

Thay expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'

Bằng id='blog-pager-older-link'

Cuối cùng chúng ta có thể điều chỉnh như thế này:

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' title='Các bài viết mới hơn'>

Và

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' title='Các bài viết cũ hơn'>

Hy vọng bài viết này sẽ giúp bạn xử lý được sự cố khi gặp phải và hiểu rõ hơn về code phân trang của blogspot.

More about →