
PART 2 in today's coding series is here! (check part 1 out here) This coding series deals with using CSS to customize your blog. It's intended for use with Blogger blogs, but some of it may be useful on other platforms! Read on below to get started.
To start off, create your signature in Photoshop or GIMP then upload it into your photo hosting site of choice (I use Photobucket). Replace the yellow text below with your signature's unique URL then copy and paste the code into the CSS section in your template editor [Template > Customize > Advanced > Add CSS].
-------------------------COPY THIS CODE-------------------------
.entry-content {
padding-bottom: 100px;
background: transparent url(HTTP://INSERTYOURIMAGEURLHERE.PNG) bottom right no-repeat;
margin-bottom: 10px;
}
-------------------------END CODE-------------------------
Breaking down the code:
// 'Entry-content' refers to the area where your posts are.
// 'Padding' is something you can play around with to adjust how far your signature is from the last thing in your post. This is how much space is above your signature. 100px is kind of a sweet spot for signatures in Blogger, but you might want more or maybe less padding. Change the number around and play with it, just make sure you leave 'px' intact!
// You can also change the position of your signature. If you leave the code as is, your signature will be on the bottom right of your posts. You can change "right" to "center" or "left", just make sure you don't mess with the repeat option!
// Playing with the pixels in 'margin' increases or decreases the amount of space between your signature and your comment section--this is how much space is below your signature.
Check out the rest of the party and be sure to let me know if there's something in mind you'd like to learn how to do!
No comments:
Post a Comment