• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo Next Post và Previous Post theo phong cách Wordpress

18
28/08/2011

Trước đây, mình đã từng hướng dẫn bạn cài đặt Next Post và Previous Post cho blogspot, theo đó giúp bạn thay đổi các liên kết Newer Posts, Older Posts ở các trang item thành các tiêu đề bài viết như phong cách ở các trang Wordpress. Thủ thuật này có sử dụng thư viện jQuery. Hôm nay mình sẽ giúp bạn thực hiện một thủ thuật có chức năng tương tự song chỉ sử dụng đến Javascript.

Xem DEMO.


Để cài đặt tính năng này bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Dùng từ khóa blog-pager tìm đến đoạn code liên quan đến thuật phân trang 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>

<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>
<div class='clear'/>
</b:includable>

Thay đoạn code ở trên bằng đoạn code bên dưới:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Next Post and Previous Post Script by www.thuthuatblogger.info
function search(json,urlsearch) {

max_post=500;

txt_next='Next Post';
txt_previous='Previous Post';
var prev_posturl='';
var prev_posttitle='';
var next_posturl='';
var next_posttitle='';
post_found=0;
var i=0;
var j=0;

for (i = 0; i < max_post; i++) {
var post = json.feed.entry[i];
var posttitle = post.title.$t;
var posturl;

if (i == json.feed.entry.length) break;
for (var k = 0; k < post.link.length; k++) {
if (post.link[k].rel == 'alternate') {
posturl = post.link[k].href;
break;
}
}

if (posturl == urlsearch) {
j=i;
i=max_post;
post_found=1;
}
else{
next_posturl=posturl;
next_posttitle=posttitle;
}
}

if (post_found == 1) {
j=j+1;
post = json.feed.entry[j];
prev_posttitle = post.title.$t;
for (var k = 0; k < post.link.length; k++) {
if (post.link[k].rel == 'alternate') {
prev_posturl = post.link[k].href;
break;
}
}
}

if (next_posturl != '') {
entry_next_post = '<br /><span id="blog-pager-newer-link">' + txt_next + ': <a href="' + next_posturl + '" title="' + next_posttitle + '" class="blog-pager-newer-link">' + next_posttitle + '</a></span>';

document.write(entry_next_post)
}

if (prev_posturl != '') {
entry_prev_post = '<br /><span id="blog-pager-older-link">' + txt_previous + ': <a href="' + prev_posturl + '" title="' + prev_posttitle + '" class="blog-pager-older-link">' + prev_posttitle + '</a></span><br />';

document.write(entry_prev_post)
}

}

function searchpost(json) {
url=document.URL;
search(json,url);
}
//]]>
</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=searchpost'>
</script>
<b:else/>

<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>


<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>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Bước 2. Dùng từ khóa blog-pager tìm đến code CSS liên quan đến phân trang, cắt hết chúng rồi đặt đoạn code như sau vào sau dòng ]]></b:skin>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#blog-pager {margin:0px;padding:10px 0 20px;float: left}
#blog-pager-newer-link, #blog-pager-older-link {float:left;text-align:left}
</style>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
#blog-pager {display:none}
</style>
<b:else/>
<style>
Đặt code CSS vừa bị cắt vào đây nha
</style>
</b:if></b:if>

Lưu Template là xong.

Điểm hạn chế của Script này là do sử dụng JSON nên bài viết tối đa để search là 500, do đó nếu blogspot của bạn có hơn 500 bài viết thì có thể áp dụng thủ thuật này không thành công.

{18 bình luậnAdd yours ?}

07:06:00, 29 thg 8, 2011

a.Hà nghiên cứu luôn được cả mấy thứ này, hay quá đi mất. em thì mù tịt đọc cũng chả hiểu nữa

Reply
07:11:00, 29 thg 8, 2011

một ngày nào đó cộng đồng blogger Việt chúng ta sẽ được thế giới công nhận

Reply
08:18:00, 29 thg 8, 2011

