SUBSCRIBE TO GET FREE UPDATES
RSSRSSEmailEmail
       "Keep learning ~~ keep smiling ~~ keep sharing"     

Sunday, January 9, 2011

Customize and style Read More link in Blogger

Thanks to a recent reader to this blog who wanted to know how to right-align 'Read More' in Blogger which prompted me to google for answers and learned much in the process.

Hence, I'm happy to share here some related tips for those seeking to learn how to customize and style the 'Read More' or Jump link in various ways as illustrated in the image below!

Read More or Jump Link samples

To do that, you'd first need to have the 'Read More' link below your post summaries in your blogspot posts. If you don't know how, follow this tutorial to create 'Read More' with Blogger's jump break feature.

Next,
learn how-to customize and style the 'Read More' or 'Jump Link'
in these interesting ways -

A. Change the 'Read More »' default text :
  1. Sign into your Blogger account. At Dashboard, selecting Design will bring you to the Page Elements page. Click the Edit button of the Blog Posts gadget.
  2. The pop-up Configure Blog Posts appears to enable you to change the text to whatever you fancy.
  3. Click Save to exit and effect changes.
B. Align the 'Read More' link to the right or center :
(by default, it's left-aligned)
  1. Just need to add CSS (cascading style sheets) to your blog's template. Go to Design | Template Designer.
  2. Click Advanced | Add CSS tab. Add the following CSS code in the field box provided and click Apply To Blog when done:

    .jump-link {text-align: right;}

    (change the word, right to center if you want to center-align the text)
C. Increase font-size and the font style of the 'Read More' link :
  1. As in B. above, go to Design | Template Designer and add the following CSS code at the field located in the Advanced | Add CSS tab:

    .jump-link {font-size: 110%; font-family: "lucida handwriting", cursive;}

    (change the font size and family as desired)
D. Add a background to the 'Jump Link' and change the text color :
(this will override the default style)
  1. Add CSS to the Template Designer as follows:

    .jump-link a {background: #b2b4b6; color: #ff0000; padding: 2px;}

    (I've chosen a grey background and red text but you can change the colours to match your blog and increase the px value if desired)
E. Add hover colours to the 'Jump Link' :
(colours of the background and text changes when a reader mouseover the 'Read More' link)
  1. Add CSS to the Template Designer as follows:

    .jump-link a:hover {background: #000000; color: #ffffff; padding: 2px;}

    (this example has a black background and white text, you can change the colours and padding size as desired)
Note: The image below gives an example of the CSS snippets that were added to customize and style the 'Read More' or Jump link as explained in sections B to E above.

Screen shot of Template Designer illustrating the CSS added for the Read More or Jump link

F. Add a 'Read More' linked image or button as an alternative to the plain text link :
  1. Go to your blog's Dashboard | Design | Edit HTML. Before editing, download a copy of your template.
  2. Tick the Expand Widget Templates. Then, use the browser's search feature (Ctrl+F in Windows or Command+F in Mac) to find the word, jump-link and locate in the next line, the following code:

    <data:post.jumpText/>
  3. Replace the above code with the image tags as follows:

    <img border="0" src="URL OF THE IMAGE" />

    (where the URL OF THE IMAGE is the entire URL of your uploaded button image as stored by your photo hosting website, such as Blogger, Photobucket or Flickr)
  4. When done, click Preview to see the changes and if satisfied, click Save Template and View Blog.
  5. If you'd like to right-align the button, simply follow steps at section B above.
Screen shot of Blogger's Edit Template to show customization code for Read More button image

Other related links:

Enjoy styling the appearance of your 'Read More »' links!

Keep learning~~keep smiling~~keep sharing!!

74 comments:

  1. Perfect....
    Great...100% or i want to say 200%
    keep it up

    Regards,
    Manish
    http://manishagarwalhyd.blogspot.com/

    ReplyDelete
  2. Thanks for the thumbs up, Manish!

    ReplyDelete
  3. Hi Jacqueline.
    Today I link to your blog to inform my blog readers and friends about your wonderful, informative blot tutorials. My post is here:

    http://www.mynicegarden.com/2011/01/jan-2011-gbbd-and-foliage-follow-up-my.html

    Thank you for all the hard work and keep up the good job. Cheers!

    ReplyDelete
  4. That's sweet of you, A. Belle! Thanks a lot! Will hop over shortly.

    ReplyDelete
  5. As always, very very informative.

    One request: Can you remove the word verification, it will allow commenting easily.

    Secondly, I have a question, a little out of context but may be you know a solution.

    When I follow blogs, my photo does not show up in the followers list. It however does in my profile as well as comments I give on other's post.I found some solutions to change it through the Blogs I am following> Manage>Setting, but when I click on the settings button corresponding to any of the blogs I follow it takes me to Google friend connect page and I am asked to log in again. When I do it using my google account, it gets me back to the same place and the loop never ends.
    Any suggestions?

    Thank you.

    ReplyDelete
  6. Thanks for your kind comment, Avinash Chandra!
    Sorry, first request rejected as word verification is an additional tool that's necessary to reduce spammers.
    Re your question about photo not showing in followers list, I'm really clueless on this matter. Probably you may want to redirect it to Blogger Help @ http://www.google.com/support/blogger/ where others may be able to help solve your problem.

    ReplyDelete
  7. Dear Jacqueline,

    First of all sorry, I was away traveling for some time and hence could not reply before.

    I understand your point of sticking to word verification.
    Regarding my problem, I have solved it.
    Thanks for the kind gesture.

    ReplyDelete
  8. Thanks for responding, Avinash. No need to apologize as it's understandable that everyone has his/her own priorities and life to live. I'm glad that your problem is over.

    ReplyDelete
  9. Hello! I am a new follower, and new blogger that has found your site to be so very helpful to me! I posted about your site today on my blog, which is normally about sewing lol.. http://sew-chic-designs.blogspot.com/2011/02/archives-page-and-blog-tips.html . Being a new blogger it is hard to understand how some of these little(and not so little) changes are made that make a huge difference in how your blog looks, and I can't thank you enough! Have a great day and I will be reading!!

    ReplyDelete
  10. Welcome and thanks for following, Loree! I'm delighted that you've found my tutorials helpful and really appreciate you taking the trouble to pen your positive thoughts and linking to my site...thanks so much!!
    Cheers and have a wonderful day!

    ReplyDelete
  11. Nice article. This is a helpful post. Thanks for sharing your thoughts. Looking forward for more tutorials in Blogger.

    ReplyDelete
  12. Thanks,

    I couldn't move it to right side, if i didn't read this post.

    - Sankar Datti

    ReplyDelete
  13. Outsource SEO: Thanks for feedback and appreciation.

    Sankar Datti: Great to know your wish fulfilled. Thanks for feedback.

    ReplyDelete
  14. Done this now :) thanks a lot Jacqs ! Glad to follow you....

    ReplyDelete
  15. That's great, Mom Chef. You're most welcome and thanks for following.

    ReplyDelete
  16. Thank you so much :)

    ReplyDelete
  17. Great to know it had been useful. Thanks for your feedback.

    ReplyDelete
  18. Thanks Great Work Good You are Good Person Visit my Site Tricks and Tips for Computer www.ashiq-hassan.blogspot.com

    ReplyDelete
  19. Thanks for your kind comment, Ashiq!

    ReplyDelete
  20. I enjoyed reading this informative post of yours. I was impressed and I like it. I am looking forward in your next post. Keep sharing.


    Shasing

    ReplyDelete
  21. Thanks for the encouragement and kind comment, Shasing. Look forward to seeing you. Will definitely keep sharing my knowledge whenever I can. :)

    ReplyDelete
  22. It's cool that you're able to style those "read more" links easily with CSS. But there's something about those that made me think about my site's bounce rate. Wouldn't clicking a "read more" link from the main page count as a bounce from your domain?

    -- Man Ray

    ReplyDelete
  23. Thanks, Man Ray! I don't think that clicking the 'read more' link is considered a bounce as the reader is directed to the post page which will be counted as a second page visited within my site.

    ReplyDelete
  24. Your post was simply incredible and I really like it. I enjoyed reading it. You did a good job. Thank you for sharing.


    Shasing

    ReplyDelete
  25. Thanks for the thumbs-up, Shasing. Much appreciated.

    ReplyDelete
  26. hi bro i m max what were i do i not put readmore butten in my blog post r labeled but read more butten not coming
    check it out
    www.mjartss.blogspot.com
    so plz help me

    ReplyDelete
  27. Max, could you please reword your request because it's incomprehensible. Anyway, I noticed that you already have 'Read More' in your blog posts.

    ReplyDelete
  28. Thank you so much!!! I messed around for hours trying to get this coded right. It only took me one try with your help.

    ReplyDelete
  29. You're most welcome, Angela and thank you for the positive feed back.

    ReplyDelete
  30. Very useful CSS utilization with the "read more". One way of improving your writing skills i think. Thanks a lot for this.

    ReplyDelete
  31. I LOVE THIS AND THANK YOU SO MUCH!!
    saved my blog. <3 <3 <3 keep up the good work!

    ReplyDelete
    Replies
    1. Happy to know you're delighted with the result, Fena! Thanks for your appreciation and encouragement.

      Delete
  32. Thank you for sharing a lots of useful tips :). Can you make a tutorial about changing the opacity of background ? I really frustrated about it, Thank you :)

    BlushOff [Beauty Blog]

    ReplyDelete
    Replies
    1. You're most welcome, Marsha... I love sharing my knowledge! About changing your background, if you're using the Blogger Templates, just choose 'Template' at your dashboard, then click 'Customize' that appears below 'Live on Blog' and scroll to 'Advanced' and follow through the various sub-menu on background to achieve your desires.
      Hope this helps!

      Delete
  33. hi, I have been trying to make some changes to my read more button and have followed your instructions but it made no difference? I just wanted to align it to the right and make it bigger but when I added the code you gave nothing changed? Help!! I am pretty rubbish with coding though so maybe I am missing something? Charlotte xx

    ReplyDelete
    Replies
    1. Thanks for dropping by, Carlottas. I'm truly sorry that I'm unable to help you 'cos I don't troubleshoot technical problems. Whatever I've tried out successfully are in my article above. Probably you may want to redirect it to Blogger Help @ http://www.google.com/support/blogger/ where others may be able to help solve your problem.

      Delete
  34. Jacqueline, thank you from the bottom of my heart. With your help, I'm beginning to spice up my blog the way I have wanted to for a long time :)

    ReplyDelete
    Replies
    1. You're most welcome, Angela... I love sharing and if it had put a smile on your face, that's my reward. ;)
      Happy bloggging!

      Delete
  35. Replies
    1. My pleasure in sharing, GM. Delighted to know you've succeeded! :)

      Delete
  36. Thank You so much for this! I tried many for hours, and failed. Yours are so simple and work like magic. Now I can stop pulling my hair and go to sleep =D

    ♥xx♥

    ReplyDelete
    Replies
    1. You're most welcome, Cynthia. Thanks for the compliment and I'm happy to know the tutorial had helped you. :)

      Delete
  37. Thank you, just used this and added my own text and image. Much appreciated

    ReplyDelete
  38. Thanks a whole lot. Used this knowledge to make changes to my blog. Keep up the great job.

    ReplyDelete
    Replies
    1. My pleasure in sharing, William! Great to know and thanks for the encouragement.
      Happy blogging!

      Delete
  39. LOVE IT! thank u sooo much.. the CSS function in advance option works just find! so much simple than html... thank u!

    ReplyDelete
    Replies
    1. You're most welcome, Fernanda! Delighted to know you're so happy with the results. Thanks for putting a smile on my face with your exuberance. :)

      Delete
  40. Thank you so much for this!!! Question though, how do I add a space between the view this post and the part of the post that was before the "view this post" link???here's my blog link: http://sarahgolez.blogspot.com/

    ReplyDelete
    Replies
    1. You're very welcome, Sarah. To add your required space, edit your post just before the 'Jump break', press the 'RETURN' or 'ENTER' key on your keyboard a few times to effect the line breaks/space as desired.
      Hope this helps.

      Delete
  41. Thank you so much for the codes - really helped me a lot as I build my blog! Great work :)

    ReplyDelete
    Replies
    1. You're most welcome Yi Wei Lim! Great to hear. :)

      Delete
  42. thank you so much! one question, when I added it, it also changed the font of the "linked within...you might also like..." that is right beneath it. How can I fix that please?
    I would also like to remove my custom signature if you happen to know how to do that as well :)

    ReplyDelete
    Replies
    1. Sorry, Lucy Designs... I'm unable to help you 'cos I don't troubleshoot technical problems. Whatever I've tried out successfully are in my article above. I don't understand why your font for the phrase 'You might also like:' changed since both the Read More link and You might.... are entirely different widgets.

      Delete
  43. Thanks for sharing, very helpful indeed! I surely made my blog prettier.
    www.audreysglams.blogspot.com

    ReplyDelete
    Replies
    1. You're most welcome, Katia Audrey... glad you've found it helpful. ;)

      Delete
  44. Usually I never comment but the results were so compelling I just wanted to give you a big THANK YOU. Really made my day.

    ReplyDelete
    Replies
    1. Thank you kindly, Chef Chow! It's my pleasure sharing my knowledge. ;)

      Delete
  45. Thank you very, very much! Such clear instructions :-).

    ReplyDelete
    Replies
    1. You're most welcome, Heidi Kay. Have a nice day.

      Delete
  46. Thank you! I know this is an older post, but I was needing to change the size of "Read more" and couldn't figure it out. Thank you so much!

    ReplyDelete
    Replies
    1. Great to know that it help you, Sydney Logan.
      Happy blogging. :)

      Delete
  47. This is another thing you've really helped me with! I just had to mention your blog in one of my blog posts, hope thats okay!

    http://realisebeauty.blogspot.co.uk/2014/07/html-headache.html

    ReplyDelete
    Replies
    1. Hi Katie. That's sweet of you... I really appreciate what you've done. God bless.

      Delete
  48. this is very helpful, thank you!


    Cassie

    ReplyDelete
    Replies
    1. Great to know, cassie cadiz. Much thanks for voicing your opinion. Happy blogging.

      Delete
  49. This is the most amazing, most helpful post so thank you very much for sharing! I have tried all day adding HTML without luck and your method is simple and effective!

    http://www.sabelista.com/

    ReplyDelete
  50. HI, I cannot change this at all, I'll appreciate if anyone can help me, please please. I have a feeling it has something to do with the template I'm using. I did the search for that text, nothing comes out I changed the text to be read for what I want on layout-popt and nothing, it still displays, continue reading. I don't want anything fancy, all I want is for that to be in spanish as my blog is in spanish, and beleive it or not most people win't understand they have to click there to read more. I really didm't want to change the template again since I work so hard to get it to how it is now. Can someone please help me somehow please. Thanks

    ReplyDelete

Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search