How To Add A Cool Image Divider Between Your Blog Posts

I will show you how to make your divider a hyperlink or just have a decorative divide thats not 'clickable'.


So lets get it done :


First Here are some examples you could use :

Photobucket
Image URL:


Photobucket

Image URL:


Photobucket
Image URL:


Photobucket
Image URL:





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4hGYWNqArsSZY2BfyzSs2ffjvkna6lmGrfQUzEgbzY3fR2aqeYjDC1v57L3K0LYZJfuz1HyycsFKRzj0XwLrLo8ulniborUcy47KpR8emRhHqQ5h7pKuaLp_j1CjOA4e4TKepKL5ft2v/s1600/barsnake.gif


 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxj5kO5virOAxauk4WYOHEF6vrFx6tMv9_Fi3EzwTPqY1biyWnmMNMKutoaD3qAk5VC-Ps7qoHqHUwEos_NE_Qk0kKXkn5JCulFCDOqpLIPuhjlvqmdIPQrH4NI5OQXNOTYFCwleETaut/s1600/bar54.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggCEhnzFnTk_IpkwPfpTiQra3m2FAdiEvvx2Ahpi97gNyIIdHv09KztGJICYkQ0yEO3ftngrSpa8LzyI8PS4UPluy49KVViWhimVhbaUVamlD74zgOUEesq4tO46YOKCcFKo_y7Rh6tltt/s1600/bar48.gif



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_dguqEXNOCLq5hs4sCJWrp8Qv_u2pTL0ldvjIb3Q4zZihLGS-lg-kEeQZi8oEf0f7L3zSa0tt3MVpQz6fMAg5ByRAc3QuKgLARClU6gbYEk6L1OUKMX6iNV1kipfMcPlizHTP5rz8aqVL/s1600/bar47.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0IpSwp93YW30O3BQdE7PNkGEvHSAidJRIQEUAnzfEGVdF-hRuuXzvmU_rce-5EX8CckxPfEVhFPu9b8rgiFRkNInm0sKq4yPJHjVIE5Rp3tsj0mO0be_qv005gxrkBXFIHKJnHCDIhK0R/s1600/astarl7s.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd54gZNxREM6_bn2rCJn7z5CynwFS3WN2tWnTJr4TvmKM1rBSGL0MuN-xlTUEA9vDM-CDHqzLIeWLTnh_Dd9GNnLV6BDMgVwIvhNpF6AiLKEhRUHWCx_YMFUhHj00Pn6au1Kc74nowsqcm/s1600/dividers_129.gif



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCNXMTKXkODU8hnWyQCuZ1clhl1k1xg7UDzywa9A_i3gnaBTO0VCEABAenUjWgVecQgb2VD3aiBGPsiWgqwQ_JNWZ3LtDG0jS8k3ucB4oWCycgvxvc0ZYoc4omQXAHwnCkYNbvOSE4lVTx/s1600/dividers_96.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkjGnhKBNELFr6Zy7JeuS8MS4mIez3_OzsqSXqFX5Y6AIjds-DtgYwRhjFVuwMnDkRaIq0jJ2kCQdXQ9m4guR1PC-QdnTLKJJrikje74z794k8phAE4JQcyAL1EZrrUWczBfAwmOlH77Fr/s1600/clipart-heart-border.jpg


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH1M2bI5_B8ICQJ10x4ay1pCfdGOriHboIqwFGG2Grj_6D2bb2IGqw7Row_nSqHFiQf0YAScfA860gpVNUGkVW4TJwQG06uNsJNxgbDg3FylqPONnNKPcLWBqhFl9CYrPtTpKT3s2Zpi9v/s1600/chain.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdsUvbth5-rvpfa0XAZy86sg1bDxZwZ_y92h2eXxFEDtQV6tWiZryIHddenXLxghLlTVtwbVxFT1QeWnPidp_s30A7NI-d-hVtn1nXY-qq6NUKRSn_jXfXGx9JzCXtJixKW7F4XwnCOX7h/s1600/bloodrose.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Y4YSIbGRZ2F_Etx2wOlC2venQUEU8sZq5cz5UJyhnG_yuRyiFmcnylv3i9BXyKaZU1I1QtpWhbYf56OFLhAsAQng5Bk-7-qY3adHj-uftHwrMOGPbVbguXSeEPqKPzMGt0ehAq6M3ejp/s1600/stonebar.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij8CFAjI1ahvp5euEVIaeu2AHaKSvRHdpZ6ySwR7sR4ODdTNR9YrHcgP-npKpt3-3Ta9y-6rGFoLdqVNKGA2wAI-kOBzpy7AyXa3RBnId9nJKTo9zkrj6GjF32_zSN82ch4j5NCg0kDaNN/s1600/resfiles_sdfp.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnaERvHAjVLZtUloXXw8Owtoy6Fz0KWUN1altK8hBJFS0TvrP50dI_9w1iRqzKiSCjeOzn0j3Iae-6RpNAAXeOn9SkRJtTNHiyTbdu5M0Y6DIUZBF_OV0EHpo1OV8q-GdS1Fyn5yl9eo-A/s1600/resfileszcp.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLtS5GkWx0qOxBrrStS_RbxcjivdcXlCFfW5ruIGL3gtsAzOAzhwth2hvcH1WyjcOIb6x_K0Vq4yUgVdd2ddsOfSUrKsUsPRCL2jYI8pVVjLnuhchpoFXCDm3Cbc9I093naQH5-XjklCXm/s1600/resfiles_output.php.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lSuki8qAy-C-rgwb9xMETH4wAAkv7gQJJCsIKFd_z14azXsvg7f1pcuU-5dikW3PTGMbKPSNYbZh-JEKYBMgMGsPrZfMF_MMQbUHoUA2mKk5DI0uX17UgKKsYXuQbnSf33SwsNK6d64z/s1600/pumpkin-border-hth.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaWMiE1ghx3gwd4Z512_A7gG7_Z5dB9WUBdjBFKkeHqCSSmwM3_gQLGa3bpZbltZ8RxeZaxJ8EpVYOJUrnRdqZcwx65msIlDrqSC1DXCsnXZ1MxsQcynne6Vd5y5VcSMi4dR6HfZgKznFX/s1600/irish-border4.gif





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm8N69l7iHvVItA5XVuwrk5g5xHhHxPX_wEKWLNXefb2tL-ncjVgA_RHEu87THoRLsL2fF2R-ZLVFaGVnuEPMJk0imv6J1A8DuAyrcuqkLB_c-Ld9bvXSrNcwgurZ3a9Jh8yfvi0hN4cWj/s1600/ivy.gif



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsjmCXMc9_A8KdYRpQTjpxQUBmjx0IRHO0nWxPDsElBdy75uPF4e-lnpQuHqgxm7hS5TnwOQMeHXWl5VGkSKIKxnAnlwH2frmrBOZZBDryozBJFNokzaAjH6WoYQ1ZkhzEJh4SEsgMcyl5/s1600/irish-border1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLd8niXxhHEgNXkSeJyO0Hy57oNQnOWzBmHU-YHce475ggzoaqPnLoYlkZjvlzxSYkWJcybBSwETw1uJnyLzpQPUObDLVw7cotXWVCnc_ewSepcyT9wWKYhNYDd-8akKiZH5wobVt-oXWh/s1600/frog54.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWl4fE8g0wnyL5Eo7dhZ0ctPXurrjEI6faYlu-ZIz_2QqWbHuXviVDQVSQkdTttgTy5BDu_-p-as3O5RukOotzDByEK1IHegn1PqKJuLbnothO6H_Mv9q3Aj-20ooCd44fgyfjG6rN7Jek/s1600/flowerbar.gif


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUbVgJ2YCkYlJTivt7XM36mWKbT0_u1Gppid7aTZf5f79PtUFDxnK9PuPObRDYthvrb7R_t7YaRr35pplH29e4q_j_D951Ogd48ycujv3EU-f6Fxn4ydTPTnqg49LeaxC3jVgvyL0WHVpn/s1600/drawing-separator.gif
 
 
To put your divider below the post content find this code :



