How To Add Separator In Blog Posts In Blogger

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Now find (CTRL+F) this code in the template.

.post

this is the cs part that controls your post layout and style, it must contains few css properties like the following.

.post {
margin: 0 0 40px 0;
width: 90%
}

Now we want to add the separator css properties between the opening and closing tags, { and }

Here is the separator css properties :

background: url(Your-Image-URL-For-Separator);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;

Replace "Your-Image-URL-For-Separator" with your separator image url.
If you found that the separator displayed behind part of your post latest line, increase this number (2.5), for example to 3.5 Or 4.5.
Now your final code should looks Like The following one.

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(http://www.imagehost.com/separator.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

Now Here are some free Posts separators to use in your blog, just copy the image url and paste it in to it’s place in above code.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vS6rwH_3gr-N0pNROMlp3fBe1roGgXRvCC00oQyBHwRhVpa3Q_JCu7pwTZoAtMCNn1XXsItgoyRn_WEQO5qT8BAPX3LJ5UFMFfY8592kcT1u2sIiPiBJV8NEXxYrcPPwLO07UXg8AxwR/s1600/sep.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCMKjR7v1SsTyJxNUKFTl5ZsYJxxbKH1GhSPp1T8zRhIMVbBFwGW1_EQhgugzvuivGS-2Agx-aVGvX5qxj7Jbfq6JvtqvvPDefdBhCNZ5x_cISq2_pGp5C-w-tkLwGQ-rq4c6qaw317206/s1600/sep+%281%29.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2VsQ8FytleI_6IKzbHrFEOyAE_5F8sFmmS1ybQHmlFQ2AmFLkip7yfhNTM-MDBllpfwJrSQxPlXMgke30td_U0NVO9WDpnPSXqB_xdavq-3fuKIGtu94lM-R7XGYHu6bsRDSaUB6lIcil/s1600/sep+%282%29.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpzqRY8-iE-aPgBDAlRKyrxZ1yuy6gOfKznJ_1Csq-_e_xb5v-zHTvzOUdW5HDsRg8d1bJDyiPgrXd2TLKNX2dTklTkBX-lUgQd9ry6a8tsaulxphaAuZAMxHDs4rIlb1uQHMqhOIv1Se9/s1600/sep+%283%29.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimlM2wCogIuEO7Z1yPUUO8gdzNSamobZJjAZCUXIgs9JF7cK6-Xx3lQLuiLIJJaV0LU6BGvzQCYrHzNt5WEcF5RmRv-DrQuNwUnReAlpNYOuAi_Xd27ting0cr09b3JyL8Ll1kKWcnX1j-/s1600/sep+%284%29.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicycr_LwMcmwNuequ0MsFDXtAezGD-z7AnCncuuluEcZ0OubEGtsD8fR2e_xwB_J3Uark-1IVwf4Dk5cU2jhCsPpao5EaRvSQT1y871GoxEIUvv1-D-9o2VDFBpXprZ-9ub7JFaa1KB7xR/s1600/sep+%285%29.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5RTTkUsyAEesotnU7LiBhyphenhyphenvCCeQWMfwPVuRXnrY_NLEMCJ3_pQ8atApYRqrdx95pNHnniXIsvJ3qnd8VJUrCEg41k45LsZHJsO3GuuYFIUT4cewsoSEVaPA3UhGTEspDuW47G0eb98yJW/s1600/sep+%286%29.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTykO3-YxBTiJHwtcufRx3qm5WuOROQIFIVQYMCQQuc2K7DGmkpkPNEZd79JThS3cgfFY_6UojRB8NTz9-nsPWewFNsauipnHpnDyGHUpruwK_qyJpsxRpokPDZVG0EtgJMZOC7gmPk9fV/s1600/sep+%287%29.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw21vm-T0eJvdDKUYIVJzH0rZTZHT6Km_crnUJuMKzZjTecNI5MhHpaWFgRh8_5G6HomjI-SNNkvIR2h8FTJd7cN7dWy0wfUDtfsLvCbxet7xwajGBm_taINCU3e6DvYBQQoziaTV85hFD/s1600/sep+%288%29.gif

Finally save the template.