@blue79blog Mục đích chính là để blogspot chúng ta có thể làm được những tính năng như Wordpress, để bằng anh bằng chị ấy mà.

Reply
08:33:00, 29 thg 8, 2011

Muốn hơn wp thì phải trông chờ những cải tiến từ phía Google, đặc biệt là vấn đề cơ sở dữ liệu. Chứ như hiện nay còn hạn chế lắm :60)

Reply
09:06:00, 29 thg 8, 2011

Chờ Goolge cải tiến chắc rụng răng mất. Thôi mình tự thân vận động vậy. Cải tiến được chút nào cho ae xài đến đâu thì hay đến đó vậy :51).

Reply
11:41:00, 29 thg 8, 2011

nếu em tham gia bên blog a.Hà thì e chỉ viết, áp dụng mấy cái thủ thuật bên nước ngoài họ share thôi.
nhưng khổ nỗi viết thủ thuật là phải có demo mà e đang làm biếng cái vụ này

Reply
11:47:00, 29 thg 8, 2011

Thanks Hà. Cái này hay quá. Hôm nào làm template sẽ dùng tới.

Reply
17:02:00, 29 thg 8, 2011

ATTN: blue79blog
Làm siêng demo trên một trang blogspot vừa thử nghiệm vừa minh họa bài viết.

Reply
18:52:00, 29 thg 8, 2011

Em cũng ấp ủ khá nhiều thủ thuật hay, sưu tầm, chế lại, tự phát minh đủ cả nhưng lười viết bài quá, với lại time ko có nữa. Nhưng bữa nào thấy hứng bác Hà cho em tham gia đội ngũ cộng tác viên nữa nhé. Chắc 3 tháng e viết đc 1 bài :65)

Reply
20:09:00, 29 thg 8, 2011

TTB luôn mở rộng cửa chào đón các tác giả có nhiệt huyết mà.

Reply
22:20:00, 29 thg 8, 2011

hèm, lần trước em cũng chuyển sang thử cái này, nhưng h đã nhận ra rõ rằng rằng, blogger cũng có cái tuyệt vời của nó, nên thân quen nhất vẫn là Older post, newer post thôi, sao phải bắt chước wp chứ

Reply
22:27:00, 29 thg 8, 2011

Bắt chước là hành động bản năng đầu tiên của loài vượn người tổ tiên chúng ta. Nếu k có bắt chước Wordpress thì Blogger cũng kém sôi nổi đi đó. Cái Older, Newer đó 100% k thể nào bằng cái Next Post, Prev Post được.

Reply
07:51:00, 12 thg 9, 2011

mình ko hiểu bước 2 bạn ơi!

Reply
09:50:00, 12 thg 9, 2011

Các lệnh điều kiện ở Bước 2 ý nói rằng, ở các trang item (trang đọc bài viết) thì tạo CSS cho Next Post, Prev Post, còn các trang tĩnh thì ẩn phân trang, còn các trang còn lại (trang chủ, trang nhãn, trang lưu trữ) thì dùng CSS phân trang.

Reply
11:50:00, 18 thg 9, 2011

Hà nghiên cứu sao đề giải thoát khỏi cái JSON để không ảnh hưởng về vấn đề số lượng bài viết đi

Reply
15:51:00, 18 thg 9, 2011

@VnAbout Nếu VnAbout có trên 500 bài thì áp dụng cái này vậy. Chức năng tương đương đó.

Reply
13:51:00, 12 thg 10, 2011

Không!!! Mình chưa đến mức nhiều như thế, chỉ là hỏi để áp dụng cho vnpressnet thui, mà mình hý hoáy mãi mà chẳng thể nào canh lề trái cho Next post và lề phải cho Previous post được, hà có thể giúp mình được không?

Cứ cảm ơn trước cho chắc :1)

Reply
16:03:00, 27 thg 3, 2012

Anh huynh nhật hà ới em hỏi cái em download template về muốn đổi banner ảnh = ảnh cua em vào sao kích thước nó bị thu nhỏ vào anh ạ anh giup em được ko site em là nuskinvina.blogspot.com

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn