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:
Post a Comment