5 Simple “Read More/Continue Reading” Tag Design Styles
Using <!--more—> tag with “Read More/Continue Reading” is the most popular tag, that most of the bloggers already using and rest are planning.But if you want to Do something different with the tag or you don’t want walk in crowd with the same style.I will show you the possible ways you can customize it to look different.
There are some simple and powerful benefits with the more tag:
- It keeps home page clean
- It will give exposure to other post titles in home page
- It will increase your page views
So,customizing the tag with innovative tips would be a great idea.Here we go with the customization…
Where can i find the tag: You can find the following code in your Index.php File
<?php the_content(__('Read more'));?>
1. Text Customization: You can edit the text “Read more” to you choice text like
“Continue Reading…”
“Click Here to Read more”
“Read More”
2. Special Char Styles: If you don’t want to follow the same text convention like other,you can go for some special HTML chars to guide your visitors.Follow this
<?php the_content('» » » »'); ?>
Would look like this:
3. Include title of the post in the more text: It will dynamically attach the title of the post at the end of “continue reading”.Follow this
<?php the_content("...continue reading" . get_the_title('', '', false)); ?>
Would look like this:
4. Custom text for each post: Enjoy with separate text for each post.Like “Read more” for one and “Wait,Still there…” for next post.In the visual editor, simply write
<!--more Your custom text –>
Edit “Your custom text” to your choice.So, you may have something like this:
<!--more But wait, there's more! –>
5. Adding An Image: You can add an image at the end of your Read More text.Follow this to have
<?php the_content('Read more...<img src="/Images/leaf.gif"
alt="read more" title="Read more..." />'); ?>
Here is what it might look like:
You can customize you image & text styles:
.moretext {
width: 100px;
height: 45px;
background:url(/images/leaf.gif) no-repeat right middle;
padding: 10px 50px 15px 5px}
If you’re familiar with HTML and little PHP,you can edit your more tag into many custom styles.Above are some basic and simple ways to edit.Ultimately having a good and attractive Read more tag is the aim.
Please Comment if you have any more ideas, I will try to update the post! Happy Blogging!
Related posts:
Just recently changed my site to include the “read more” link. Initially I thought pageviews and comments would decline but that’s not the case. As long as the articles are interesting to the readers there’s no risk.
Thanks for those Technical details. I never knew how to edit that link there until this post.
Great post.
But then again, I actually like to use plugins for this. I am scarred of f*cking up something since I am a complete noob in programming/coding, I just let plugins Do that for me.
Cheers,
The Moneyac
This is a good way to increase page views by showing only the excerpt for each post. Great tutorial in here to create the button. Would come in handy when I want to add an image =)
Wei Liang
Hey Lex, I love this post it’s simple and everybody can Do this simple tips… maybe I want to try with the image, but need to find suitable image first, huhu…
I like the 4th one. It’s pretty simple and can be changed each time! Nice on dude
Wordpres guys have many options in this category..Image placed tag would look very cache and powerful.
Good post again Lax.
Thanks for all the people commented here.
Nice tips. ‘Read more’ kind of tags have become a standard across the blogging community because of the page load factor. I dint knew that we can add an image too. Thanks for the info.
@Prasanna,
Adding image would be good idea to cache visitor attention.I’m looking for a good image yar.
Suggest if you have any
I agree with Arun. 4th looks to be the best. Thanks for the tip. I will implement it right away.
Thanks for this post. Gonna try the different types on my blog too. I also think that adding the read more link help a lot in increasing pageviews. Great post!
@Nihar,
Thats great you guys like the tips..Thanks for Comment yar.
@Avish,
Ya,that really helps in increasing page views from daily visitors.
Thanks for the tip. I was looking for such a tip for my Newly redesigned theme. Thanks
[...] 5 Simple “Read More/Continue Reading” Tag Design Styles Posted on Saturday, January 17th, 2009 in Blog Tips – Comments: (13) Using <!–more—> tag with “Read More/Continue Reading” is the most popular tag, that most of the bloggers already using and rest are planning.But if you want to Do something different with the tag or you don’t want walk in crowd with the same style.I will show you the possible ways you can customize it to look different. [...]
Thanks for sharing how to add the image in the more tag, i was not aware about it how to change it , i will take it from here.
Wow! Do you have a JavaScript for this feature? Blogger blogs can’t do what you share. Many would appreciate if you share the JavaScript for this feature.
Thank for sharing your ideas. I will to search if someone who did it in blogspot blogs.
Nice sharing..I implement it in my blog..almost forget about it since I changed my theme