Tạo danh mục trang – Page Navigation

Thursday, 22 April 2010

Thủ thuật tạo tiện ích danh mục số trang Page Navigation cho Blogger của Mohamed Rias là một trong những thủ thuật về danh mục trang - Page Navigation thông dụng nhất. Chính vì đây là thủ thuật hữu ích nên bạn có thể thấy chúng ở bất kỳ đầu, đa số các Blogger nổi tiếng của Blogspot đều sử dụng thủ thuật này, chẳng hạn:

Nhưng nếu bạn để ý các comment trong các bài hướng dẫn thực hiện thì sẽ thấy rất nhiều ý kiến thắc mắc do không hiển thị được Danh mục trang. Nguyên nhân chính của lỗi này là do:

1. Tên miền trong đoạn đầu của script chỉ sử dụng cho blogger (.blogspot.com) và đã được giải thích chi tiết tại bài viết: Amanda give explanation about this.

2. Sẽ có một số mẫu Blogger không có tên id 'blog-pager.

- VnBlognet [dot] com: Để giải quyết câc vẫn đề này, abu-farhan đã thay đổi các tập lệnh và hướng dẫn chi tiết thực hiện bản hoàn chỉnh (đã sửa lỗi) như sau:

Truy cập vào Blogger:

- Truy cập vào Blogger Bảng điều khiển (Dashboard) >> Bố cục (Layout) >> Chỉnh sửa HTML (Edit HTML).

Chèn mã CSS vào mẫu Template:

- Tìm (Ctrl-F) đoạn tag ]]></b:skin>

- Thay ]]></b:skin> bằng đoạn mã sau:

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

]]></b:skin>

Chèn mã hiển thị :

Bước tiếp theo bạn tìm code ( Không cần click chọn Expand Widget Templates ) hay dòng lênh tương tự trong mẫu template như dưới :

<b:section class=’main’ id=’main’ showaddelement=’yes’>

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>

</b:section>

Thêm đoạn code sau:

<script type='text/javascript'>

var home_page_url = location.href; 


var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';


function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

htmlMap[htmlMap.length]=&#39;/&#39;;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;&amp;max-results=&#39;+pageCount;

}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};


for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
}else{
if(p==0){
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;

}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}
}

if(thisNum&gt;1){
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml; 
}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;
var thisUrl = home_page_url; 

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;&amp;max-results=&#39;+pageCount;

itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
}else{
if(p==0){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}
}

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml; 
}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

</script>

<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
}
}

var home_page = &quot;/&quot;;
if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){ 
if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){   
document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}
}
</script>

vào phía dưới tag </b:section> .

Mẹo: Nếu bạn không tìm thấy code cần tìm bạn có thể search (ctrl+f) cho key : id=’main’ để tìm.

Hoặc nếu thực sự khó khăn bạn có thể dán chúng vào trước thẻ </body>

Trong đoạn code ở trên, bạn có thể sửa các dòng sau:

var pageCount=10;

var displayPageNum=6;

Trong đó:

PageCount thể hiện số bài viết hiển thị trên một trang. Thay đổi số lượng theo ý định đặt số bài viết trên một trang của bạn.

displayPageNum: thể hiện sỗ trang sẽ hiển thị để bạn chọn lựa trong danh sách list.

Chỉnh sửa lỗi hiển thị với trang Label:

Tuy nhiên nếu bạn lựa chọn xem theo Label thì hiển thị không chính xác, với abu-farhan còn sửa được cả hiển thị trong Label.

Để thực hiện bạn làm như sau:

Bước 1 : Thêm Label Gadget (Layout –> page elements –> Add Gadget –> Select Labels)

Bước 2 : Vào Blogger >> Layout >> Edit HTML . Đừng quên sao lưu dự phòng template (Download Full Template) Bước 3 : Search đoạn code dưới:

và thay chúng bằng đoạn code:

<script type='text/javascript'>
var lblname = &quot;<data:label.name/>&quot;;

lblname2 = encodeURIComponent(lblname);
var feedlink = &#39;/search/label/&#39; + lblname2+&#39;?&amp;max-results=10&#39;;
document.write(&#39;&lt;a href=&quot;&#39; + feedlink + &#39;&quot;&gt;&#39;+lblname+&#39;&lt;/a&gt;&#39;);
</script>

và Click “save template” là bạn đã thực hiện xong hoàn hảo thủ thuật Danh mục số trang.

Bạn có thể click để xem bản Demo

CHÚC CÁC BẠN THÀNH CÔNG !!!

Tags: Breakingnews, Khoi tao Blog, Layout

Ý kiến bạn đọc [ 4 ]

Mario Llois 27 December 2010 17:48

Đầu tiên mình xin cám ơn bạn đã đăng bài viết này!
Mình đã làm và khá thành công, chỉ có 1 chổ bị lỗi. Đối với Labels trang đầu tiên nó hiện hết tất cả các bài (trong khi mình chỉnh là 5), trang tiếp theo nó lại đăng từ bài thứ 6! Bạn có thể giúp mình sửa lỗi này không? Thanks again!

vnblognet.com 28 December 2010 14:17

Ban oi, ở mục 4 có hướng dẫn sửa lỗi với label của Abu farhan rồi mà!. ban làm chưa?

Hot Girl Asian 26 January 2011 22:07

sao mình xem theo Label thì trang đầu nó vẫn hiện Newer Posts Home Older Posts chỉ khi nào bấm Older post nó mới hiện số trang giống ở trên thôi.
cái phần 4 mình ko tìm thấy dòng này mà chỉ có na ná giống vậy thôi (chắc tại mình đã chuyển cái Label cũ sang Flash Tag Cloud) bạn làm ơn chỉ cách khắc phục với

fattboy 6 February 2011 07:13

This comment has been removed by the author.

Tạo danh mục trang – Page Navigation

Ý kiến bạn đọc [ 4 ]

Ý kiến của bạn

TIÊU ĐIỂM

Total Pageviews

VnBlogNet

CƠ QUAN CHÉM GIÓ NHÂN DÂN TỐI CAO

01683 234 xxx hoặc 01665 667 xxx

BAY68.COM