How to customise the 'read more break' on your Weebly blog
May 12 2020
With some jQuery code you can customise the 'read more break' on your Weebly blog. Please read the note at the end of this post.
The code should be pasted in the header code box, that's at page level on any BLOG style page, not at site level. Click the SEO SETTINGS as shown below. Left hand side.
The code should be pasted in the header code box, that's at page level on any BLOG style page, not at site level. Click the SEO SETTINGS as shown below. Left hand side.
Then add the jQuery code to the HEADER CODE box:
Here is the code:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".blog-read-more a").text("Read my review");
});
</script>
Here is an example of the 'read more break' on my hostel review page, clearly showing 'Read my review'.
I also modified the colour of the text and hover colour by adding some html/css code. This part will render your site 'customised'. Please set up a test site before you start modifying the html code. If you screw up you'll have to revert to the original theme.
I added the code as shown below to the main.less section.
I added the code as shown below to the main.less section.
I have made the 'read more break' colour #800000, a nice red and the hover colour #194cc5. The code uses the US English spelling of color, not colour!
Note:
I am not the creator of this piece of code. I found it buried deep within the Weebly Community. It uses jQuery. I have also noticed that some jQuery code does not work with all themes. This particular code works a treat on the CENTO theme. And is added to the blog page seo settings and not to the html/css coding so it does not render your site 'customised'.
Apologies that you can not copy the text. My old blog was hacked. Also please make sure you copy the code exactly. One missing comma or other piece of syntax will render the code useless.
The new 'read more break' text will only show up on the published site and not in editor mode.
I am not the creator of this piece of code. I found it buried deep within the Weebly Community. It uses jQuery. I have also noticed that some jQuery code does not work with all themes. This particular code works a treat on the CENTO theme. And is added to the blog page seo settings and not to the html/css coding so it does not render your site 'customised'.
Apologies that you can not copy the text. My old blog was hacked. Also please make sure you copy the code exactly. One missing comma or other piece of syntax will render the code useless.
The new 'read more break' text will only show up on the published site and not in editor mode.
More Weebly tips: Weebly Hacks
