Sunday, January 25, 2009

Adding an image to divide your posts

I always love to learn new tricks in blogging. This one is one of my favorites! You know how you see those cute images that divide the blog posts? You can add one to yours!

First of all, get an image. One that's flat and wide. I made my own on photoshop. If you need more info on how to do this, email me {sarah@mrsdlightful.com}.

Here is my image.



Ok. First thing, go to photobucket.com and create an account if you don't have one already.
Upload your image.
Click 'edit' below the image.

Now, go to your blog. Click customize. Click the layout tab. Click 'edit html.'
Scroll down to where you see something SIMILAR to this, especially where I've highlighted in red.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background-image:url(http://i388.photobucket.com/albums/oo326/sjbringhurst/BVSfleurspaper01.jpg);background-repeat:repeat-xy;
width: 955px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {background-image:url(http://i388.photobucket.com/albums/oo326/sjbringhurst/BVSfleurspaper02.jpg);background-repeat:repeat-xy;
width: 700px;
margin-left: 10px;
padding:5px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
border: 2px solid #804000;
}

Now. Where it's highlighted above in purple, REMEMBER that number.
Now go back to your photo that you downloaded to photobucket. Remember you are in the editing screen. Where it says 'resize,' change the number to whatever it was in your html code of your blog. Then choose to replace original.

Go back to the 'edit html' area of your blog, same as before.
Scroll down to where you see this.

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Replace the highlighted code with this:


.post {
background: url(direct link);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:5.5em;
}



Go back to your edited image in photobucket. Copy and paste the DIRECT LINK to the image.
Paste it in the code above where it says direct link.

And there you go! A cute little individualized divider! Now you've got the cutest blog around!



No comments: