Monday, 23 June 2014

How to style read more button in blogger blog

Blogging is always a good activity for bloggers. While writing post you must have noticed a insert jump break option in the blogger post editor. It adds a jump break in your post which mean the data before the jump break will be shown on homepage and after clicking the read more button, a separate page of that post will open and the full post will appear in i
t. (This is called Jump Break) But by default in blogger blogs the read more button is simply a text link. But to make it match up with the style of your blog, we as bloggers need to change it's style and for that this is a post on how to style read more button in your blooger blog.

  1. Go to blogger and login, then click on the blog in which you want to style read more button.
  2. Then in the left side click on template option. Backup your template

  3. Now click edit html (to open template editor)nn the template editor press CTRL + F (This will open search option) in search box type ]]></b:skin> and press enter to find it.

  4. Now just above ]]></b:skin> paste any of the read more button code .(Look at different read more button styles given below and copy and paste the code read more button which you like just above
  5. Click save template option and then view your blog. Your blog will have new read more button whose code you have added.

Read more button styles 

Style 1

click to get code
Style 2

click to get code
Style 3

click to get code