• Admin
  • Never miss an Update

    LATEST POSTS

    Find a domain starting at $0.48

    powered by Namecheap

    .

    Saturday, August 4, 2018

    Hello lovely! How are you today? This article is about how to add CSS code to  style links in your blog post.

    How to style links in your blog post

    Some months ago I sponsored an article on a friend's blog which require people to click so that they can download an eBook on my blog

    But when I checked the article, I saw that the download link had the same color with the rest of the articles' text. That alone was enough for the post not serve its purpose.

    Why was that? The reason was probably because either that's the template default link settings or he didn't understand how to go about it.

    In this short tutorial am going to show you how you can style links in your blog post by embedding CSS codes in your blog customization settings in WordPress and blogspot blogs. Don't worry, it is simple!

    What Is The Importance Of Link Color In A Post?

    As one of the SEO guides, it is advisable you have internal and external links inside your articles.

    How will your visitors know there is a link to read a particular post related to the current post without saying; "you can read more by clicking here?" the answer is, merely seeing a word or words with different colours, they know its a link to another post or website.

    Also when you have a download link, your visitors can easily see and click on to download. But when its just an ordinary text like the rest, they won't take note.

    Apart from these aforementioned importance, it also beautifies your blog post.

    Why do I Need To Add CSS Code?

    I observed that some blogger templates, especially the ones made by third parties do not have this function. For example, some free templates from gooyabitemplates. E.g the template used on Crownpaste. If you are using such templates, you can style it to your favorite color or even decorate the link text.

    How To Style External and Internal Links in a blog post and also make them open in new window

    With these css link styling codes, you can differentiate inbound and outbound links in your articles by choosing different colors for them if you want.

    Outbound links are links to other websites or blogs. These are usually included in your post when there is an article similar to yours or when you use an article from a website and giving the owner due credit. 

    What you must do about outbound links.

    On Blogspot: When you add the link, make sure you tick open in new window (target="_blank") and tick noffollow (rel="nofollow") [this is necesary for seo]. you can learn more about nofollow link here.

    See diagram below:


    NOTE: You can only do this with browser. Not with blogger app.

    On WordPress: When you add a link to a particular word, convert the post area to html format and add the target and nofollow values. Add at the end of the link.

    See example: <a href="https://multiloadedempire.com" target="_blank" rel="nofollow">SirPhren </a> This links with blank target opens in new window.

    NOTE: You can do these on WordPress app or on browser.

    How To Add The CSS Code To Style Links In Your Blogspot Template

    The cool thing is, you can add this code with your mobile phone or tablet. You don't need to be on desktop to add. Follow the steps below to add the css code to style links in your articles.


    1). Login to your dashboard. When you do, locate your theme/template. Then click on it.

    2). Click on customize as shown in the diagram above.


    3). Click on Advance. When you do, you will see another section which may include background colors. But in some templates, it shows only the CSS. Click on the CSS.


    4). Now in the space that shows in front, add any of the codes below. After adding, swipe to the left, you will see save changes at top-right-hand-corner. View the blog. If it works well, you can then return to the dashboard.


    How to Add CSS Codes To WordPress Theme

    1). Login to your WordPress admin dashboard and click on Appearance. From the options it will bring, select either Customize or Edit CSS as shown in the diagram.


    2). After selecting either of the options in the Appearance, you should see this. Click on Additional CSS.


    3). Upon clicking on Additional CSS, you will see this blank space to add your CSS codes. After adding the codes, click on publish to save your settings.


    Examples of code to style links in your blog posts


    1). For General link:

     a{
    color:blue;
    }

    2). Unvisited link:

     /* unvisited link */
    a:link {
    color:green;
    }

    3). Visited link:

     /* visited */
    a:visited {color: red;}

    4). Selected:

     /* selected */
    a:active{color: yellow;}

    NOTE: You can change the color name to suit your blog template or theme

    How To Decorate Link Text
    To decorate link texts in your blog posts, add the follow CSS code.

    a{
    text-decoration:underline;
    }

    TIP: You can replace underline with:  overline, linethrough

    Conclusion

    It's as simple as these. With these string of CSS you can style links in your blog posts and increase the chance of increasing your page views.

    Do this article helps? Let me know in the comment box.

    Happy blogging


    REMEMBER TO DROP YOUR COMMENT BELOW

    Hire SirPhren!

    Having issues? Need quick fix? simply email me or call me

    Learn more

    Write For Us

    Submit a guest post and see it get published real quick

    Learn more

    Advertise Here

    Place relevant banners, links, and sponsored posts at affordable rate.

    Learn more

    Get notified on FB