Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Monday, November 15, 2010

Add Border in Blogger Posts

I have recently added border in all of my tutorial posts to isolate the different steps involved. This gives me the advantage of creating a sub-post-like content. Not only it improves the readability of my blog, it actually adds a little bit to the cosmetic aspect too.You might want to add borders in your posts (emphasize on 'in', as opposed to 'around') for various reasons. You can style it however you want, by giving it different colors, sizes, and styles. Here's an example of what you will achieve at the end of this tutorial.



I've added a border around this portion of my post to isolate this content from my other contents.





It does look good too, and it is extremely simply to add!



Step 1:

Create a new post. Head over to Edit HTML mode and paste the following lines:
<div style="border: 1px solid red; padding: 10px;">
Add your content here.
</div>

Step 2:

Go to Compose Mode and you will have your border there. Just add your content in it. Alternatively, you can compose your content first, then switch to Edit HTML mode and add the opening <div> and closing </div> tags above and below the content that you want to add the border to.

Border Cusomization:

There are three properties defined for the border and an extra property for padding in the example that I have used in this tutorial.
<div style="border: 1px solid red; padding: 10px;">

You can customize these properties to create a border that suits your need.

ColorIn the example above, I used 'red' as my border color. You can use other colors (eg: white, red, black) or you can even define a hex code if you want a specific color. For example:
<div style="border: 1px solid #ffffff; padding: 10px;">
This website allows you to generate hex code based on the color that you choose.
WidthI used 1px as my width for my border. You can use other values to adjust the size of your border.
StyleThe most commonly used style is 'Solid'. However, you can use other styles like: dotted, dashed, double, groove, ridge, inset and outset. For example:
<div style="border: 1px groove red; padding: 10px;">
PaddingIn my opinion, padding is necessary to prevent your contents from kissing the border line. Try changing the padding from 10px to 0 and see what happens.


Have fun!

