1 February 2014

BLOGGER TUTORIAL #2 - CUSTOMISE READ MORE BUTTON

The jump break has gotten very popular on blogger recently and is great for breaking up your post if you write alot, or use a lot of photos but you don't want them clogging up your home page! You can create a very professional looking home page full of images with links to the full post in a matter on minutes. It's easy to do, so lets go:

STEP ONE:
Click on Layout > Blog Posts Edit.

STEP TWO:
After clicking edit, a little window will pop up with all the options for your posts, this is where you control how many posts you want per page, and what you want in your post footer. Today we're focusing just on
POST PAGE LINK TEXT. If you've never edited this before you should see ''Read More >>'' Change this to anything you like e.g:
-Read More
-Click here to read full post
-Click here to read more
ETC
When you're happy with that, scroll down and press save.



This post is getting a little long, so I'm using a read more button of my own, click below to continue to step three!

STEP THREE:
Make a new post, or go to a post you want to add a read more button to. Once there, write what you want to appear BEFORE the button and then click on the button that looks like a torn piece of paper, this creates the jump break in your post. Carry on writing the rest of your post after this. It will show up in your post as a gray line with dashes around it. Click Publish or Update.
STEP FOUR:
Template > Customise.


STEP FIVE:

It's time to add your code, so choose Advanced > Add CSS and scroll until you see the CLICK HERE TO READ MORE >> (Or whatever you chose it to say in step two) This way you can see the changes as you make them.


STEP SIX:

Copy the code below, and paste into the Add CSS box.

.jump-link a {
 padding: 5px;
 background: #d294aff /* Have a background colour otherwise delete it */
 color: #ffffff; /* Link colour */
}
.jump-link a:hover {
 background: #cccccc; /* Background colour on hover otherwise delete it. */
 color: #fff; /* Changing the link colour on hover */
 text-decoration: none;
}


You will see your read more button change to look like the one in the image below. 


STEP SEVEN:
The RED sections of code, you can change for whatever colour codes you would like. 
CLICK HERE TO FIND COLOUR CODES.
The first RED code is the background of the button. (If you only want to change the font and have NO background, change this to #FFFFFF) 
The second RED code is the colour of the font.
The third RED code is the colour your button will turn when you hover over it with your mouse.
The fourth RED code is the color your font will turn when you hover over it with your mouse.

To make the font UPPERCASE add the code: (as shown in image below)
text-transform: uppercase;

To make the letters space out add the code:
letter-spacing: 2px;

To add a border to the button add the code 
border: 1px solid #666666;

Add these to BOTH sections of the code so under .jump-link a{
AND .jump-link a:hover {



STEP EIGHT:
When you're happy with how it looks, press Apply to blog, wait till you see 'Template Applied' pop up then click VIEW BLOG to see what it looks like when you hover over it, here is my result:

If you have any questions, email me at lovesprettywildthings@hotmail.co.uk


Share: Pin This Email This

MEET THE AUTHOR: Serena Ozgowicz is a 24 year old Puggle owner with a passion for beauty, crafts and coding! You can follow her on facebook, twitter and instagram. Thank you for reading this post!

2 comments:

CUSTOM BLOG DESIGN STYLED BY PRETTYWILDTHINGS