How to add a custom post divider in Blogger.com
Some clients have asked about a post divider, they do not know what it is. What’s a post divider? It’s decorative image post footer between the posts. Take a look at the image below:
Now, you may want to know how to add a post divider in your Blogger.com, I am sure that you may want to do it yourself, right? This is Blogger tutorial, I would love to teach you how to add a post divider.
Before you do that, I encourage that you get some design tools to create a graphic for post divider and add the codes in Blogger.com.
Suggestion for the Design Tools:
1. Photoshop Elements (Paid Software)
2. Pixler.com (Free Online Software)
3. Corel (Paid Software)
4. Photobucket.com (Paid or Free Online Software)
5. Other design software
[How to Create the Graphic]
Since I use my design tool, Photoshop from Adobe Creative Cloud where I have subscribed, sometimes I purchase the online digital scrapbooking shop such as Just So Scrappy, JW Illustrations, and Free Seamless Pattern Backgrounds. I sometimes create my own background image colors. Before you purchase some graphics, you must ALWAYS read the terms and conditions before you create in order to avoid a violation of the copyrights from its owners. If you feel necessary to use this, please contact the digital scrapbooking companies first for the permissions. Otherwise, you may be required to use the credits of the digital scrapbooking graphics so people know where you get that. Creating and designing one of the digital scrapbooking backgrounds is very simple. It’s really fun and enjoyable.
[How to Create a Post Divider]
Now you know how to create your own graphic. This tutorial is to create a post divider. Do not feel so nervous to start up with creating your first post divider. Let’s begin with blogger.com…
Installing the post divider image using template designer
1. . Login on into Blogger.com
2. Click TEMPLATE
3. Click HTML EDIT
4. Click PROCEED
5. Copy the code and replace the purple text with the link into the HTML Edit:
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
color: $(post.footer.text.color);
border-bottom: 1px solid $(post.footer.border.color);
line-height: 1.6;
font-size: 90%;
background: url(“Your URL Image”) no-repeat center;
}
6. Paste the code in that link..
7. Check the preview (If it looks not so good, no worry at all! I will show you more.)
8. Click SAVE
If your post is cut off or does look so weird, I have more information for you down here. If you want to change the post divider image on the left or right, the simple thing you do is to change the background. For example, background: url(“Your URL Image”) no-repeat right; or background: url(“Your URL Image”) no-repeat left;
Installing the post divider image in the HTML Edit for the width and height.
1. Login on into Blogger.com
2. Click TEMPLATE
3. Click HTML EDIT
4. Click PROCEED
5. Click “Ctrl” + “F” at the same time so you can see “Search Box”
6. Type and Find: “.post-footer”
7. Find the code and replace the red text with the link into the HTML Edit:
.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;
color: $(post.footer.text.color);
border-bottom: 1px solid $(post.footer.border.color);
line-height: 1.6;
font-size: 90%;
background: url(“Your URL Image”) no-repeat center;
width: 650px;
height: 150px;
}
8. Type the code wide: 650px; height: 150px; and add them in the HTML code.
9. Check the preview.
10. Click SAVE
Now, you are satisfied with your new post divider image through blogger tutorials. I hope all is well with your new blog design. If you have any questions, please do not hesitate to send me an email or leave your message here in the comments.