How To Draw Attention To Specific Areas In Your Blog Post And Make Them Stand Out


draw attentions to areas in your blog post using html and css

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.

make your blog posts stand out

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

content box for blogger blog using html and css

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

click theme in blogger dashboard

Sign in to your blogger account, click the "Theme" button, this will take you to the "Live on Blog" section on your blog.

click edit html

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: 


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.

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.

How To Style Your Own Click To Tweet Button For Your Blogger Blog


click to tweet box for your blogger blog

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.

My Favourite Photo Editing and Design App

© Zoya And Designs. Design by FCD. Customised with ♥︎ by Zoya And Designs.