How to make box in blog post

36 comments
Salam & hello everyone!

Phew, now I got some time for my own for some more personal blog post that does not related to any brands of shopping. 1'm saving your wallet for this time at the moment. Hehe. So, I will try my best to give some tips and trick in blogging. Well, I am not that professional, but maybe this little stuff that you can learn will help you in blogging! Blogging is fun, don't get you stress out okay.

Alright, today I am going to share with you how to make a box in blog post. If you are familiar with "Blockquote" this is something similar. But! I have use Blockquote for a while and it gives a lot of problem but its automaticly appears if you click.This is more of a manual coding,  So this manual coding probably will help you make it easier.

So what is the purpose of this box? To me, it looks neat in the blog post especially when you are giving out important information in your blog for example if you are reviewing stuff, and you wanna highlight the info of the product like name and price like below :

cara buat kotak dalam blog post

So here's how :
In you blog post mode (during you are posting your blog post)
Click the HTML button on the left side of you blog and you will see a lot of coding that only aliens can speak. So just copy all code below and paste in your blog post html section.

<div style="background: #F2E0F7 repeat; repeat; padding: 10px; border:2px dashed #F5A9D0; border-top-left-radius: 0px 0px; border-top-right-radius: 0px 0px; border-bottom-left-radius: 0px 0px; border-bottom-right-radius: 0px 0px;"><center></center>

WRITE YOUR STUFF HERE

</div>

Change :
RED : Refer code color here (click me) Change what color you want for the background

BLUE : Change the size of the border, example 3px/4px.... (Higher the number ticker the border)

GREEN : Change the border style name to one of these of your preference



ORANGE : Refer code color here (click me) Change what color you want for the border

BLACK : Optional, but if you want a rounded type of edge, change the number of the px. If you don't want, just leave it all to 0px.

PINK : Here is where you put all of your info stuff. I advise you to paste the box first and edit the content later in Compose mode. Easier.
So hope I helped! Drop any question below at the comment section and I will try to help as I can. :)
Hugs and kisses
Sabrina

SHARE:
Next PostNewer Post Previous PostOlder Post Home

36 comments

  1. I was about to ask you about this and you already posted on how to do the 'dot dot' thing. I don't know what to call that so I just call it 'dot dot'. Like seriously, thank you so much on the tutorial! I'm so going to apply this on my product review. Hehe!

    ReplyDelete
  2. Thanks Sab! This is amazing!

    ReplyDelete
  3. It helps!!! Thank you my lifesaver!!! <3

    ReplyDelete
  4. OMG thanks a lot! you're so pro in blog designing lah <3

    ReplyDelete
    Replies
    1. im still learning! hehe.. will help out whenever i can! im happy to help u guys out! <3

      Delete
  5. Thanks for the tutorial! Very direct! xoxox

    ReplyDelete
  6. So that's how people do it! Hahahahah I've always been wondering on how. However I'm currently blogging on Wordpress.com and it's restricting on so many levels....but good tips tho :)

    ReplyDelete
    Replies
    1. hehe.. easy right? im not sure if wordpress can use this, but i hope it helps you! <3

      Delete
    2. @alyssajaren, I does work on Wordpress :-) While you're drafting a post, click on "text" - top right of the draft body and copy + paste the html code. Easy peasy!

      @sabrina, thanks for sharing :-)

      Delete
    3. hehe thanks for the info for the word press! an d you are most welcome! ^_^

      Delete
  7. It really works. I am using it in my blog from now on. Much appreciated. Thank you.

    ReplyDelete
  8. Thanks for the tutorial babe <3 :D

    ReplyDelete
  9. awesome tutorial sab! been wanting to ask you but never got around to...so THANKS !! xx

    ReplyDelete
  10. thank you for this :) always wondering how you always do this box hehe.

    ReplyDelete
  11. Terima Kasih diatas jasa Anda membantu saya mencantikkan blog kejayaanmuda saya.

    ReplyDelete
  12. You saved me! Browse through alot of tutorial but it never works! But yours it works. Thanks xx

    ReplyDelete
  13. Sab, the best!! as always!..hehe..

    ReplyDelete
  14. hi, may I know how to design the badge on the left corner of ur blog? :)

    ReplyDelete
    Replies
    1. Hi dear, it is just a basic image i paste inside HTML gadget. I use a transparent image for my header so it looks like i dont have a header. ;)

      Delete

CUSTOM BLOGGER TEMPLATES BY pipdig