Hack! // Customizing the Break Link in Blogger

Due to the great responses I got in my last "Tips for Better Blogging" post, I decided to go ahead with the tutorial on customizing the break link. Now before we dive in, I want to let you all know that I am in NO WAY an expert in coding, and make mistakes and forget lots of rules and other techy things a lot of the time; so when you follow my coding tutorials, you are pretty much learning my imperfect way of implementing and manipulating code. Not so profesh, in other words :D

If you are interested in getting into the nitty gritty of coding and further customizing your blog's layout, I would recommend you look into Codecademy. That is where I learned the majority of what I know, and it's FREEEEEE! Talk about awesome sauce :) If you want to dive even deeper than what Codecademy has to offer, and you don't mind chucking out some extra cash every month, you can try Treehouse. I got their free trial for a month, which resulted in me engaging in the best, most in-depth coding courses that I've ever taken. I would definitely recommend them to the avid code-student! They are amazing!

All right, enough about coding courses; how's about we actually get something done now? ;)

Step #1 / Configuring the Text

Before we dive into the more complicated coding steps, I want to first let you know that you can change what the link says very easily. Just go the layout section on blogger, click "edit" on the post box. Near the top of the little window that pops up you will see a little box with "Post Page Link Text" next to it, like illustrated in the image above. Simply type in what you would like the link to say, click "save", and you're done! Yay! Über easy ;)

Step #2 / Navigating Blogger HTML & CSS

Buckle your seat belts, we're about to get coding! Go to Template > Edit HTML. Please, please take note that when you come into the HTML template, (unless you know a lot about coding, etc.) you should NOT change anything about the code, other than what I tell you in this tutorial. You could very well ruin your blog's design with the simple delete of text or addition of characters. Please be vary wary when dealing with the HTML coding in blogger!

Scroll down the coding window and look for the b:skin tag (it should be very near the top), like illustrated above. Open it. You will find a whole slew of blue jumbles of letters and numbers everywhere; that is the code that styles your blog, and makes it look pretty! Simply navigate through this jungle down to the very end of the blue coding. Below the last line of blue code is where you are going to paste the CSS to style your break link.

Step #3 / Understanding the Code

In this next step, you get to understand how the CSS code for the break link works. Above you see a graphic including all the styling I will be showing you how to implement for yourselves. There are many more possibilities for you to use, such as employing images instead of text, text shadow, animation, background color etc. but I wanted to stay basic and simple for this tutorial. If you would like to discover the many options, go to W3Schools CSS page, and you should find what you're looking for.

So, the first thing you need to understand about this little bit of code is the target code (more professionally known as a selector) which is what is going to "target" the break link.

This "target" piece goes as follows: .jump-link a
After this is a space, and an opening curly bracket. In the space below the curly bracket is where you are going to put in the commands to style your break link.

The first command is the font-family code. Now, in order for you to be able to customize the font of your link (unless you want to use fonts like "Times", or "Courier", or "Verdana"), you are going to need to go to Google Fonts. Find the font you want to use, and click on the little arrow inside the box pointing to the right, which is the "Quick Use" button. Follow the steps on the website after clicking this button, making sure when you copy the link to paste to your blog code, that you paste it right below the < head > tag in the HTML template, and add a forward slash directly before the closing angle bracket of the link. Copy the font-family: "Font Name"; piece of code from Google Fonts and paste it right below the opening curly bracket.

The next command is the font-size code. This is a very straight-forward command, and all you need to do is change the pixel size. A good, medium-large size is 18px, but you can make it however small or large you want!

Now we are onto the color bit. Simply go to this web color picker, find the color that you want, and paste the strand of numbers and letters right after the color: # where you see in the image above.

The final CSS command I am going to show you how to use is the text-transform command. This simply tells the browser to either make the link uppercase, lowercase, or capitalize. You can, of course make the text upper or lowercase when you configure what the link says (like I showed you in step #1), but doing it with CSS is just fine too.

Now that you know what each of the elements in this snippet of code mean, you get to customize it!

The piece of code for you to use is show below:

.jump-link a {
*add your Google Fonts CSS Command Here*
font-size: px;
color: #*add color code*;
text-transform: ;
}

Copy this code and paste it into the place that I directed you in Step #2.

Step #4 / Customizing the Code

Add in all the customizations you want into the blank spaces of the code. For an example of how this works, see below:

.jump-link a {
font-family: "Roboto", sans-serif;
font-size: 18px;
color: #D43F7D;
text-transform: uppercase;
}

Aaannnddd...  You're done! Yay! I hope this tutorial works for you, and that you were able to follow along! Let me know if you have any questions in the comments below.

Don't forget to enter our 1958 Party Dress Pattern Giveaway!

TTFN,

-Charlotte

P.S- Check out our latest advertiser, Cover Up for Christ! She is a modest fashion blogger with a heart for orphans. Be sure to check her out and follow!