(Basically after the last word of the posts)

Note:If this code is in your template twice place your divider after the second.

<data:post.body/>

If you cant find that just look for data:post.body without the enclose < > tags.

- To put the divider below the complete post find this code:

(Below the labels ,post time,auther..)
<div class='post-footer-line post-footer-line-3'/>

(Press ctrl f for a search bar to search for the code)

3.Add the following piece of code Directly Below the code you found from above.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZF2FfhyphenhyphenxLfWMNLZB6YwWQpQqFFpY31TNuMvt63To_SrtVTfN8dtPbbBVgDpaSi9-emMCucVA-jkkF9inOZt1MF-d6iFEy7AhjlN03BWPGK5MzkYXB3ODlqfb_zytjJPwWPwgRllve_uUw/s1600/best+blogger+tips.png'/></a><br/><center><a href='PLACE YOUR TARGET URL HERE'><img border="0" src='PLACE YOUR IMAGE URL HERE'/></a></center>

You now must make two change to the code:

1.Were the code above has PLACE YOUR TARGET URL HERE add the address you want the image to lead to when clicked

Example : http://www.modernhackerss.blogspot.com

2.Were the code above has PLACE YOUR IMAGE URL HERE add the link to the image you wish to use such as the image URLs above

Example :http://i941.photobucket.com/albums/ad259/spiceupyourblog/divider.jpg

If you dont want the image to be a clickable link just use this code:

<center><img border="0" src='PLACE YOUR IMAGE URL HERE'/></center>

As above : Were the code above has PLACE YOUR IMAGE URL HERE add the link to your image.

To use a simple horizontal line as your divider use this instead of the image code:
<br/><hr color='red'/><br/>

It will look like this: