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 :
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
.png)
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!
ReplyDeleteGlad I helped! hehe... at first i also call it dot dot, rupanya dashed. hehe <3
DeleteHehe! :)
Delete;)
DeleteThanks Sab! This is amazing!
ReplyDeletewelcome babe! ;)
DeleteIt helps!!! Thank you my lifesaver!!! <3
ReplyDeleteyeay! <3
DeleteOMG thanks a lot! you're so pro in blog designing lah <3
ReplyDeleteim still learning! hehe.. will help out whenever i can! im happy to help u guys out! <3
DeleteTHanks babe!
ReplyDeletemost welcome! ^_^
DeleteThanks for the tutorial! Very direct! xoxox
ReplyDeletewelcome angeline!
DeleteTHANKKK YOU SO MUCH SABRINA! <3 mwaah!
ReplyDeletewelcome! mwaah! <3
DeleteSo 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 :)
ReplyDeletehehe.. easy right? im not sure if wordpress can use this, but i hope it helps you! <3
Delete@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!
Delete@sabrina, thanks for sharing :-)
hehe thanks for the info for the word press! an d you are most welcome! ^_^
DeleteIt really works. I am using it in my blog from now on. Much appreciated. Thank you.
ReplyDeleteyeaaahh! glad i helped! ;) welcome!
DeleteThanks for the tutorial babe <3 :D
ReplyDeletewelcome chency! <3
Deleteawesome tutorial sab! been wanting to ask you but never got around to...so THANKS !! xx
ReplyDeletewelcome Dina! ^_^
Deletethank you for this :) always wondering how you always do this box hehe.
ReplyDeletewelcome dear! <3
DeleteTerima Kasih diatas jasa Anda membantu saya mencantikkan blog kejayaanmuda saya.
ReplyDeletesama2.. ^_^
DeleteYou saved me! Browse through alot of tutorial but it never works! But yours it works. Thanks xx
ReplyDeleteYEAH! Hehe glad I helped! ^_^
DeleteSab, the best!! as always!..hehe..
ReplyDeletealololo thank you dear! <3 ^_^
Deletehi, may I know how to design the badge on the left corner of ur blog? :)
ReplyDeleteHi 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