Thứ Sáu, 30 tháng 3, 2012

Phân trang cho nhận xét với bài trên 200 nhận xét

Sau khi Comments phân cấp được Blogger đưa vào hoạt động thì hệ thống phân trang cho comments cũ đã không còn được hỗ trợ. Với những bài viết có trên 200 nhận xét nếu như không dùng Comments phân cấp của Blogger thì việc theo dõi những nhận xét này sẽ trở nên khó khăn. Bài viết này sẽ hướng dẫn bạn tạo phân trang cho bài viết có trên 200 nhận xét.

comments navigation


Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
.comments-pager{clear:bold;margin:10px 0;line-height:30px;font-size:13px}
.comments-pager .page-first{float:left;margin-right:6px}
.comments-pager .page-items{float:right}
.comments-pager .page-number,.comments-pager .page-next{margin-left:6px}
.comments-pager .page-number,.comments-pager .page-prev{margin-right:6px}
.comments-pager .selected{border:1px solid #BBB;background:#FFF;padding:5px}

Bước 2: Tìm trong template đoạn mã dưới đây:
<b:if cond='data:post.commentPagingRequired'>
 <span class='paging-control-container'>
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
  &#160;
  <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
  &#160;
  <data:post.commentRangeText/>
  &#160;
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
  &#160;
  <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
 </span>
</b:if>

Có 2 đoạn mã như vậy. Thay thế đoạn mã thứ nhất bằng đoạn mã sau:
<b:if cond='data:post.numComments &gt; 200'>
 <div class='comments-pager' id='comments-pager-top'/>
</b:if>

Thay thế đoạn mã thứ 2 bằng đoạn mã sau:
<b:if cond='data:post.numComments &gt; 200'>
 <div class='comments-pager' id='comments-pager-bottom'>
  <script type='text/javascript'>
var numcomments='<data:post.numComments/>';
//<![CDATA[
var current;numshowpage=5;prev='&#8592;';next='&#8594;';pagefirst='Page';pageitems='Comments';dw='';urlactivepage=location.href;numpage=parseInt((numcomments-1)/200)+1;urlpost=urlactivepage.split('.html');urlpost=urlpost[0]+'.html';if(urlactivepage.indexOf('?commentPage=')==-1){current=1}else{current=parseInt(urlactivepage.substring(urlactivepage.indexOf('?commentPage=')+13))}var integer=parseInt(numshowpage/2);if(integer==numshowpage-integer){numshowpage=integer*2+1}first=current-integer;if(first<1){first=1}last=first+numshowpage-1;if(last>numpage){last=numpage;if((last-first+1)<numshowpage){first=last-numshowpage+1;if(first<1){first=1}}}if(current*200<=numcomments){dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+(current*200)+' / '+numcomments+' '+pageitems+'</span>'}else{if((((current-1)*200)+1)==numcomments){dw+='<span class="page-items">'+numcomments+' / '+numcomments+' '+pageitems+'</span>'}else{dw+='<span class="page-items">'+(((current-1)*200)+1)+' - '+numcomments+' / '+numcomments+' '+pageitems+'</span>'}}dw+='<span class="page-first">'+pagefirst+'</span>';if(current>1){dw+='<a class="page-prev" href="'+urlpost+'?commentPage='+(current-1)+'#comments">'+prev+'</a>'}if(first>1){dw+='<a class="page-number" href="'+urlpost+'?commentPage=1#comments">1</a>'}if(first>2){dw+='<span class="gap">&#133;</span>'}for(i=first;i<=last;i++){if(i==current){dw+='<span class="selected">'+i+'</span>'}else{dw+='<a class="page-number" href="'+urlpost+'?commentPage='+i+'#comments">'+i+'</a>'}}if(last<numpage-1){dw+='<span class="gap">&#133;</span>'}if(last<numpage){dw+='<a class="page-number" href="'+urlpost+'?commentPage='+numpage+'#comments">'+numpage+'</a>'}if(current<numpage){dw+='<a class="page-next" href="'+urlpost+'?commentPage='+(current+1)+'#comments">'+next+'</a>'}var a=document.getElementById('comments-pager-top');a.innerHTML=dw;a=document.getElementById('comments-pager-bottom');a.innerHTML=dw;
//]]>
  </script>
 </div>
</b:if>

5 là số trang được hiển thị.

Đã cập nhật mã javascript sửa lỗi xét thiếu trường hợp số trang được hiển thị và đường dẫn trong chuyển trang thừa sau khi xem permalink comment.

nút bấm

NÚT BẤM LÊN ĐẦU TRANG XUỐNG CUỐI TRANG

Tôi có sưu tầm từ trang Web nước ngoài một vài mẫu nút bấm lên đầu trang và xuống cuối trang dùng cho Web/Blog.
Ứng với mỗi mẫu là code để chèn vào Blog, các bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML/Javacript rồi dán code vào, bấm Lưu lại là xong.


Bạn bấm vào Xem thử để trải nghiệm nút bấm nha!!!

Xem thử


Dưới đây là hình minh hoạ và code của các mẫu nút bấm, bạn thích cái nào thì copy code bên cạnh để dán vào Blog


<div id="navigation_up_down_37339"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/1-37339-right.js"></script></div> 



 
<div id="navigation_up_down_79523"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/2-79523-right.js"></script></div>



 <div id="navigation_up_down_89846"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/3-89846-right.js"></script></div>



 <div id="navigation_up_down_8685"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/4-8685-right.js"></script></div>


<div id="navigation_up_down_60107"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/5-60107-right.js"></script></div>


<div id="navigation_up_down_30337"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/6-30337-right.js"></script></div>


<div id="navigation_up_down_21622"><<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/7-21622-right.js"></script></div>


 <div id="navigation_up_down_42562"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/8-42562-right.js"></script></div>


 <div id="navigation_up_down_90798"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/9-90798-right.js"></script></div>


<div id="navigation_up_down_58760"><script type="text/javascript" src="http://dl.dropbox.com/u/66348944/dunghennessylenxuongdautrang/10-58760-right.js"></script></div>


Read more: NÚT BẤM LÊN ĐẦU TRANG XUỐNG CUỐI TRANG | dunghennessy 
Under Creative Commons License: Attribution Share Alike

tao menu so doc

MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 2)

Trước đây, tôi có đăng bài TẠO MENU  NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 1), với kiểu này thì menu chỉ có một màu đen, chữ trắng và các bạn không thể đổi màu được.

Do có một số bạn hỏi: Sao không đổi màu cho menu được?, vì vậy hôm nay tôi xin giới thiệu đến các bạn MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 2), menu này cũng giống với menu kiểu 1 nhưng thay vào đó các bạn có thể dễ dàng đổi màu cho menu, đổi màu cho chữ trên menu... 

Mời bạn bấm vào "Xem thử" phía dưới để thấy rõ hiệu ứng xổ dọc của menu này




Xem thử



Để tạo được như vậy, các bạn cần làm theo các bước sau đây:
Đầu tiên, bạn đăng nhập vào Blog > Chọn thiết kế > Chọn chỉnh sửa HTML, sau đó bạn bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào khung dòng lệnh <head>. Bây giờ bạn copy đoạn code này và dán phía dưới dòng lệnh đó.




<style type='text/css'>
html .jqueryslidemenu{height: 1%;}
</style>

<script src='http://dl.dropbox.com/u/66348944/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/66348944/drop_menu.js' type='text/javascript'/>



Sau khi dán xong đoạn code này, bạn xoá dòng lệnh cũ đi và tiếp tục gõ vào khung tìm kiếm dòng lệnh </header> rồi copy tất cả các code này vào trên dòng lệnh đó và bấm Lưu mẫu.



<style>
.jqueryslidemenu{
font: bold 12px Verdana;
background:#153E7E; /* màu nền của menu*/
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

.jqueryslidemenu ul li a{
display: block;
background:#15317E; /* màu nền của thư mục chính*/
color: white; /*màu text thư mục chính*/
padding: 8px 10px;
border-right: 1px solid #778;
color: #ccc;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{
display: inline-block;
}

/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ff0066; //màu cchữ các menu
}*/

.jqueryslidemenu ul li a:hover{
background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
color: white; /*màu text khi rê chuột*/
}

.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

.jqueryslidemenu ul li ul li ul{
top: 0;
}

.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;
color: black;
}

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}</style>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://dungheineken8.blogspot.com/">Home</a></li>

<li><a href="http://dungheineken.blogspot.com/">Thủ thuật máy computer</a></li>

<li><a href="http://anhdepblog.blogspot.com/">Thủ thuật Ảnh </a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul></li>

<li><a href="http://phimvang.org/">Xem phim</a></li>

<li><a href="#">Blogspot</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul> </li> </ul></li>

<li><a href="http://www.nhaccuatui.com/">Nghe nhạc</a></li>

<li><a href="http://anhdepblog.blogspot.com/">Hình ảnh</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul></li>

<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
</ul></li>


</ul><br style="clear: left" />
</div>



Bây giờ điều bạn cần làm là thay đổi các dữ liệu trong các dòng lệnh <a herf="#" (thay # bằng địa chỉ link liên kết), tên menu và thay đổi màu cho menu, màu chữ theo ý thích của bạn (có ghi chú ở code) cho phù hợp với Blog của mình. Cuối cùng bấm Lưu mẫu và trở lại Blog để "thưởng thức" thành quả. Lưu ý: Có một số giao diện blog sẽ không có lệnh </header>, do vậy bạn phải thêm tiện ích HTML/Javacript rồi dán code phần 2 vào và lưu lại là xong.