search


Affiliate Links Notice

This website uses affiliate links as a means of generating revenue.

However, we do not recommend products and services that we believe will not be of interest to you.

We make it a point to recommend products and services that we like, and express our honest opinions about them regardless of an affiliate relationship with the products, goods, and services being recommended.

Zoya And Designs is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com, Inc or its affiliates.

To know more about the use of affiliate links on this website please read our terms and conditions.


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: 


]]></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.

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.





share

No comments:

Post a Comment

Please consider clicking "Notify Me" checkbox so that you may be notified about the replies that have been left on your comment.

follow