67 comments:

  1. Thanks! Just added them to The V's pages =) ... so much better...

    ReplyDelete
  2. Quick question: Can I do something similar but only around a text instead of all the way across the main column?

    ReplyDelete
  3. Raindropsoup: Yes you can. Paste this example in your New Post (Edit HTML Mode) and see what happens:

    I want only the <span style="border: 1px solid red; padding: 2px;">important</span> word to be bordered.

    To add border in a sentence, use <span> instead of <div>, because <div> will introduce a new line.

    ReplyDelete
  4. like < div > DIVIDE to new line=)

    Got it, thanks so much!

    ReplyDelete
  5. Actually it defines a new division, or section. But Divide will do as well, it's the same idea. Have fun with these HTML codes..

    ReplyDelete
  6. Thank you!!! I find your post interesting and helps me to make my blog better!

    ReplyDelete
  7. Lala Marcus: Glad you liked it.

    ReplyDelete
  8. how to add background color inside the border?

    ReplyDelete
  9. SueHa: You can fill your border with background by using this code instead:

    <div style="border: 1px solid red; padding: 10px; background: white">

    If you want a specific color, use the color's hex code instead, like this:

    <div style="border: 1px solid red; padding: 10px; background: #ffffff">

    You can get hex codes for color from this website. Click here.

    ReplyDelete
  10. tq so much! ^__^
    but how to resize the border??

    ReplyDelete
  11. SueHa: You can resize your border by using this code instead:

    <div style="border: 1px solid red; height: 60px; padding: 10px; width: 130px;">

    Just adjust the width and height.

    ReplyDelete
  12. Thank you,I find your post interesting and helps me to make my blog better...

    ReplyDelete
  13. Torrent Download: I'm glad you find these posts helpful. And thanks for dropping a word, I appreciate that. Merry Christmas.

    ReplyDelete
  14. I just came across your webpage re blogger hints - it is great and of terrific value and has super clarity. Many thanks. Mary Dixon

    ReplyDelete
  15. @Mary: Thanks for the feedback Mary, appreciate it. Enjoy your stay here.

    Cheers and God bless.

    ReplyDelete
  16. Hi how did you add columns, like the one in "border customization"?
    tnx

    ReplyDelete
  17. @PCCFinder: No special tricks there - simple HTML table :)

    ReplyDelete
  18. I've been looking for this tip since forever. Thanks so much. But I am just wondering if its possible to have a border as well as a background color in it? Kind of like a highlight except it would look like a border.

    ReplyDelete
  19. @Sarah: Use this code instead:

    <div style="border: 1px solid red; padding: 10px; background: yellow;">
    Add your content here.
    </div>

    Cheers.

    ReplyDelete
  20. @Sarah: You're welcome. Hope that was what you were looking for :)

    ReplyDelete
  21. what if i want to make borders in between posts like in this blog http://www.spiceupyourblog.com and inside posts like this http://www.spiceupyourblog.com/2011/10/new-features-and-updates-for-blogger.html.
    Do reply and mail me your answer please...

    ReplyDelete
  22. @hMuhammad: It shouldn't be hard to do, but there isn't one generic way to do so. I'll have to have a look at your blog, before suggesting a working solution. Let me know your blog's address :) Cheers.

    ReplyDelete
  23. Sir YOGA...

    Please Help me again i have a problem with this. Is possible the flipcard view do in simple template??or can you help me how can i make my post like video,or movies like this??i always searching for this but i didn't know what should i called with this kind of post like flipcard but not totally flipping.I am very sure you know how to do like this one hehehe because you are genius in coding ^_^

    http://i48.tinypic.com/90x3x2.jpg

    ReplyDelete
    Replies
    1. Hi Reyes,

      Trying to emulate this in Simple template will take a lot of work. An easy way forward is to use one of the templates that come this way. Just google 'Blogger Gallery Template' and you'll stumble upon hundreds of results.

      Cheers!

      Delete
    2. Oh...ok...thank you for your help now i have an idea what should i search for that kind of post ^_^

      Thank you Yogaboy...

      Delete
  24. Hi sir Yoga,

    I Already have a template. But i have a problem with this template because the other widget doesn't work or it has no code in side the HTML when i upload it to my blog.
    Wonder if you can help me how to run or how to fix this two widget..
    The gadget didn't work is the "Box Office" and i think this is a Slide of featured post in the right side of Box office.
    or if this thing have a lot to do with... Can you tell me how to remove that border from the right side of box office?? because that is not a gadget..

    ReplyDelete
  25. Sir Yoga,

    I all ready know now the answer of my last question i found a article about that... hehehe
    but i have a new question again ^_^
    here at my blog:
    http://moviedeck.blogspot.com/

    How can i remove the image attribution who create the template??
    the powered by Blogger, i cant remove it because i think that is not a 'Attribution1' i cant find that in hmtl in template...

    ReplyDelete
    Replies
    1. Hi Reyes,

      If you're referring to the brown Footer at the bottom of the blog, use the following CSS to remove it:

      .credit{
      display: none !important;
      }

      Cheers!

      Delete
  26. Can the edges be rounded for this frame?

    ReplyDelete
    Replies
    1. Yes you can. Use this instead:

      <div style="border: 1px solid red; padding: 10px;-moz-border-radius: 10px !important; -webkit-border-radius: 10px !important; -goog-ms-border-radius: 10px !important; border-radius: 10px !important;">
      Add your content here.
      </div>

      Cheers :)

      Delete
    2. thanks man you are such a genius it worked perfectly with me..

      Delete
    3. hey buddy i want rounded corner in my post including the post title please help..

      Delete
    4. Try this amaz:

      .post-title.entry-title{
      border: 1px solid black;
      border-radius: 10px 10px 10px 10px !important;
      padding: 5px;
      }


      Cheers :)

      Delete
    5. when i apply this another rounded border appears surrounding post title but i want only one rounded border covering entire post from post title to post body one rounded border only.plz help

      Delete
    6. Hi Amaz,

      Try this then:

      .post-body div div, .post-body div{
      border: 0px !important;
      }
      .date-outer{
      border: 1px solid black;
      border-radius: 10px 10px 10px 10px !important;
      padding: 5px;
      margin-bottom: 15px;
      }

      Cheers :)

      Delete
  27. hy hm can you help me with the border position,

    is it possible to center the boarderd text, not the text in the boarder ?

    and autosize it

    i've a few lines in the border - one in the middle of the text is thelongest as example and the boarder should fit automatically


    would be happy if there are simple solutions :)

    ReplyDelete
    Replies
    1. Hi Vance,

      Sounds doable, but it'd be easier for me if I can have a look at one of your pages that has this bordered text so that I can come up with a solution that definitely works. Could you give me one of your links?

      As for your question regarding privacy policy, well, it's just a legal document to inform your reader about your website's procedures. I have it in this blog mainly because AdSense requires me to have one. You can find pre-made templates instead of starting one from scratch.

      Cheers :)

      Delete
    2. hy - ok but dont be scared of my simple noobish blog :D

      here the site i want to center the boarderd text - if poss.
      or the simple way - just auto fit the boarder to the longest text

      sitelink:
      http://vanceance.blogspot.co.at/2012/11/deckstats-in-blogger.html

      html from boarder (according to your post above):

      < div style="background: #F1FAFD; border: 2px solid black; padding: 10px;">
      //Lands

      22  Plains

      x other

      ...



      // Creatures

      1  Angel of Salvation

      1  Burrenton Bombardier

      ....



      // Other

      1  Abolish

      ....



      // Plainswalker

      1  Elspeth, Knight-Errant
      < /div>

      thx

      Delete
    3. did you got my last post ?
      wrote my blog and the html code

      greets mike

      Delete
    4. Change the very first line to the one below:

      <div style="background: none repeat scroll 0% 0% rgb(241, 250, 253); border: 2px solid black; padding: 10px; width: auto !important; display: inline-block !important;">

      Cheers :)

      Delete
  28. very nice :)
    thx a lot !!!




    maybe a little question i've at last

    where do you get your informations if you have to search for something like that

    i've tried to look up self html for the boarder thing but well... didnt realy work :)


    ReplyDelete
    Replies
    1. Most of these things are very specific, and I wouldn't bet on finding a solution online - unless if it an outcry that affects lots of users.. As for the code that I've suggested to you, I've cooked the code up myself.. Those were just some CSS attributes embedded within a div tag.. You could self-teach these things to yourself.. You might wanna start off with some basic CSS lessons.. There are plenty online.. Developers tools like Firebug could be helpful as well..

      All the best :)

      Delete
  29. ok thx again - now i've a few more tags to search for :)

    thx a lot for all your help ;)

    ReplyDelete
  30. Thanks so much !!! Can you please give me a different type of border codes ? i need a border curved squire with shadow !!

    ReplyDelete
    Replies
    1. Hi Santosh,

      The most commonly used border style is 'solid'. Other available styles are: dotted, dashed, double, groove, ridge, inset and outset.

      Check out the 'Border Customisation' part in the part above, particularly under the 'Style' sub-part.

      Cheers..

      Delete
  31. thank you usefuş information.great men.

    ReplyDelete
  32. thanks alot bro i found iwas searching border i like u

    ReplyDelete
  33. I've been using this code for a while now on my blog, but I just tried making a post and my border isn't showing up!! No matter what color or whatever I put it as, it just doesn't show up. All that shows up is "Add your content here." Is there a reason it's not working or is it just me??

    ReplyDelete
    Replies
    1. Hi Jessica,

      I could have a look. Do you have a link I could look at?

      Delete
  34. hi dear i add dashed lines on the border per i want space between every post but i dont know how can i give space to every post on blog with dashed border like this example http://www.shexists.com/ its not my web but i want add dash border around my all blog post but with space if you plzzzzzzzzzz help me regarding this then email me here plzz: 3yeshaa@gmail.com

    ReplyDelete
    Replies
    1. Hi Aisha,

      Every blog is different, and thus the way to do something differs from one blog to another - the reason why there isn't a universal solution for your question. Let's have a look at your blog. What's your blog's address?

      Delete
  35. Very usefull, thank you :)

    ReplyDelete
  36. Hi! Thanks for your tips! Is there a way to have a red border around the only post that shows in my home page, while all the other posts could have a different border color? I have added css in the HTML template that creates blue border around all the posts in my blog but I want to remove that from my home page' s post and turn it to red. Thank you in advance!

    ReplyDelete
    Replies
    1. Try this. Go to Dashboard - Template - Edit HTML - Find for </b:skin> - Paste the following directly below </b:skin> -

      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <style>
      .post {
      border-left: 5px inset red;
      border-top: 5px solid maroon;
      }
      </style>
      </b:if>

      Delete
  37. Hi Yoga,

    Just wanted to add a bit of advice. If you want to add style to the html template. It would be better if using < div class = ' this or that '> than using < div style = ' this or that ' > or < p style = ' this or that ' >.

    It is probably better done in order not to slow down page loading of a blog. For more details, please read on https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery at the Do not inline CSS attributes.

    Hope it helps.

    Warm regards,


    Dory Saputro.

    ReplyDelete
    Replies
    1. Hi Dory,

      It's hard to image one line of styling giving any effect on the page speed. The page you linked talks about avoiding duplication, and not about page speed. In any case, the primary reason I went with that in my post is because it takes one step away from the whole tutorial. People that visit my blog are not SEO enthusiasts. Most of them look for a quick solution for things, and they appreciate when things are short and concise.

      Thanks anyway :)

      Delete
  38. I was wondering if you could tell me how to exactly to remove the border! I cannot find that code to delete!

    ReplyDelete
    Replies
    1. Hi Jennifer,

      What's your blog's address, and where exactly can I find this border you're referring to?

      Delete
  39. Thanks, I applied to my blog www.innovativetutorials.blogspot.com

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.