When I redesigned this site in May 2012, I wanted to adjust the design at the end of each post, to immediately prompt people to take further action (a call-to-action).
That further action could be sharing the article if they liked it, commenting on the article if they liked it, or needed more information, or even giving people the option to hire me, if the task being described was too great for them to undertake themselves.
With that in mind, I set about designing a “What next?” box, which gives my readers exactly those options.
The design elements
The top of the box needed to have a title which would grab the reader’s attention and pull them in. I settled on the title “What Next?” and set it as an h2 tag. I then drew a line underneath that, with a border line on the element, to match the other colours already in use in the theme.
Below that, I split the box in two, with a dividing line of the same color, by setting a border-right on the left hand box, which was entitled “Leave a comment”, as an h3 tag. The box to the right is entitled “Hire me”. Each box has a couple of short sentences describing the actions and leading them to take action.
I finished by creating one last box below those two that is the full width of the containing div, entitled “Like it? Share it!” to allow people to share the article through various social sharing sites. I originally had five sites, but dropped Digg due to its drop in popularity, so I now have buttons for sharing with Twitter, Facebook, Google+ and StumbleUpon.
The final result
In case you haven’t seen it in action on my site, it looks like this:
It looks neat and tidy, like the rest of my theme and uses all of the pre-built styles of my theme, to make it look like it fits in, instead of looking like an afterthought.
And now, here’s the code that I used to build it, so that you can take it and make it your own:
Bear in mind that you will need to get the code for your own Twitter and Facebook buttons etc., rather than just copying the below (since they are for my own buttons), but it should give you an idea of how to use them.
And that’s all there is to it. Once you’ve put all that in place and modified it to match up with your own social network accounts, you should have a nice What Next? box at the bottom of each post.
You may need to tweak the CSS to make it work for your specific theme. If you have specific issues, try leaving a comment here and hopefully either myself, or someone else will try and help. Good luck!