A few months ago I tweaked my WordPress blockquote code to make a little green box. It’s nothing amazing but since then I’ve used it in various places with quite a lot of success.
It’s increased my click through rate to some affiliates by 2-3%.
It’s brought attention to old posts that I want to highlight.
Best of all, however, it’s dramatically increased my email sign ups when I’ve used it in a post to promote my mailing list.
In this post I’m going to show you how to make one in just five minutes and then talk about how to get the most out of it on your blog.
Practical stuff, yo!
What does this little box look like?
Alright, so here’s how the little box is configured to look on this site.
Here is an example. It’s a nice little way to draw attention to a link or just make an announcement about something happening on your blog. I’m sure there are lots of ways it can be used.
Now the cool thing about this is that we can use the Stylesheet in WordPress to change a bunch of the elements like:
- the background color
- the border (dashed, dotted, solid line)
- the line color
- the width and spacing
So, how do you make one? I’m getting to that!
How to make an alternative blockquote box
Alright, as I mentioned at the start of the post, this little bad boy is an alternative blockquote that is made using your WordPress Stylesheet.
It involves a little bit of code tweaking but it’s really just a matter of copying and pasting so it shouldn’t cause you too many dramas.
If anyone knows a better way please let me know. Always keen to learn.
1. Back up your original Stylesheet
Before you make any changes to your Stylesheet you should always copy the original and save it somewhere safe. Sometimes you make mistakes and if you’re not too experienced with coding you’ll struggle to get it back the right way.
Just log in to WordPress and go Appearance > Editor > Stylesheet and then copy the code into a Notepad document or something.
2. Find your blockquote code
The next step is to find your current blockquote code. Just stay in the Stylesheet and press Control F (Command F for Mac) and type “blockquote”. It will find the code so you don’t have to go scrolling around.
Here’s what mine looks like:
This is the regular blockquote that appears on my blog when I want to quote somebody. It has the little quotation marks and looks nothing like the green box above. So, the next step is to tweak that code to make it look how you want.
3. Copy the code and paste it below to make a second one
The next step is to copy your blockquote code and paste the new one directly below the old one. You then rename the title part to something new. Have a look below where I’ve renamed mine “blockquote.new”.
So now your code has two blockquotes for you to choose from.
4. Change the design of the new one
Now you need to do some coding and change the design of your new blockquote. This is a lot easier than it sounds. Basically you have a set number of things that you can change when it comes to CSS coding. The main ones are border, margin, padding, background color and font.
Here are some that you can try below:
5. Use the blockquote in a post
Now that you’ve coded your new baby you can use it in your posts and pages by just using the same blockquote tags but by referencing the little new name that you gave to it. In this example you’d do:
How to get the most out of the blockquote box
Here are a few little things to consider when using this little bad boy around your blog.
1. Don’t overdo it
Please don’t use this little box on every post and all the time. Part of the reason it is so effective is because your readers don’t see it often and it stands out from the rest of your content. If you use it regularly people will develop “blindness” towards it.
2. Don’t copy mine
Now, we want to make this thing stand out but we do not want to make it so different that it looks like an advert or something that’s not part of your site. Keep the fonts the same and make sure the colors fit well, even if they are different to the rest of your brand. Don’t just copy mine – it won’t fit with your site.
3. Test it
As always, don’t just assume that the first thing you do is working. Try different colors and measure not only how many clicks it gets, but also how many of those clicks are converting into sign ups and sales.
4. Remember the copy
Don’t just assume that because you have a nice little colorful box you’ll get clicks. Make sure you craft some compelling copy that includes things like social proof, scarcity and so on. Test that as well!
5. Drop it if it doesn’t work
These types of little tricks are wonderfully exciting when you find new ones. I get a real buzz from implementing stuff like this on my blogs. But, you also have to be prepared to let it go if it doesn’t work or if you get a lot of complaints.
Will you give it a go?
I’d love to know if you find this kind of thing interesting. I’m always playing around with ideas like these and thought maybe I could share more – maybe each weekend – if it’s something you’re interested in.
Will you give it a go? Please let me know in the comments below.