Yahoo! It's Monday, so I've decided to cheer you up by posting another blog design tutorial.
Now just grab a glass of wine and you should be good to go.
Today, I'm going to teach you a neat little trick that I actually just started using myself-- how to add a little icon next to your post title. Yay :) We will be using CSS to do this. CSS allows you to customize web pages, and it's an amazing tool to use.
Here is the post that I just installed using CSS:
And if you are familiar with Zoella, this is the one she uses:
Pretty, right? A simple icon gives a little something extra to your post title. It adds visual interest and personality to your blog. And it's very simple to do! Here's how:
1. Create a simple image in picmonkey.com using your blank starter image. Size to about 50-60px.
SAVE to your desktop.
2. Upload your saved image to photobucket.com. We will come back to this image.
3. COPY this code:
h3.post-title {
background:url(Your Direct Link) no-repeat left;
height: 55px;
padding-left: 12px;
padding-top: 30px;
margin-bottom: -20px
}
In your blogger dashboard, go to Template --> Customize -- > and down to Advanced. Scroll down to Add CSS. This is the area you should be in (Mine will look different as I have already added other CSS elements)
4. Paste the code from step 3 in the box, exactly as I have done. You will need to paste the DIRECT LINK from your image in photobucket into the code as I have indicated. When you have done this, you will need to scroll down so you can see a preview of what your blog will look like. Give it a second to update and make the changes.
If you don't see a change, place your curser after the very last "}" and hit "ENTER" so it recognizes that you have finished. It should update.
5. You can change the position of the icon by playing with the padding and margins. When it looks how you like, his "APPLY TO BLOG." That's it, you're done :)
Please let me know if you have questions!!
xx.
0 comments:
Post a Comment