RealcomBiz
Pin It

How To Add Line Border To Blogger Blog Post

Adding line border to your post really helps in getting readers attention, most readers don't want to go along way in reading your articles, they are concern with the tips in your article, which you need a line border to highlight the portion out. border can be added to a single line or to your whole article.


Lets get started :

1. Login to your blogger dashboard

2. Click on "New Post"

3. In the post editor click  Edit HTML

4. Copy and paste the code in the box below, in where you want your line border to appear.


Use the code below for Solid border line.


<div style="border-style: solid;">
<span style="color: black; display: inline ! important; float: none; font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
Thanks for visiting Realcombiz.com
<span class="Apple-converted-space">&nbsp;</span></span></div>

 


Use the code below for Double border line.


<div style="border-style: double; border-width: 3px">
    Thanks for visiting Realcombiz.com</div>


Use the code below for Dotted border line.


<div style="border-style: dotted">
    <span style="color: rgb(0, 0, 0); font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; display: inline !important; float: none; ">
    Thanks for visiting Realcombiz.com.<span class="Apple-converted-space">&nbsp;</span></span></div>


Use the code below for Inset border line.


<div style="border-style: inset; border-width: 3px">
    Thanks for visiting Realcombiz.com</div>


Use the code below for Outset border line.


<div style="border-style: outset; border-width: 3px">
    Thanks for visiting Realcombiz.com</div>


Use the code below for Ridge border line.


<div style="border-style: ridge">
    Thanks for visiting Realcombiz.com</div>


Use the code below for Groove border line.


<div style="border-style: groove">
    Thanks for visiting Realcombiz.com</div>


Use the code below for Dashed border line.


<div style="border-style: dashed">
    Thanks for visiting Realcombiz.com</div>

Hope you enjoy this article, if you have something to say of ask, please use the comment box and don't forget to share this article.

In my future post i will be giving out a lot of tricks/tips on how to give your post a great look. so subscribe now for you not to miss any of this.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

2 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. please help me i want to get the border line around the blog just how you have not blog post border line please help me !

    Thank you

    ReplyDelete
    Replies
    1. If you want to wrap your blog whole body with border, then search for the following line
      .content-outer {
      SOME CODE WILL BE HERE
      }
      Now add border: 1px solid #000000; under you content-outer tag as follow;

      .content-outer {
      border: 1px solid #000000;
      SOME CODE WILL BE HERE
      }

      you can change solid to your prefered border style e.g dotted, double, inset, outset e.t.c.
      #000000 represent border color, you can change it to your own suitable color.

      Delete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger