As a blogger you pour your heart out into helping your audience, whether it's through fashion and lifestyle tips, organisation, time management and productivity tips, wellness and health tips etc.
And you want to give the most comprehensive and detailed guides to your readers, because that's what you love doing, understandably your blog posts might become longer than expected.
The thing with long blog posts is that while search engines love them, and rightly so, chances are that people (the actual readers on your blog) usually skim through longer blog posts. That is, they read what they think is the most important to them.
As a blogger, you want certain things to be really easy for your audience to do:
- Follow you on social media
- Subscribe to your blog's updates
- Join your email list
- Share your content with their friends, family and others
- Be able to easily read content on your blog
- Navigate around your blog
- Make purchases (If you sell products etc.)
- Be able to read about you, who you are etc.
A well-structured blog post is the difference between mediocre content and good content. So the question is how do you tackle long blog posts? How to highlight certain areas in your blog posts so that your readers never miss important information even if they're just skimming through your content and not reading word by word?
Here's a step-by-step guide on drawing attention to specific, key areas in your blog posts to make them stand out and pop in front of your reader's eyes.
To be able to make certain areas or content in your blog posts stand out from the rest, we're going to design a content box. This content box will be different from the boring white background your blog posts have and so it'll help divert your reader's attention to that specific piece of content.
Don't panic, this is some very basic coding and I believe even a technically challenged person can do it. But if you run into any errors, or want me to install this for you, you can hire me to do it for you.
What this content box will look like
The code that we're going to install will help you make a grey coloured content box around your content, this box will be mobile responsive if your blog's theme supports it. While this will work on any host that lets you edit your blog's code, such as WordPress self-hosted, WordPress Premium (only Premium and Business plan), and Blogger.
This content box is fully customisable, you can change colours, add a border, etc. This tutorial will help you install the CSS code in your blogger blog. But adding the same code to your WordPress hosted blog will have the same result, just the installation process will not be the same.
Installing the CSS for your content box
Sign in to your blogger account, click the "Theme" button, this will take you to the "Live on Blog" section on your blog.
Now click "Edit HTML" and then when you see your blog's code you click anywhere inside the code. Then press Command + F if you're using a Mac or CTRL + F if you're using your PC.
This should make a search box pop up at the top-right corner of your blog. Now paste the following code in the search box and hit enter:
]]></b:skin>This should help you find the above code in your template. Now just above this line of code, you need to paste this code:
.contentbox { background-color: #f3f3f3; padding: 20px; } Save your template. You're done installing the CSS for your content box. Now all that's left for you to do is use the HTML part every time you write your blog post.
How to use the HTML for highlighting content and using this content box
To be able to use this box in your blog posts you'll have to paste this code every time you need to write or showcase something inside your content box.
You will be adding this code in the HTML section of your blog post. And you'll want to save this code somewhere you can quickly access it, I use Evernote for storing all my ideas, drafts and codes. But you can use any program you like.
<div class="contentbox">YOUR TEXT GOES HERE</div>
You'll write all the content you want where it says "YOUR TEXT GOES HERE" and you should be able to see this content box and your content inside it.
If in case you're unable to install this even after following through this tutorial or are stuck somewhere, let me know through the comments section below and I'll help you out.
This can also be installed on WordPress but the procedure is not the same.
If in case you're unable to install this even after following through this tutorial or are stuck somewhere, let me know through the comments section below and I'll help you out.
This can also be installed on WordPress but the procedure is not the same.
Don't have the time to do this yourself? Hire me! I'll install this content box on your blog and customise it to match your branding.Plus, if you ever loose this code while changing themes, I'll re-install it for you.
How to customise this content box
As I mentioned earlier, this content box is can be customised to match your blog's branding.
To change the colour of this content box all you have to do is change the hex code of this content box:
.contentbox { background-color: #f3f3f3; [edit this to the colour you want] padding: 20px; }
You can also add a border to this content box if you like, but I wanted to keep things simple so that anyone can follow through this tutorial.
I'm a full-time graphic designer, which means that even in blogging I'm very particular about how I want things to look. I enjoy creating a visual identity for blogs, businesses and brands.
Last year, when I decided to start this blog I wanted to help new bloggers build their online presence, I wanted to offer affordable design services that don't burn a hole in my client's pocket.
After a lot of consideration, weighing the pros and cons I decided that my blog would be hosted on the blogger platform.
It's been quite some time that I've been seeing click to tweet boxes on a lot of blogs powered by self-hosted WordPress. I really love twitter, it's a fun and simple way of keeping up with all the things I love and so I quickly became interested in having a click to tweet box for my blog.
I searched and searched on Google but most of the results were for WordPress users. There was nothing for those on blogger!
I then turned to Facebook groups for help and was met with very off-topic replies, instead of offering me a solution people seemed more interested in convincing me that on blogger I don't own my content, that blogger is not at all customisable and that I can't monetise a blogger blog, all of which I know is not true.
And so I decided to make my own click to tweet box using HTML and CSS. I know there aren't a lot of plugins on Blogger, not many widgets either but that's because most of the things can be accomplished through coding.
Here's how you too can style your own click to tweet box for your blogger blog. I'm giving you a step-by-step detailed guide.
Note: Always back-up your blog's template before you start to make any further changes to it.
How your click to tweet box will look
Using the instructions given below, this is what your box will look like. Don't worry, the colours and fonts can be matched to your branding. And I'll tell you how.
Installing the CSS
Sign in to your blogger account and you'll be able to see your blog's dashboard. Now you want to click on "theme".
After clicking on the theme, you should be able to see a "Live on Blog" come up. Here you want to the "Edit HTML" button.
This will take you to the code section of your blog. Now click anywhere in the code section of your blog and then press Command + F (for Mac) or CTRL + F (for PC) and a search box will pop up at the top right corner of the code section in your blogger blog.
Now you need to type the following lines in this search box:
]]></b:skin>And then hit enter. This will bring up a highlighted text which says the same in your blog's code. Just above this code, paste the following code:
/* Click to tweet box CSS by http://www.zoyaanddesigns.com */ .ctt { background-color: #f3f3f3; padding: 25px; color: black; } .ctt a { color: black; font-size: 16px; } .ctt a.ctt-button { display: block; width: 107; float: right; background-color: black; color: white; padding: 5px; position: relative; right: -26px; top: 16px; text-transform: uppercase; text-align: center; font-family: "Monsterrat", sans-serif; } /* Click to tweet box CSS by http://www.zoyaanddesigns.com */And save your theme. You have successfully installed your CSS all that's left now is to use the HTML code to go along with it.
Using HTML to go with the CSS you just installed
<div class="ctt"> <a href="YOUR URL GOES HERE" target="_blank">YOUR TEXT GOES HERE</a> <a class="ctt-button" href="SAME URL GOES HERE" target="_blank"> CLICK TO TWEET</a></div> Now copy this HTML and save it somewhere, I use Evernote (referral link) to save all my documents, you can use whatever suits you best.
Now you should go over to click to tweet and design your tweet, copy the link and paste the link where it says "YOUR URL GOES HERE" and the same link again at "SAME URL GOES HERE".
Put whatever text you like in the "YOUR TEXT GOES HERE" section.
After you're done putting in the URL and the text you should put the code that you have customised with your click to tweet link and your custom text in the HTML section of your blog post.
You can use it as often as you like, not only will it provide a break from all the text to your readers I'm sure it'll help you get a good amount of twitter engagement as well.
Features of this click to tweet box
- This box is responsive, it will automatically adjust to your blog's responsive coding.
- Fonts and colours can be adjusted.
- While a credit is appreciated it is not required (just don't remove the credits in the CSS code)
Customising this click to tweet box to match your blog's branding
I have kept the colours neutral so that they match almost any branding, but I understand that sometimes you just need things customised to suit your needs.
Here's how to edit the colours and fonts to suit your blog's needs:
Here's how to edit the colours and fonts to suit your blog's needs:
/* Click to tweet box CSS by http://www.zoyaanddesigns.com */ .ctt { background-color: #f3f3f3; [edit this to change the background colour of your click to tweet box] padding: 25px; color: black; [edit this to change the colour of the font in your box] } .ctt a { color: black; font-size: 16px; } .ctt a.ctt-button { display: block; width: 107; float: right; background-color: black; [edit this to change the background colour of the click to tweet button] color: white; [edit this to change the background colour of the font in your click to tweet box's button] padding: 5px; position: relative; right: -26px; top: 16px; text-transform: uppercase; text-align: center; font-family: "Monsterrat", sans-serif; [edit this to change the font of your click to tweet button] } /* Click to tweet box CSS by http://www.zoyaanddesigns.com */If you feel that all of this is just too much work and you don't have the time or energy to be able to do this yourself, you can hire me to do it for you.
The only requirement is that your blog must be hosted on blogger platform. In case your blog is on the WordPress platform please get in touch with me first so that I can see whether or not this is possible for your blog.
The only requirement is that your blog must be hosted on blogger platform. In case your blog is on the WordPress platform please get in touch with me first so that I can see whether or not this is possible for your blog.
Hope you liked this tutorial, in case you run into a problem while installing this click to tweet box yourself then let me know through the comments section and I'll get back to you as soon as possible!
If you decide to purchase this service then you get lifetime support on it. No matter the problem, I'll look into it for you and help you fix it, including customisations to match your blog's branding.
Note: this service is only available for blogger blogs if you want something similar for your blog that is not hosted on blogger please get in touch with me first to see if this will work for you.
Subscribe to:
Posts (Atom)
Social Icons