This is Part 6 of a series of tutorials, if you need to start at the beginning, click here.
In this portion of the tutorials, I will show you how to make and add a post divider to your blog. First you need to determine what size you need to make your post divider. To do that, go to your Edit HTML page and scroll down to your #main-wrapper and you will see your width there.
My width was 540px, so I went ahead and made my post divider 540x75px. I made the post divider the same way that I did my header in the header tutorial.
To install your post divider, you need to upload it to photobucket and grab your direct link code. Then head over to your Edit HTML page and find this section: .post {
First, add these lines:
background: url(Your Direct Link Code Here);
background-repeat: no-repeat;
background-position: bottom left;
Second, delete this line:
border-bottom:1px dotted $bordercolor;
Third, change your padding-bottom to suit your post divider, I changed mine to 4em, but if you have a taller post divider, go with a larger number. You may just have to play with it a bit.
Your final code should look something similar to this:
Thats it!!
In this portion of the tutorials, I will show you how to make and add a post divider to your blog. First you need to determine what size you need to make your post divider. To do that, go to your Edit HTML page and scroll down to your #main-wrapper and you will see your width there.
My width was 540px, so I went ahead and made my post divider 540x75px. I made the post divider the same way that I did my header in the header tutorial.
To install your post divider, you need to upload it to photobucket and grab your direct link code. Then head over to your Edit HTML page and find this section: .post {
First, add these lines:
background: url(Your Direct Link Code Here);
background-repeat: no-repeat;
background-position: bottom left;
Second, delete this line:
border-bottom:1px dotted $bordercolor;
Third, change your padding-bottom to suit your post divider, I changed mine to 4em, but if you have a taller post divider, go with a larger number. You may just have to play with it a bit.
Your final code should look something similar to this:
Thats it!!
Relax and enjoy, don't be rush.
ConversionConversion EmoticonEmoticon