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 www.blogger.com
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:
.png "DEMO-For-Loadmore...-In-Blogger-Comment-(Customized)")
If You Want To Replace It:
.png "DEMO-For-Loadmore...-In-Blogger-Comment-(Image)")
Customization:
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.
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 www.blogger.com
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:
.png "DEMO-For-Loadmore...-In-Blogger-Comment-(Customized)")
.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}
.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:
.png "DEMO-For-Loadmore...-In-Blogger-Comment-(Image)")
.loadmore {padding:25px;background-image:url('http://www.foto.pk/images/loadmoreco.png');background-repeat:no-repeat;background-position:center;}
.loadmore a{font-size:0px;}
.loadmore a{font-size:0px;}
Customization:
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.
0 comments:
Post a Comment