Tạo danh mục trang – Page Navigation

( 24ahz.com) - 

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:

• Bloggerbuster
• Bloggertricks
• Deluxetemplates
• Blogger Pluggin

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: 

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

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

Nguồn : vnblognet

Nếu bạn gặp khó khăn về ngoại ngữ hãy coppy tên try cập ( link ) của trang hoặc đoạn văn bản cần dịch dán vào trang Google dich . Xin cảm ơn các bạn đã ủng hộ chúng tôi !