Bình thường khi vào một blog nào đó khi đọc các bài viết các bạn thấy có một mục là Older Post (Bài đăng cũ hơn) và Newer Post (Bài đăng Mới hơn). Mục này tiếng việt hay tiếng anh tùy vào tác giả của mỗi Blog cài đặt khác nhau. Để tiện lợi cho các bạn độc giả tiện theo dõi các bài viết qua các tên tiêu đề bài viết sau đây namkna hướng dẫn các bạn thủ thuật thay thế Older Post (Bài đăng Cũ hơn), Newer Post (Bài đăng Mới hơn) bằng tiêu đề Bài đăng tương ứng. Chỉ xuất hiện khi các bạn đọc bài viết, nó giúp những liên kết tới các Bài đăng Cũ hơn và Bài đăng Mới hơn trở nên trực quan, dễ nắm bắt hơn. Cách này tương tụ với cách thay bằng hình ảnh.
Ảnh minh họa:
1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Chọn Mở rộng tiện ích mẫu ( Expand Template Widgets) => Xem vdeo:
#blog-pager p{text-align:left}
5- Tìm đoạn code sau:
<b:includable id='post' var='post'>6- Tìm thẻ sau đây:
<b:includable id='post' var='post'>- Thêm vào sau nó đoạn code sau:
<b:if cond='data:blog.pageType == "item"'> <script type='text/javaScript'>var newer='';older='';timestampISO='<data:post.timestampISO8601/>';timestampISO=timestampISO.replace(/\+/g,'%2B');</script> </b:if>7- Tìm đoạn code sau:
<b:include name='nextprev'/>- Thay thế nó bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType == "item"'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:olderPageUrl'> <p> <data:olderPageTitle/>: <a expr:href='data:olderPageUrl' id='Blog1_blog-pager-older-link' rel='prev'><script type='text/javaScript'>older='y';</script></a> </p> </b:if> <b:if cond='data:newerPageUrl'> <p> <data:newerPageTitle/>: <a expr:href='data:newerPageUrl' id='Blog1_blog-pager-newer-link' rel='next'><script type='text/javaScript'>newer='y';</script></a> </p> </b:if> <script type='text/javaScript'> //<![CDATA[ function links(json){var newer_link='';older_link='';total_posts=json.feed.openSearch$totalResults.$t;start_index=json.feed.openSearch$startIndex.$t;items_perpage=json.feed.openSearch$itemsPerPage.$t;if(items_perpage==1){older_link=json.feed.entry[0].title.$t}else{newer_link=json.feed.entry[0].title.$t;if((total_posts-start_index)>1){older_link=json.feed.entry[2].title.$t}}if(older=='y'){document.getElementById('Blog1_blog-pager-older-link').innerHTML=older_link}if(newer=='y'){document.getElementById('Blog1_blog-pager-newer-link').innerHTML=newer_link}}function link_total_posts(json){var link_total_posts=json.feed.openSearch$totalResults.$t;if(link_total_posts!=1){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+(link_total_posts-1)+'&max-results=3&callback=links\"><\/script>')}else{document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=2&max-results=1&callback=links\"><\/script>')}}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&published-min='+timestampISO+'&max-results=0&callback=link_total_posts\"><\/script>'); //]]> </script> </div> <div class='clear'/> <b:else/> <b:include name='nextprev'/> </b:if>
Có 2 lần tải feed với dung lượng nhỏ, mình cá là nó nhanh hơn cách bloggersentral.com sử dụng jQuery để tải 2 thành phần bài viết liền kề!
Chúc thành công!
Theo: Duypham.
Nhận xét
sao không thấy bạn áp dụng thủ thuật này cho blog của bạn vậy? Nếu chèn quá nhiều đoạn code thế này vào trong blog thì có ảnh hưởng gì tới tốc độ load của blog mình không bạn? thank bạn nhiều lắm
Trả lờiXóa@MAS Group Vietnam Tại mình không thích dạng này cho lắm, nó ảnh hưởng không đáng kể đâu, Tại nó dùng link CSS không phải link JS nên bạn yên tâm không ảnh hưởng đâu. :3) :3) :3)
Trả lờiXóablog mình dùng đánh dấu số trang đó tại sao khi blog load xong bài khi đang xem trang 1 ấn vào trang 2 xem thì ko chuyển đc http://lethangblog.info bạn xem giúp mình,,,thanks
Trả lờiXóa@LÊ DUY THẮNG Ok để mình coi cho :3) :3) :3)
Trả lờiXóamình muốn xóa luôn cái hiển thị này đi được không bạn? hướng dẫn tớ cách làm với :3)
Trả lờiXóaThanks
@TDT Được chứ bạn vào Thiết Kế - Chỉnh Sửa HTML - Mở rộng tiện ích mẫu và tìm đoạn code tương tự như sau (Đoạn này mình không xem code của bạn được nên bạn tìm đoạn giống nha):
Trả lờiXóa<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
Và xóa đoạn CSS sau (Đoạn này thì chính xác vì mình xem nguồn của bạn):
#blog-pager-newer-link { padding: 0px 0 0 30px; float: left;}
#blog-pager-older-link {padding:0px 35px 0px 0px;float: right;}
#blog-pager {padding-top:25px;text-align: center;}
là được.:3) :3) :3)
xóa rồi, ko đc mới đau chứ :((
Trả lờiXóahe he tớ dùng kiểu khác :D
Trả lờiXóadùng công cụ mã display:none; chèn vô ok lun ;)
Anyway Thanks
Bạn ơi có cách nào ẩn/hiện ô comment không, mình muốn nó gọn trang hơn nữa, khi visitor muốn cmt thì bấm vô hiện ô cmt :D
Trả lờiXóa@TDT Uk bạn thêm display:none; cũng được tuy nhiên đó chỉ là không cho hiển thị trên blog thôi chứ không phải xóa đâu :3) :3) :3)
Trả lờiXóaCòn phần ẩn hiện ô Comment thì hiện tại chưa có đâu, Để mình thử coi có cách nào không nha :3) :3) :3)
mình đã làm từng bước như vậy nhưng không được, nó vẫn thể hiện kiểu cũ là older post và newer post
Trả lờiXóa@Vincent Đinh Mình quyên, với các blog free template thì bạn phải bỏ đoạn code cũ dạng như sau trong phần mở rộng tiện ích mẫu:
Trả lờiXóa<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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>
có cách nào để khi hover vào link thì nó hiện title không @@
Trả lờiXóaSủa dụng cấu trúc sau:
Xóa<a href="Link liên kết" title="Nội dung phần mô tả">Tên link</a>
ý mình là với cái code older newer này cơ, khi mình hover vào cái newer older thì nó hiện cái title ấy @@
XóaCài này bình thường nó hiện tiêu đề rồi. Giờ cho them title sẽ xấu. nếu bạn muốn có thể:
XóaThay:
<a expr:href='data:olderPageUrl' id='Blog1_blog-pager-older-link' rel='prev'>
thành:
<a expr:href='data:olderPageUrl' id='Blog1_blog-pager-older-link' rel='prev' expr:title='data:olderPageTitle'>
Thay:
<a expr:href='data:newerPageUrl' id='Blog1_blog-pager-newer-link' rel='next' expr:title='data:newerPageTitle'>
Nhận xét này đã bị tác giả xóa.
Trả lờiXóathanks bạn Namka, xem blog bạn từ hồi tết tới giờ từ hồi chưa biết xíu gì về code tới giờ có thể sửa script luôn, kaka
Trả lờiXóaA Nam cho mình hỏi mình định chèn cmt facebook vào blogger mà nó làm trang load lâu kinh khủng, bạn có cách nào tối ưu không chỉ mình với, cảm ơn Nam trước, website của mình: cacanhphongthuy.com, mới làm được 2 tháng
Trả lờiXóaA Nam cho mình hỏi mình định chèn cmt facebook vào blogger mà nó làm trang load lâu kinh khủng, bạn có cách nào tối ưu không chỉ mình với, cảm ơn Nam trước, website của mình: cacanhphongthuy.com, mới làm được 2 tháng
Trả lờiXóa