On many blogs you can see an image separating the posts. To implement this in your blog first you will have to create an image in an image editor or do a Google search for "free border backgrounds".
After creating or downloading a free image first upload it to a freehost like Photobucket.com or Googlepages and copy down the link of the image.
The next step is to define a class in the CSS part of your template to house your image. For this login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. Scroll down and paste the code below just above the ]]></b:skin> tag in the Template code box.
.separator {
background-image: url(LINK OF YOUR IMAGE);
background-repeat: no-repeat;
background-position: center center;
height: 20px;
padding: 4px;
}
Replace the CAPS with the link of your image at Photobucket.
Now we have to place the code in the <body> of the template. To do this login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. Put a check in Expand widgets template check box at the top of the Template code box and scroll down to this code in the blog posts widget :
<p class='post-footer-line post-footer-line-3'/>
Paste the code below immediately after the above line :
<div class="separator"></div>
Save Template. Clear Cache and view Blog. See the ~~~~~~~~ after my signature graphic at the end of this post.
Enjoy!
WELCOME!
This blog contains quick tips for Bloggers. For detailed explanations do visit the main blog at :
Put an Image as Posts Separator.
Search Blog Before Commenting
Loading...
Post a Comment
Please use the above Search box to look for solutions before posting your valuable comments.
Comments posted on Tips for Bloggers are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,
YATOC - Yet Another Table of Contents.
Table Of Contents
45 comments:
Dear Vin,
I have followed a lot of your advice, and this is the latest one I used. Although my blog is in Polish, I'd like you to see what I did with the Minima Stretch template with your help. It's here: http://rhc-blog.blogspot.com/
Cheers
Rob
r.h.c,
Great stuff. You should design templates! :-)
Hi! This topic is very useful for newbies like me. Putting image as separator helps to improve my blogs.
I'm newbies in blogging. For this tutorial I have problem. When done these step i facing the error when to preview and save it. FYI, i only find div class='post-footer-line post-footer-line-3' in my edit template not as you write p class='post-footer-line post-footer-line-3' but I still manage the div class="pemisah" after that code.
Need your help. I'm using son of moto template. TQVM.
Han abr,
What is the exact error message?
Hi, great tutorial. I've a problem though. I can see the image i put as a separator, but I also see the default line between posts. So i'm seeing the image i did AND the default separator line. How can I remove the default line from my blog? I think I've made a newbie mistake, but I can't figure out wich is it. Thank you very much.
Sergio
Sergio Diaz,
What is the blog address?
Thank you for this tutorial...but I am encountering a problem every time I try to add the second code line in the expand widgets....
I get an error and it won't save. Any suggestions??
Mrs. Cuddles,
What is the exact error message?
Hi Vin,
I follow the instructions step by step. But when i try to save the changes, the error of bX-c895hm keeps occurring. It says that, it might happen because of following error code. Could u visit my blog and tell me where the problem is?
http://shikinsaiful.blogspot.com
thanks vin :)
nshikin,
The bx errors are due to connectivity issues. Try connecting at less busy times or from a broadband connection. They are NOT errors due to wrong code.
If you have wrong code you will get these type of error messages.
hello vin!
yay yay..!! I can see the line separator. No more error has occur. Thanx so much vin ;)
Hi Vin,
You are the best. Question: I want some gadgets on my site (www.kelloggscamels.com) to have an image background. E.g. gadgets containing links or text. I have not found a solution anywhere, not even on your site. Any ideas?
Kellogg's Camels,
In CSS part of the template put code like this :
#HTML7 {
background-image:url("LINK_OF_IMAGE");
}
where replace 'HTML7' with name and ID of your widget and 'LINK_OF_IMAGE' with actual link of uploaded background image file and save template.
Hi, I put a seperater as you described but the old one is showing as well, how do I get rid of it? http://www.christophandsally.blogspot.com/ Thanks!
Sally,
I see only one. Do you mean the line underneath?
I got my image in. Now I have a red box around it - how do I take that off, and the default line that comes with the template.
http://fireballsfrog.blogspot.com
Thanks,
Lori
Lori,
In your Template Coe box scroll down to these codes :
.post img {
padding:4px;
border:1px solid #940f04;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #940f04;
padding-bottom:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted #940f04;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
In border line change '1px' to '0px' and save.
I've followed your code and it has saved with no errors, however when I view the blog I don't see the image, is something preventing it from showing up?
loulusonline.blogspot.com
Dance Mom,
What is the link of the image?
Dear Vin, thanks for the info. I was finally able to change my image between posts. I must have done this 4 or 5 times and kept messing up. Then I realized that the first set of instructions say to paste the image code ABOVE the HTML code, and I "read" it as below. The second part of the code is BELOW...I guess I need to slow down.
Thanks for your help and now my blog looks great!
Take a peek if you have time:
Easy Custom Blogs
Sincerely,
Jeanette
Absolutely great tip! Very easy to follow and install.
I am having the same problem as Sergio Dias and Sally. The dotted separator line is still visible below my image. Could you tell me how to remove it? Thanks.
The site is sneakydaddy.blogspot.com
Lane,
Look for this code in template :
.sidebar .widget, .main .widget {
border-bottom:1px dotted #000000;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
In border line change 1px to 0px and save.
Hi there Vin,
Awsome tips you have jhere and would love to have the bar that splits my posts, but I can't get it to work...I can only find this line instead op the 'p class' you're reffering to... this: div class='post-footer-line post-footer-line-3'. It doesn't gives me an error. The only thing I see on my blog is the first code we needed to copy (with image link) on the top of my page... Could ypu please help me out here, thanks petra
Blog link: http://petra-project-365.blogspot.com/
petra a*k*a milo82,
What line do you have in your template? What is the exact error message?
well it didn't gave me an error message at all...The first code you wanted me to add is still on the top of my blog! The line I placed the 2nd code behind is this one: div class='post-footer-line post-footer-line-3'
I saved the template with the code right behind it, it just doesn't do anything!
petra a*k*a milo82,
What is the address of the blog?
here's the adress: http://petra-project-365.blogspot.com/
petra a*k*a milo82,
Can you send me the blog template? The address is in middle column.
Hi Vin,
I recently joined blogger and I am pretty new to all this so I really do much appreciate your blog with all these useful tips. I would like to make an attempt to put an image as posts separator but I would like to know first if the image needs to have specific measures and what kind it should be (jpeg,gif,png?).
Many thanks for all your help,
Patri
Hi again Vin,
Sorry for double post, but I am trying this tip anyhow (I am using a png image and I'll go on by trials and errors...) but I am stucked right now: got same problem as Han Abr and Petra a.k.a. Milo, I did copy and pasted the first code with the url link to my image, then saved changes and went back to htlm page, checked the box expand widgets but I cannot find any p class=post footer line etc. in my page, I only found this div class='post-footer-line post-footer-line-3'.
I need your help, please!
Thanks!
Patri,
You can put it after that line. See above post again.
Sorry for bothering you via mail. Just wanted to let you know that I made it!(..Dancing the happy dance)
Thank you Thank you,
Ciao
Patri
hi vin,
im such a fan of yours since last time...but i 've never blogged for quite a long time...and now im starting new blog and i find this tip very usefull!! but i 've done everything which is supposed to b done...
1) paste this
.separator {
background-image: url(http://i647.photobucket.com/albums/uu191/hsmcd/download-icon.gif);
background-repeat: no-repeat;
background-position: center center;
height: 20px;
padding: 4px;
}
b4 ]]>/b:skin>
2)paste this
div class='separator'/>
after
div class='post-footer-line post-footer-line-3'/>
but the image JUST DIN APPEAR!!
pls help~thanx
my blog http://iphwannab.blogspot.com/
Hse McD ,
Your picture is 90px tall. Try increasing height parameter in the .separator code in CSS to 100px.
hi vin,
sorry...talking about blog designing, im such a newbie =p
could you tell me how i can change d separator from 90px to 100 px??
izit to change d height: 20px; in
.separator {
background-image: url(http://i647.photobucket.com/albums/uu191/hsmcd/download-icon.gif);
background-repeat: no-repeat;
background-position: center center;
height: 20px;
padding: 4px;
}
to height: 100px??
thanx for d reply...cheers~
Hse McD,
Yes.
Hi There,
I followed the above instructions and I still am not seeing the separator in my blog. I too do not have the original code you provided so followed the instructions that you gave the other posters and I still am not coming up with the post separator. Is there another way this can be done? Thanks for your help!
Tanya
Tanya,
Try this image link instead :
http://farm4.static.flickr.com/3314/3411126814_bfeb837a52.jpg
If still not working upload to Photobucket.com and use the Direct Link they give in the template.
Hi Vin,
First off, thanks for replying to my comment. I tried everything that you said and my image is still not coming up on my blog. Is there a code that I can post into the post template section where my live signature goes under formatting instead of using html? I'm not sure what I am doing wrong! Thanks again!!
Tanya,
Put this code in Settings---->Formatting---->Post Template box :
<img src="LINK_OF_PICTURE"/>
Replace CAPS with actual picture link.
Thank you so much Vin, you totally rock!!! It worked! Thanks for being so patient. :)
Thank you for the code. Worked perfect in my blog... now I have to figure out how to do it on the side bars.
Thanks so much for these instructions...worked like a charm (well, after a few challenged-user induced teething problems ;-).
Sam.
CLICK HERE TO LEAVE A COMMENT.
Skip to top of post.