Posts
Hello everyone! Things have been pretty busy around here but here's a neat blogging secret for you. If you've ever wanted to spruce up your posts, how about putting cute line dividers (like this) between them?
Here's how to do it:
1. Get Crafty!
Create a line divider that compliments your site. When you make yours, be sure it fits the width of your blog post section. The standard width for Blogger's Minima template is 410px (check yours by looking under the # main-wrapper { width html code) . Don't make yours longer than that! I normally make mine 400px for width, and anywhere from 14-30px for height (depending how thick you want your lines). Once you've created one you like, you need to upload your line divider to an image hosting website (your own website, photobucket, etc). Copy the image URL.
2. Get Geeky!
The next step is to log into your blogger account. You're going to be editing your HTML in the Layout section. As always, save a copy of your template before you make any changes! To insert your post divider, find this section in your html code:
.post {
margin: .5em 0 1.5em
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}
Once you've located the right spot, replace the above code with this:
.post {
background: url(http://POSTDIVIDERLOCATION.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 3.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}
All you have to do is use your post divider URL and replace it with http://POSTDIVIDERLOCATION.jpg and voila, you've got your own post divider!
More Geeky Notes
You can customize your own spacing!
*The 3.5em for margin is the distance between your last post and your new post. Mine is 3.5em, but you can have less distance (make the number smaller) or more distance (make the number bigger). Play around with it!
**The 1.5em for padding-bottom is the distance your post divider is with the end of your post. Mine is 1.5em. Again, don't be afraid to play around with it!
1. Get Crafty!
Create a line divider that compliments your site. When you make yours, be sure it fits the width of your blog post section. The standard width for Blogger's Minima template is 410px (check yours by looking under the # main-wrapper { width html code) . Don't make yours longer than that! I normally make mine 400px for width, and anywhere from 14-30px for height (depending how thick you want your lines). Once you've created one you like, you need to upload your line divider to an image hosting website (your own website, photobucket, etc). Copy the image URL.
2. Get Geeky!
The next step is to log into your blogger account. You're going to be editing your HTML in the Layout section. As always, save a copy of your template before you make any changes! To insert your post divider, find this section in your html code:
.post {
margin: .5em 0 1.5em
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}
Once you've located the right spot, replace the above code with this:
.post {
background: url(http://POSTDIVIDERLOCATION.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 3.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}
All you have to do is use your post divider URL and replace it with http://POSTDIVIDERLOCATION.jpg and voila, you've got your own post divider!
More Geeky Notes
You can customize your own spacing!
*The 3.5em for margin is the distance between your last post and your new post. Mine is 3.5em, but you can have less distance (make the number smaller) or more distance (make the number bigger). Play around with it!
**The 1.5em for padding-bottom is the distance your post divider is with the end of your post. Mine is 1.5em. Again, don't be afraid to play around with it!
5 comments:
Hi Tina!
I just wanted to say thank you for the card and the prize! I can't tell you how much it has meant to have so many people be so supportive during this difficult time. Your words brought tears to my eyes - the happy kind, though. Thank you. And thanks for the Sears card - I'm actually going to hang on to it until I can use it for baby stuff, I'm keeping hopeful.
Best,
Emily
Works like a charm!! ty
I made mine out of tradition Portuguese tiles!!!
http://lisboaempormenor.blogspot.com/
Emily-you're very welcome! I am so glad you've got a wonderful support system! Keep the hope for the future, there are good things to come!
Duende-Looks great! I really like seeing how creative people can get :)
I'm sorry to be such a nuisance, but I get the following error code:
Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor
What am I doing wrong?
Your tutorials are really easy to follow! Thanks a lot for sharing this!
Post a Comment