Stylize Blogger Read More Option Link With CSS

Blogger read more option is an option that allows you to select some text and add your desirable image to display on your homepage without allowing all the post contents to display on your homepage after every publish. This Read more or "Jump break" option can only be active on your blog posts if only you use the "jump break" option icon at the top of the blogger text editor formatting bar to highlight the area you want to show on your homepage.
This post will be segmented into different steps.

• How To Select Content That Will Display On Your Blogger Blog Homepage

To select Contents that will be displayed on your homepage for a particular post, you will need to click at end of  the area where you only want to show for that particular post before the read more link on your blog homepage, click on the "jump break"  icon from the top part of the blogger text editor window just as you can see on the bellow image after the video icon .(note you only do this when you are creating a post and you must do it to all your posts)

After that you will see a threaded line that will display at the end of the content you want to display for the post on the text editor form, when someone visit your blog homepage and see the recent posts on your blog, a read more link will be display under the post which enable the visitor to to click on the link and see the full article.

• Find The Read More Code From Blogger Edit Html

Go to blogger log in --> go to template or design(for old blogger interface) --> edit html --> expand widget

look for this line of code 

• <data:post.jumpText/>

Bellow is how mine look when I found it

•   <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

 The above code will show only the read more link without any form of customization

• Start Stylizing  the read more link 

After finding the line of code, if you will like to add CSS script to the code you will need to add a html "<span>" tag to add the "style" attribute to it to look something of this nature.

Example

  <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><span style="add values"><data:post.jumpText/></span></a>

Desirable options

• If you will like to add some background color to the read more link here is what you do

background-color:your desirable color ; 

e.g <span style="background-color:black ;">

• If you will like to add border to it here is what you do

border:1px solid brown;

1px = border (size you can increase if you want)

solid = style (you can as well use dotted or dashed )

brown = border color (you can choose any color to fit your template design using alphabe or hexadecimal codes eg #000000 for black)

e.g <span style="border:1px solid brown;">

•      If you will like to align the the read more link to the right here is what you do

text-align:right;

   eg <span style="float:right;">    

After the whole coding your script will now look something like this bellow

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><span style="background-color:black ; border:1px solid brown; float:right;" ><data:post.jumpText/></span></a>

Please first of all use the preview button on the Edit Html iframe to preview, if it works then save by clicking on the "Save Template"

Thanks for reading kindly use the bellow comment form to tell us about this post we will love to hear from you and share with your friends as well.