DIY Blog Design: How to install a post title graphic.

See that lilac coloured ribbon/flag like banner behind my post title?  It's pretty cool, huh?  I love how it brings your attention to my post titles whilst also acting as a sort of post divider. :)  If you're interested in learning how to install something similar on your own blog, then please stick around as you've come to the right place!

Create a horizontal graphic that is roughly 640 pixels wide (or however wide your blog posts are) and 5-40 pixels high.  This can be as simple as a straight block of colour, a subtle watercolour smudge or a fancy underline graphic.  Save this image as a .jpeg or .png if possible.

Upload this image to photobucket (or some other image hosting site) and grab the direct image URL.  Paste this image URL into a word document as you will need it again in a minute.

In Blogger, go to your 'Template' page and click on the button that says 'Customise'.  Once you are in the Blogger Template Designer, go down to 'Advanced' and scroll down to the bottom where it says 'Add CSS'.

In this section, copy and paste the following code:

h3.post-title {
background:url(Your Direct Image URL) no-repeat left;
height: 40px;
width: 640px;
padding-left: 6px;
padding-top: 15px;
margin-bottom: -10px
}

Change the highlighted sections as required, then hit enter once at the bottom of the code to view the changes in the preview section underneath.

You can also change the position of your graphic in relation to your date, post title and blog post text by playing around with the padding and margins.  This part can be quite fiddly, so make sure to back up your blog template beforehand.

Once you're happy with how everything looks, click on the button in the top right corner that says 'Apply to Blog' - and that's it, you're done! :D

Happy Blogging!

♥ ♥ ♥ ♥ ♥ ♥

If you're interested in learning how to add a post divider image to your blog, check out my previous DIY blog design post here.  Also, please let me know in the comments below if there is anything else you would like me to do a tutorial on and I will do my best to help you guys out. :)

 
bloglovin' ♥ facebook ♥ twitter
instagram ♥ pinterest