STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:
.post
.post {
margin: 0 0 40px 0;
width: 90%
}
Here is the separator css properties :
And here is what you need to change in above code to customize it to your blog.
Separator-Image-Url
Change it to the separator image url,
2.5
If you found that the separator displayed behind part of your post latest line, increase this number, for example to 3.5 Or 4.5.
Now your final code should looks Like The following one.
Free Separator ImagesNow 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.
background: url(Separator-Image-Url);background-repeat: no-repeat;background-position: bottom center;margin:.5em 0 1.5em;padding-bottom:2.5em;
Separator-Image-Url
Change it to the separator image url,
2.5
If you found that the separator displayed behind part of your post latest line, increase this number, 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;}
Free Separator Images
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI7wURiM4pf0NjJD_Z2a6b9sPX7H0nuZ0SpVVEFH2DxmrrohaWFwNTabJYP8Br0YV6XMm0UNHylumCdIM7DeY8uFUi0hraKkuI69SPn0nkmQMwqPa-HsqIRZwFpLtfNmbPzeajusS5w3Xi/s1600/barsnake.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXEC9uHCHmeV0Vbpd7i6dUlLrY-In4er_0Jq4M8_CakugOBQu1Fv0BGXPJvSd1RVv5BGQWPu9UDN3Tq2t_s57DhtRAWlqkQcxHxs2HIobjoSU2LW4X1zPuzQvrxZfwq1l0ZPRcruscLQRd/s1600/bar54.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNQpN2_Ud13Lk-Jnf0LZxdjlyO9mvBf75s0unYweRpTN3LgU531RQWph6e1FT0iR9ylJ6Fq_mNTMbClhOHwd99ualXhYKti7hyphenhyphenQI_ba0r3TWj7Sua0-gm-LBwBEoX0i_j4puH6keaqnMt/s1600/bar48.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-tXLQ3geaLBhyphenhyphenO9EjG6El6CIsS1SEwErk0Spvht_PREALRFuYT01MzFfu4WEwEybE_cwWv7mFmK7mUnx5cCgkci5by1N6krB-nE2re7S2uiZ7P9LhbNhCjOUR4LEGqzO-M_z4oIX43Nss/s1600/bar47.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvpGp9UjePAE-RVvxIHInRxA1nLcTruEdTK6kKnyfpuER41TpSx-NBdRwthEachn4AUglfxDqo_A_Vr9bxpSEjSYUvSISJF_RcrJ3L7p3lqW3qUM-GrbxI74Zs-cW0j9sE_G_yzqEpVmXn/s1600/astarl7s.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW4qQ3Nas8IRlbbiuPHQNJVrKoi7H8J9dc29Bo3I_As2AMuSPkmxA9MklXyHOFhmlhjXkiPOznBXw_1bWvS8S8OsyHtUlS46rLZZPDz0dBa4_LM4z4dwqdUqNMq_H0_1DW8XsGwC5AnogV/s1600/dividers_129.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhxKk8pZtFZL7PNHpVviNBzhf8jfUq0C01VZEAhMeKCnLe-EnLqMwVwStxX5Lwosur37dlMc1glsm5RdcjbzTrcAongAHS8bX5kktYCWLoLlsMz1UD4XfLBcNg84c5jk0Br8OGPS6s5gLn/s1600/dividers_96.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYrhjVPsH-7NnSwPF_hPhPDjTzVDuMMfQfkDvW5iy0byt4xNCZSyfafyXOzVH3GcbvZfZXkv1EAdPX3yVfdx__lWA7wXXH3uwimAr1iveZaghApTRCX3NQYsfUjns6S12JxEX_O-MoSW5p/s1600/clipart-heart-border.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimYakcztLTXN0lQzOElgFWQ6uvrZA1R1-jmij_nsKX55phlNtRmD1geSihx4cvPHFbk4vScXjrv_ReXYO6g5acVKHRtz-j2Yn8AncLqzpjV6S4l652AMOrV07SBEPp0YR_otgWlCrEs0fP/s1600/chain.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhF0wy7mF2CJOg7WfhVAgsFUieZRrKKU-vWa2y7v5hbFYt3lEZBzrbsdyk9oK2ZMuCmG9WWWBQqigy2md086qZv3FCFmUuKZAYLMq01-p_EK5JJtE4D5oiPYPGsG2MA5GAwjoIVRn56Svi/s1600/bloodrose.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSgUzgW57ozvWMrXgE8dhxfi-GSkI6fcnuLvpOSBANyzozR5nvNHTaND7Q1uIrZhbi9Z9QhYgAU3Hb7phj5I2XEJ0Xm0N06amkDE9B4uQUqcGLNmKReShzK8DI3yHHzGm1196CHWErwZdE/s1600/stonebar.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitF7TbKg53Zh_u3HNt2o_ppNoxjsB1vSLpU1jz2lHZYmjp6v_BOHFwF5x6hslKj4DvI-BsT-pJqxxlRkXC4oH9FFJyn0vxsp1erjDgup_q0FC0q9Za59w1-smtnU2eYi4_blBHy_Ylmj3W/s1600/resfiles_sdfp.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-OhZoUijydeDVZKnVsdiMi0sKlmrOkuGY2ShRcc1Da6nFPi6ooC7zvZspST6yp3aTlpMjr_MEBSjc8Q0kz-5GUOXpQ2NzajybiV7TLv1efd35No65mopfwV-hKc-XxCaB0Hjl586pkum/s1600/resfileszcp.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDJjsmEBcOdC2KauE2GDBkyF246IzQJ9bqU5ToQc-7sK6cHxXzK2QpnRXaEYwK0A8w9YLFb5MHBzxtAmtDqDeNEogtZyQTvB8F3vUCKK0zcEhxHWpywet77_tC2lEIbFHAc6lcHJ1AprH/s1600/resfiles_output.php.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIwMRmctwCSXgEyDTBHmdgrUbZrPSvRrqbmDw95pBjOemORfOwzu2VvNitUeRBrEg2OVyq_oiWEeR7weR664rSqPTwpu6Ge65SHDHDK39GutAXcpSvvXhnTdDMGL-eY1CxLhPoAAsoEs0J/s1600/pumpkin-border-hth.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9m-rFCuegS49RO2I2gmaR7ySlkELdauh11xGY0db-MTHqkgjOu9ydPbXiFamxrzH5qz9173ProeDulZsBV9CriGNLCjYKr972DM3guZw_PQyy7Of7Rx_wsD1w0SHd242QuOgSHFRVVg8x/s1600/irish-border4.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFu3U7L_353ukXPgAyQslauubIqyP86NRPlExV8q_ISRTLfu50ZBKfj6tR-BQSo4-alHLoiW89U5URL88zcdEOSr1M70vxSmcQbvnd7L8DPtiliUaq1vTdVNQXIPIS_YPh5REy9_4Q7KAm/s1600/ivy.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoJ3BwEGlkgXVKPeCNJrbhbc9Ox7E8Hz7b7_bA8kHeFhq8j9qnXCc-v0ENKhRi9Z8owG21xkxty0fRDV7WbvGU8uD9652etOfUtadN4MxE9mO6-QRCg4JvXWxfryf5nPDxrZYRZtt-UKem/s1600/irish-border1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVz4ABYmQLmLTJ-QhyphenhyphenOg-8xV29x9bPiVrTN_3cohW9Iw4O2fnI24EEsegzVF_kMly5HwS7R_DPgvVyIl6XEKM6PjxVy-VR7vgGCwR91xizGRUk4WHOjXGwp1Fe-UieAdYoxk-RXtO_HiHr/s1600/frog54.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXzItWIcm-liTjVNwak9hkAggBG5ai2UWG0RaOVI8DQ0RIVo-S0lGpcKkrFq29zmKp2KyQt_FAx38E5zimyZqqR471YP8bfznvnpMXL2_RCwbWvbWTahCxDC9NG3Bqvar0OJf9681qn3fF/s1600/flowerbar.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdaMtubex_nDIg_2KBTszz33W3FfJYFyJVGdYE4KzDVkschVLY6Xle19Kg2ODNq17BN2kks3jyrQf3_NAOqXkCqHjQqT-b9POHaNpPAHyx91pEE2KW3lyjD_NuBGFOJEdN1eCszUmj7Bd4/s1600/drawing-separator.gif
Need More Separator Images
Ok, here are 3 links to great sites contains hundreds of free separators and page dividers.
Great info. But how can I alternate between two or three different post separator images, instead of using the same one each time?
ReplyDelete@L.J. Williamson
ReplyDeletesorry my friend i don't know.
Finally a person who knows how to explain the readers how the different parts of the code works! Thank you SO much! :o)
ReplyDeletei find the code but it matches up to 20, which want should i choose ???
ReplyDelete