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.
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!
♥ ♥ ♥ ♥ ♥ ♥
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 :)
ReplyDeleteJo xx
She Wears Burgundy
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?
Deletexx
I tried this on my blog but couldn't do it! :( I followed step by step too wonder what went wrong :/
ReplyDeleteYazmin xx
www.yazzyscorner.co.uk
It's ok I've done it :D x
DeleteOh yay! Glad to hear it ended up working for you, and it looks fantastic! :D
Deletexx
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.
ReplyDeletewww.grazingpagesthefamily.blogspot.co.uk
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
Deletexx
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!
ReplyDeleteYour blog is so pretty, I love it! Consider me a new follower :)
Sarah :)
Saloca in Wonderland
Naww! Thank you. :D I'm so glad I could help. :)
Deletexx
This was so helpful and easy! Thanks so much for sharing, I love the way this looks on my blog! :)
ReplyDelete-Jessica
http://sweetnessandsolitude.blogspot.com
You're very welcome! :)
Deletexx
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