How To Edit The Blogger “Read More” Link
The “Read More” element of Blogger is a helpful that can help condense your posts on your homepage and increase click-troughs. A considerable measure of bloggers use this element, however here and there the default Blogger content can mix in excessively much with your post. Make that connection emerge so guests realize that they should snap to keep perusing the rest of a post.
Fortunately, this connection is truly simple to adapt and alter to your loving. You can change the "Read More" content to something of your own decision, include a picture rather than content, and thoroughly adapt the look of the "Read More" content connection.
HOW TO CHANGE THE BLOGGER “READ MORE” LINK
1. from your Blogger dashboard, go to Template > Edit HTML
2. Click within of the editor text box and press CTRL+F to open the Find box in the top right corner. Inside the box, enter:
<div class='jump-link'>
3. The code that is found should display as this:
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
TO CHANGE THE “READ MORE” TEXT
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
Edit the text in red above with your new link text, for example:
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>Continue Reading...</a>
</div>
TO USE AN IMAGE INSTEAD OF TEXT
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><img src="http://urltoyourimage.com/yourimage.jpg"></a>
</div>
Supplant the first code with a picture code as appeared previously. The URL of the picture will obviously be the URL to your genuine transferred picture. You can utilize Photo bucket to transfer and host your picture, and get the HTML URL to use here.
TO STYLIZE THE TEXT LINK
To add your own particular style to the content connection, you can do as such by adding CSS to the .bounce join component.
Press CTRL+F to open the search box again and this time find:
]]></b:skin>
Straight before that, enter your CSS. An example could be:
.jump-link {
text-align:center;
}
.jump-link a {
font-size:15px;
padding:10px;
border: 1px solid #000;
background-color:#ccc;
color:#000;
font-weight:bold;
}
.jump-link will style the DIV that the content is sitting in, while .jump-link a will style the real connection content. Simply something to remember. The above code will render your read more connection as this:
You can change the hues and whatever else you like in the event that you are acquainted with CSS.
I trust this offers you some assistance with coming up with a remarkable Read more connection for your Blogger blog! Get somewhat imaginative with it and check whether you can make it coordinate your design and emerge.
No comments