connect

Monday, May 18

installing a custom post divider


after showing you how to get rid of your post divider in my spring cleaning post, i've had a handful of bloggers email me and ask how to install a custom one instead. so after helping them, i thought i'd just post a simple tutorial so you could do it yourself.

first, get your design! if you need somewhere to design it, picmonkey or gimp are free photo editing/designing sites to make it easy for you. once you've got one, you need to upload it to photobucket. once there, keep that tab/page open because we will need to go back for your direct link.

now go to your blogger template >> edit html

click anywhere inside your html template & hit CTRL + F or COMMAND + F to open up a search box. inside the search box type in .post { and hit enter. it will pop up highlighted in yellow. right below the .post { tag, copy and paste this code.....


once pasted, go back to photobucket and copy your direct link url and paste it inside the parenthesis'. once done, it should look like this:


you can change the position of your divider depending how you want it. the last highlighted line you can change to either bottom center or bottom right or back to bottom left. play with it and see what you like!

note: if you had your default post divider transparent before we started, you shouldn't need to do this next step. every blog i've worked on has been a little different though. SO.. if you want to rid your default divider altogether, delete this last line....


before saving your template, always preview it!


if you loveee, hit SAVE and you're done!

questions? shoot me an email or leave a comment below! or if you need help designing and installing something customized for you, check out my pricing page for more info.

i hope this helps!

 photo EmilySignature_zps0043f664.png

2 comments :

  1. Great tutorial - thanks for the how-to, lady! [love your blog, btw!]

    ReplyDelete
    Replies
    1. Thank you! And of course, I'm glad it helped! xo

      Delete