Due to Blogger Threaded comments, most of the comment code structure has been seriously effected. Normally when a post exceeds the limit of 200 comments, latest comments are paginated and only the oldest 200 comments are displayed on post page. You could switch between oldest and newest comments by using the comment pagination links but due to threaded commenting system these links got messed up and would not show up now. I got a custom script from my friend nhamngahanh from simplexdesign which will help you fix this 200+ comments problem so that your visitors could access all your comments. Lets cook some new recipe today!
You can see live demo on our blog just at the top of comments. Click Here
This tutorial is a little different from what nhamngahanh shared. I have changed the location of HTML code so that it may not misalign the post navigation buttons. I also accordingly change the CSS styles to make it more appealing.
This widget works on JavaScript that display your first 200 comments and then paginates the remaining comments inside separate pages and displays the remaining pages in numeric form and latest and oldest links as text links.
Fix Comment Pagination Links In Blogger
- Go To Blogger > Design > Edit HTML
- Backup your template
- Click the box "Expand Widget Templates"
- Search for <body>
- Just above it paste the following code:
<script type='text/javascript'>
//<![CDATA[
function commentpagination(url,comment){
var posturl= url;
var comment = comment;
cmpage = Math.ceil(comment/200);
document.write('<a href="'+posturl+'?commentPage=1">Oldest</a>');
for (var i = 1; i <= cmpage; i++) {
document.write('<a href="'+posturl+'?commentPage='+i+'">'+i+'</a>');
}
document.write('<a href="'+posturl+'?commentPage='+cmpage+'">Latest</a>');
}
//]]>
</script>
If you wish you can change the yellow highlighted text to any name you like.
6. Next search for this code:
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
and just below it paste the following code:
<span id='commentpaging'>
<font style='color:#289728; font-size:12px; font-weight:bold; padding-right:4px; '> Comment Page :</font><script type='text/javascript'>commentpagination("<data:post.url/>","<data:post.numComments/>");</script>
</span>
- You can change the yellow highlighted text to anything you like.
- To change the color of Comment page text edit color:#289728
7. Now search for ]]></b:skin> and just above it paste the following CSS code:
/* -------------- Comment Pagination Stylesheet By MBT --------*/#commentpaging { background:#F7F9FA; margin:0px padding:20px auto; width:580px; border:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; text-align:right;}
#commentpaging a { margin-right:5px;}
Make these customizations:
- To Change background color of the box edit background:#F7F9FA
- To change the width of the box edit width:580px
Save your template and visit any of your blog post to see a pagination box appearing just at the top of your comments.
Need help?
All steps are well explained but If you still needed any help just let me know. I just hope this adds a new spice to your BlogSpot blogs. BTW a surprise is on its way. Will disclose the new blog name next week inshAllah. Peace and blessings pals. :)
You may like:
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Mohammad
2/09/2012
Bugs and Errors
,
CSS and HTMLTricks
thanks mohammed for this post
ReplyDeletebhai i have seen on different websites that page rank is updating. Some websites got the update and some are waiting. Does it take days for a complete Page Rank Update ?
ReplyDeleteLOL !! i don't even get 1 comment forget about 200 :P
ReplyDelete@haider
ReplyDeleteYes bro a minor update took place on Feb6th and you can still expect a change for an extra one week. Lets hope! :d
@ultrapc
You will get them one day. Keep working on your content pal. :)
Really i am Hoping for the best.Looking at the backlinks and inbound links i am hoping for at least page rank 4. If this time i will not get, i will be hardly disappointed :(
ReplyDeleteThank you! I did try to customize by comments box a little and only the color of the word "comment" changed. The page descriptions and numbers did not. But it looks okay with my blog colors.
ReplyDeletehttp://cuttopieces.blogspot.com/
Bro, i sent you a PM on how to place adsense ads below header (Monp template)
ReplyDeleteCould you help me please?
http://www.astucesblogger.com
I like surprises :)
ReplyDeleteWaiting for the new blog.
Hi Brother,
ReplyDeleteI want to keep (Recommended for you post slider widget) to my blog (www.bloggercodes.com)...Already i have tried to get the widget from your blog but since,I did not find any article like that in MBT..Please Provide the widget as soon as possible.let me know the details of particular Recommended For You widget.
my id:naguakkina@gmail.com
Thanks,
Naguakkina
Great Lots of dofollow blog will add this feature thanks great work as usual Faizan Ali Recently Posted How To Do Auto Posting In WordPress With RSS Feeds (Plugin)
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteMohamed Bro, would you mind answering me please on how to add Adsense code under header and below menu in MONOP template ? I sent you PM yesterday but i didn't get answer from you ;)
ReplyDeleteastucesblogger.com
Thank you
This comment has been removed by the author.
ReplyDeletethank's mohammad.. for this posts...
ReplyDelete@Jasmine
ReplyDeleteSorry Mohammad is too busy these days.
Edit the post and check if "reader comments" are allowed or disallowed.
This comment has been removed by the author.
ReplyDeleteThanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
ReplyDeletehtml5 hosting| html5 video hosting
i had apply your code. now its working. can you suggest me how to change load more link with image or button?
ReplyDeletetest
ReplyDeleteInstead of altering that code, can't you just go to Comments Settings and switch to Full Page mode for comments, instead of Embedded? Won't that allow you to have over 200 comments too?
ReplyDeleteincrease youtube views
ReplyDeletei had apply your code. now its working.
Thanks for sharing this! Is there a way to display the page number in a different color when active?
ReplyDeletenot working in my blog :(
ReplyDeleteAndro-park
doesn't work... I have over 200 comments on a couple of my blogger pages, and NOTHING IS WORKING!!! no matter WHAT pagination things I try, nothing works :(
ReplyDeleteThis is my link
http://littlespaceheroesfansite.blogspot.com.au/p/graphics.html
PLEASE HELP ME!
Thank you very much, your post help me a lot. Though, i need to change a bit of the location but now my problem is fixed.
ReplyDeleteHi Mohammad, i had a problem that my blog is not showing any comments but it's showing the count of comments.
ReplyDeletecan you tell me how to overcome this problem.
check this in-order to understand my problem, http://www.theamazing-worldz.blogspot.in/2013/06/solution-to-adfly-blank-page-problem.html
Plz Mohammad i need your help.
This comment has been removed by the author.
Deleteit is work for me but i am use it in future
ReplyDeleteMy blog is http://skyneel.blogspot.com
1st i cant find < body > without spaces and 2nd code you provided is different than in my template!! what should i do?????!!!
ReplyDelete
ReplyDeleteDo you need a loan,We are Legitimate and Reputable money Lender.
We are a company with financial assistance.We loan funds out to individuals
in need of financial assistance,that have a bad credit or in need of
money to pay bills,to invest on business. I want to use this medium to inform
you that we render reliable beneficiary assistance as I'll be glad to offer you a
loan. Services Rendered include,
*Debt Consolidation
*Business Loans
*Personal Loans
Please write back if interested with our interest rate
of 0.2%per annual. Upon Response, you'll be mailed a Loan application
form E-arabfinancialservice@gmail.com