Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Tricks » How To Customize “Load More” In Blog Comments With Extra CSS?

How To Customize “Load More” In Blog Comments With Extra CSS?

How To Customize "Load More" In Blog Comments With Extra CSS?

If you have more than 200 comments in any given post, only the first 200 comments will be visible. To see the rest of the comments, you need to click on a link that says ‘Load More…'(see picture above). Here’s the problem. This link is poorly positioned and also poorly customized and will leads your blog template to a trash bin, that it can easily go unnoticed giving the impression that the 200th comment is the last comment in your post. In this tutorial, I’ll show you how you can customize this link with extra css or replace with your BIG image.


I was also suffring from this so i found the solution that i am here to share it with you, You can see the live DEMO where i am using this css, Here is the hottest post of my blog on which i have upto 200 comments so you can see the working DEMO here…

1.) Change The Style Of Simple Text(Loadmore…)
2.) Pure CSS Codes.
3.) Style It Up Without Distirbing It’s Work.

4.) You Can Increase Fonts, Change Alighment, Increase Padding, Add Borders, Can Add Background Colors, Make It Hover, Use webkit And moz etc, And A Lot Of Features Can Be Added Using CSS.
5.) You Can Replace The Text With Your Awesome Image. (One Is Included)
6.) Easy To Add And Awesome In Style.
7.) Make It Bold So The Visitors Can See It Easily.
8.) Can Add Unlimited CSS.
9.) Cannot Change (Loadmore…) With Your TEXT However You Can Change It With Your Image.
10.) Don’t Need To Change Script.

How To Add In Blogspot?
1.) Go To Your
2.) Open Your Desire Blog.
3.) Go To Template.
4.) Click “Edit HTML” .
5.) Now Find “]]></b:skin>
6.) Now Copy The Below Code And Paste It Before It.
7.) Customize It.
8.) Click Save, Now You Are Done.

If You Want To Customize It:

.loadmore {margin-bottom:5px;float:center;}
.loadmore a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.loadmore a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none}

If You Want To Replace It:

.loadmore {padding:25px;background-image:url('');background-repeat:no-repeat;background-position:center;}
.loadmore a{font-size:0px;}

1.) Change Image URL If You Want Your’s Own.
2.) If You Want Any More Changes, Feel Free To Ask.
3.) Save And Done.

You Like It, Please Share This Recipe With Your Friends Using...

10 Responses to “How To Customize “Load More” In Blog Comments With Extra CSS?”

  1. That great tutorial for me 🙂

    at last I found the solution !

    Thanks a lot Muhammad

    Regads Danialde4 ^_^

  2. Anonymous says:

    Realy a cool code, I was searching for this since threaded comment introduced…
    Thanks You Boss…:-)

  3. really gud answer .,., i like it.,.,
    Web Customization

  4. Brother I want to show this load more option above comment form,not below comment form like yourblog.Is that possible?
    Customize Blogger Default Follower Widget

  5. Nice post! your post is very informative and useful.

Leave a Reply

Your email address will not be published. Required fields are marked *