Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]


Cấp bậc !
•Bang Chủ•
avatar
•Bang Chủ•

[KiNg]_[PiN]-BB

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:

Code:
<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 +
"_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>

</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:
Code:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>

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

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

<b:if cond='data:olderPageUrl'>

[color=red]<b:if cond='data:blog.pageType == "item"'>[/color]
[color=red]<div class='prev_next'>[/color]
[color=red]<p class='previous'>[/color]
[color=red]<span>Previous post:</span> <a class='blog-pager-older-link' expr:href='data:olderPageUrl'>[/color]
[color=red]<data:olderPageTitle/>[/color]
[color=red]</a></p>[/color]
[color=red]<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>[/color]
[color=red]<script type='text/javascript'>[/color]
[color=red]//<![CDATA[[/color]
[color=red]$(document).ready(function(){ [/color]
[color=red]var olderLink = $("a.blog-pager-older-link").attr("href"); [/color]
[color=red]$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { [/color]
[color=red]var olderLinkTitle = $("a.blog-pager-older-link").text(); [/color]
[color=red]$("a.blog-pager-older-link").text(olderLinkTitle); [/color]
[color=red]}); [/color]
[color=red]}); [/color]
[color=red]//]]>[/color]
[color=red]</script>[/color]
[color=red]</div>[/color]
[color=red]<b:else/>[/color]<a
 class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId +
"_blog-pager-older-link"' title='Đến trang
sau'>Next »</a>
</b:if> [color=red]</b:if>[/color]

</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 ]]>.
Code:
<b:if cond='data:blog.pageType == "item"'>
<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 == "static_page"'>
<style>
#blog-pager {display:none}
</style>
<b:else/>
<style>

[color=red]Đặt code CSS vừa bị cắt vào đây nha[/color]</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ẻ .
Code:
<script type='text/javascript'>
function writeTitle(navURL) {
var parts = navURL.split('/');
auxiliar=parts[parts.length-1]
auxiliar = auxiliar.replace(/-/g," ");
namePagi = auxiliar.replace(".html","");

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:
Code:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>

[color=red]<b:if cond='data:blog.pageType == "item"'>[/color]
[color=red]<div class='prev_next'>[/color]
[color=red]<p class='next'>[/color]
[color=red]<span>Next post:</span> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl'>[/color]
[color=red]<data:newerPageTitle/>[/color]
[color=red]<script language='javascript'>[/color]
[color=red]var navURL = "<data:newerPageUrl/>";[/color]
[color=red]writeTitle(navURL)[/color]
[color=red]</script>[/color]
[color=red]</a></p>[/color]
[color=red]</div>[/color]
[color=red]<b:else/>[/color]<a class='blog-pager-newer-link'
expr:href='data:newerPageUrl'
expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</b:if>[color=red]</b:if>[/color]

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

<b:if cond='data:olderPageUrl'>

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

</div>

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

Hãy xây dựng diễn đàn cùng [KiNg]_[PiN]-BB bạn nhé !!!


Admin không phải cái gì cũng biết
Admin chỉ mở ra một cộng đồng để những người hiểu biết và mới biết, trao đổi học tập !
Mong Các bạn đừng đánh giá hay nói bất cứ một lời lẽ nào khích tướng OK...

Không Hay Đừng Nói Lời Cay Đắng

[*]Diễn đàn đẹp nhất với trình duyệt web Mozilla Firefox
[*]Còn với mấy loại còn lại chắc là thuộc dang diễn đàn tồi nhất !!!
Xem lý lịch thành viên http://a1k44.thptbatbat.com
Loading

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Forumotion.com | © PunBB | Free forum support | Liên hệ | Report an abuse | Free blog
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải