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!
No comments:
Post a Comment