Post Title With an Image
First off, I love your blog! You do so many cool things with it! I was looking at some of the blogs you have done for other people. I particularily like http://christyann-photography.blogspot.com/search/label/baby. After looking at I was wondering, how did you do the image and fonts for the Post Title? I thought you did an excellent job! If you have time, I would love to know how. If not it is ok. Thanks!
--
Carrie Jo
Pretty easy to accomplish! You must locate the .post h3 part of your CSS style sheet. Before doing anything, remember to save your template!
.post h3 {This is the line of code that you add to the .post h3 section.
background:url(YOUR POST IMAGE) no-repeat;
padding: 20px;
margin: 20px;
margin-top:.25em;
margin-left: 0px;
margin-bottom: 20px;
border-top:1px dashed #42c4de;
border-bottom: 1px dashed #42c4de;
padding:10 0 4px;
font: normal normal 100% Georgia, Times, serif;
font-size:240%;
font-weight:bold;
line-height:1.4em;
color: #49331c;
text-transform:uppercase;
text-align: center;
}
Depending upon the size of your image (I would recommend keeping it small...around 20-30 px square.) you will adjust these values. Now, this will be different for each blog...each image. So trial and error will see you through.
If you want some sort of border, this is the code. And here are some values that you can use instead of dashed:
- dotted
- solid
- double
- groove
- ridge
- inset
- outset
Labels:
Design,
Graphics,
Posts,
Reader's Emails
34 Comments:
I always like these when I see them. I haven't thought of doing one myself but now that you have shown me how I might.
pertamaaaxxxx...
Nice trick...
This is hot, I take it on my Blog!
Thank you Annie, for your great tip. I had to twitch it a little bit, as my template seems to be different (www.ciudadposible.com). The image ended up on tp of the post title, and I could not figure out how to float the post title some inches to the right (any tips?). I ended up centering it... not perfect, but works...
Great post and beautiful blog!
Ahh...thank you, thank you, thank you. I was struggling with this for a long time and couldn't find the answer.
You make it look so simple and indeed it is :)
Nice tip, a little too tricky for a regular user but anyway if somebody has got some time to play with it, he could get a great piece of code to use in his blog...by the way...you should not release your secrets like that!!! ;) just joking
Love the blog,
Infinitely Virtual
thank you for the code to post image along with the title. Such a simple code can do so much.
great tricks to share with us
and i already applied it to mine
thanks you so much
Hi ,
Do you know how can we get the same menu as:
http://christyann-photography.blogspot.com/search/label/baby.
Best regards,
Alex
alexsanders010@yahoo.fr
You have such an informative blog,Annie.A great help to budding bloggers who wish to spice up their pages..
Thanks a lot!
seems like my code is entirely different... my h3 section looks totally different. Any ideas for help?
Just used your code with the border for one of my sites, to great effect!
Thanks.
Great tip! Thanks for sharing! :-)
You really do have patience for breaking down html codes. I would normally want to use a generator that way I could save myself the trouble of typing the codes individually and determining the parameters needed. But at any rate, your posts are really helpful. Anyone can easily become a master in web designing just by reading tips like this.
This is very simple code, and it does
so much. Thanks for sharing this tricks
with us, i am applying this trick to mine.
motorbike for sale
I don’t know If I said it already but …Excellent site, keep up the good work. I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say I’m glad I found your blog. Thanks.
valentines day
I could save myself the trouble of typing the codes
individually and determining the parameters needed.
But at any rate, your posts are really helpful.
Mio Navman M400D
Just what I was looking for. Thanks
Nice Tip, love the blog
Great tip. This should come in handy for stylising my blog a little more with the image titles.
Post titles are without a doubt very important in attracting readers towards it and having a good small picture with a good post title maybe just is icing on the cake. A user may get more tempted after reading the post title and then seeing a good relevant picture attached to it.
Hey, Thanks for your tips. I like your suggestion. I will surely implement it.
Love it - but my title is on top of the image. How do I space the title so that it'll be to the right of the image instead of right on top of it?
I find working with codes really intriguing, and so I ended up using a basic blog design. This looks like a easy tweak though, I think I will work at putting up a image title on my blog too, thank you so much for sharing your knowledge.
Annie
how do you insert your signature below the article, the signature that looks like a handwritten one. I assume that it is an image?
Do you know good blogs that cover the design in Magento e-commerce platforms?
all the best
Martyna
@Link Building...
http://bloggeruniversity.blogspot.com/2007/02/blogger-beta-post-signature.html
Thanks Annie,... it's very interesting
Hi your blog's design is simple and clean and i like it. Your blog posts are superb. Please keep them coming. Greets!!!
According to me there are the best blog ,I like this blog system,and his facility are so very well,most of people are like this blog.
Hey, Nowadays there are too many blog publishing platforms are available which allows to you customize you blog post the way you like it, insert table, graphics and so on
For SEO purpose, is it better to use backgound image or inside image?
thansk gan...
i will try it...
i hope that success...