Shop My Favourites

A CHIC BLOGGER READ-MORE LINK.

6 January 2016 1 comment

flat-lay-blogger-read-more
As you can see if you have a quick look around my blog, I've had real itchy fingertips to change up the look of Barely There Beauty (as I do most of the time..!) This time I've been on the lookout for a simple yet attractive 'Read More' button. I found some useful insight here and adapted it a bit to suit my own needs.

The 'Read More' feature lets you condense posts on your homepage and streamline the look of your blog, but the default link can look pretty rubbish, blending in with the rest of your post text. I think the easiest way to zhuzh it up a bit is by replacing it with an image, which I prefer to altering the text as I find it far easier to customise something in PSP etc than faffing with html! It's easy peasy, so let me show you how!

1. First off you'll need to either create or source an image. I just went into PicMonkey and created a little icon with text in my font choice and a simple border. Nice and simple. But of course you can create whatever you want, bells and whistles included. 




2. In your Blogger dashboard, go to Template > Edit HTML and find within the editor box the following code:

<div class='jump-link'>

3. The existing code you find should look like this:

<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>


4. To add your image instead of the default text, replace the above code with the following:

<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img src='**********************************'/></a>
</div>


You want to replace the ***'s with the URL to your image. I uploaded mine to Photobucket and took the Direct url and pasted it in place of the stars. (Be careful to keep in the ' marks either side of the stars!)

5. If you want your link to be centered, add in the following code in red. You can of course change center to right if you so wish!

<div class='jump-link'>
<div style='text-align:center'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img src='***********************************'/></a>

</div>
</div>

And that's it! I am well aware I am far from amazing at html etc but thought this was a really simple tweak I'd like to share, hope it helps! And do let me know if you'd like to see more tweak how to's on Barely There Beauty!


Don't forget to follow me on:



xx