Thursday, 10 April 2014

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. :)

12 comments:

  1. This is so great! Thank you so much for sharing. I'm still trying to get my blog to look how I want it to but haven't got the money to pa for a custom design. Doing it all myself is hard especially when I have no idea what I'm doing! Tips and tricks like this really help me :)

    Jo xx

    She Wears Burgundy

    ReplyDelete
    Replies
    1. You're so welcome! Glad I could be of help. :) Is there anything in particular you would like me to do a tutorial on next?

      xx

      Delete
  2. I tried this on my blog but couldn't do it! :( I followed step by step too wonder what went wrong :/

    Yazmin xx

    www.yazzyscorner.co.uk

    ReplyDelete
    Replies
    1. Oh yay! Glad to hear it ended up working for you, and it looks fantastic! :D

      xx

      Delete
  3. I love your tutorials, they're just so easy to follow. I did put this up, but I've decided on a more simple look at the moment. I'm definitely going to remember this post though as I'm sure that I'll change my mind in the future.

    www.grazingpagesthefamily.blogspot.co.uk

    ReplyDelete
    Replies
    1. Thanks Katie :) I'm so glad you enjoy them and find them easy to follow! Let me know if there's anything else you'd like me to do a tutorial on. :D

      xx

      Delete
  4. Thank you so much for this easy and simple tutorial! I've always wondered how to do this! Will be trying it out for sure!

    Your blog is so pretty, I love it! Consider me a new follower :)

    Sarah :)
    Saloca in Wonderland


    ReplyDelete
    Replies
    1. Naww! Thank you. :D I'm so glad I could help. :)

      xx

      Delete
  5. This was so helpful and easy! Thanks so much for sharing, I love the way this looks on my blog! :)

    -Jessica
    http://sweetnessandsolitude.blogspot.com

    ReplyDelete
  6. A one of a kind logo configuration is basic to fabricate an organization's image picture. An unseemly logo configuration can negatively affect watchers.corporate identity design

    ReplyDelete

Thanks for taking the time to stop by and comment! I really appreciate it. :)