• 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

Cài đặt Next Post và Previous Post cho blogspot

6
08/08/2011

Khi lướt xem một số blog được xây dựng trên nền tảng Wordpress, kéo xuống đáy trang hẳn bạn sẽ thấy các liên kết Next Post, Previous Post lần lượt hiển thị tiêu đề bài viết kế tiếp và bài viết trước (ví dụ ở trang Mothuthuat.com). Đặc điểm này rất cần thiết song đối với blogspot thì dường như chưa phổ biến. Liệu blogspot có thể làm được điều này chăng?

Gần đây, mình được biết trang Bloggersentral.com đã có thủ thuật thay thế các liên kết Newer Posts, Older Posts bằng tiêu đề bài viết, sử dụng jQuery tùy biến từ một thủ thuật tương tự của trang Etblue. Tuy nhiên thủ thuật ở 2 trang nói trên đều áp dụng cho tất cả các kiểu trang (gồm trang chủ, trang nhãn, trang lưu trữ và trang item). Điều chúng ta quan tâm là chỉ áp dụng tính năng này cho riêng các trang item (là các trang bài viết), còn các trang index (trang chủ, trang nhãn và trang lưu trữ) thì giữ nguyên kiểu phân trang thông thường.

Mình nhận thấy thật cần thiết phải có tính năng này cho blogspot để áp dụng rộng rãi hơn và đã thử nghiệm thành công trên Thủ thuật Blogger như bạn có thể thấy ở phần đáy trang vậy. Ở đây mình chia ra 2 trường hợp: đối với blogspot tiếng Việt và đối với blogspot tiếng Anh (do đối với blogspot mình có thể sử dụng thêm cách dùng Javascript mà không dùng jQuery).



Để cài đặt tính năng này, bạn hãy Đă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>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</div>
<div class='clear'/>
</b:includable>
Trường hợp 1: Đối với blogspot tiếng Việt.

Bước 1: 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:newerPageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='prev_next'>
<p class='next'>
<span>Next post:</span> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl'>
<data:newerPageTitle/>
</a></p>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
});
//]]>
</script>
</div>
<b:else/>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Về trang trước'>&#171; Prev</a>
</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>

<b:if cond='data:olderPageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='prev_next'>
<p class='previous'>
<span>Previous post:</span> <a class='blog-pager-older-link' expr:href='data:olderPageUrl'>
<data:olderPageTitle/>
</a></p>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
});
//]]>
</script>
</div>
<b:else/>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Đến trang sau'>Next &#187;</a>
</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;}
.prev_next p {float:left;text-align:left}
.prev_next span {font-size:12px;text-transform: uppercase;}
.prev_next a{text-decoration: none;color: #069;}
</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.

Trường hợp 2: Đối với blogspot tiếng Anh.

Riêng đối với blogspot tiếng Anh, ngoài phương pháp ở trên, có thể sử dụng thêm một phương pháp khác. Mình có thể sử dụng javascript để chuyển hóa URL bài viết thành tiêu đề bài viết, áp dụng theo các bước sau đây:

Bước 1. Đặt đoạn code sau đây vào trước thẻ </head>.
<script type='text/javascript'>
function writeTitle(navURL) {
var parts = navURL.split(&#39;/&#39;);
auxiliar=parts[parts.length-1]
auxiliar = auxiliar.replace(/-/g,&quot; &quot;);
namePagi = auxiliar.replace(&quot;.html&quot;,&quot;&quot;);

var firstLetter = namePagi.substring(0, 1).toUpperCase();
var theRest = namePagi.substring(1, namePagi.length).toLowerCase();
namePagi = firstLetter + theRest;

document.write(namePagi);
}
</script>
Bước 2. Thay đoạn code phân trang bằng đoạn code bên dưới:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<b:if cond='data:blog.pageType == "item"'>
<div class='prev_next'>
<p class='next'>
<span>Next post:</span> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl'>
<data:newerPageTitle/>
<script language='javascript'>
var navURL = &quot;<data:newerPageUrl/>&quot;;
writeTitle(navURL)
</script>
</a></p>
</div>
<b:else/>
<a class='blog-pager-newer-link'
expr:href='data:newerPageUrl'
expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>

<b:if cond='data:olderPageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='prev_next'>
<p class='previous'>
<span>Previous post:</span> <a class='blog-pager-older-link' expr:href='data:olderPageUrl'>
<data:olderPageTitle/>
<script language='javascript'>
var navURL = &quot;<data:olderPageUrl/>&quot;;
writeTitle(navURL)
</script>
</a></p>
</div>
<b:else/>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Back to Previous Page'>&#171; Prev</a>
</b:if></b:if>

</div>

<div class='clear'/>
</b:includable>

{6 bình luậnAdd yours ?}

16:33:00, 8 thg 8, 2011

Ồ, đã lâu lắm em mới đọc được 1 thủ thuật đáng giá :55). Em đánh giá cao trường hợp 1 khi lấy được tiêu đề của bài viết, còn trường hợp 2 thì k hay lắm, cách đấy cũng đã thấy khi ở recent posts khi hiển thị tiêu đề từ URL. Có vẻ như việc lấy tiêu đề k đụng chạm đến feed, comment cái rồi nghiên cứu sau :65)

Reply
16:39:00, 8 thg 8, 2011

Cảm ơn DP nhé, comment rất chân thực. Trường hợp 2 chỉ tham khảo thêm 1 cách có thể áp dụng được, dành cho blogspot tiếng Anh.

Reply
18:11:00, 8 thg 8, 2011

Ẩn cái +1 ngoài trang chủ thì làm sao hả bác

Reply
19:20:00, 8 thg 8, 2011

Code thế này nha:
<b:if cond='data:blog.pageType == "item"'>
<div style='float:left;padding:10px;'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone expr:href="data:post.url" size="small" count="true"></g:plusone>
</div>
</b:if>

Reply
19:24:00, 8 thg 8, 2011

Hoặc thế này cũng được:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div style='float:left;padding:10px;'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone expr:href="data:post.url" size="small" count="true"></g:plusone>
</div>
</b:if>

Reply
08:13:00, 11 thg 8, 2011

Thông báo: Blogger sẽ ở trạng thái chỉ đọc (read-only) vào lúc 5 giờ chiều (giờ chuẩn Thái Bình Dương) ngày 10/8/2011 kéo dài khoảng 1 tiếng đồng hồ, tức từ lúc 7 giờ đến 8 giờ sáng (giờ Việt Nam) ngày 11/8/2011, để tiến hành mở rộng dung lượng cho người dùng.
(Blogger will go into read-only mode Wednesday (8/10) 5:00PM PST for about an hour as we work to expand capacity for our users. Thanks in advance.)

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