How to Make Script Boxes in Blog Posts

Blogboosters.net - Embedding boxes in blog posts look attractive and beautiful. Many bloggers use boxes in posts to put important information, one of which is HTML, Java scripts and so on.

But the box embedded in this post is not provided by blogspot, so we are required to make it ourselves. It's easy, follow the steps below.

• Login to blogger and choose 'New Entry'
• Make writing, examples like pictures. Look at the red ones, the writing position is 'Compose'.

• After that, copy paste this script, and return to your post on blogger.

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;text-align: left;">.blogboosters (replace this type).</div>

• Then select 'HTML' (for details see picture)

• Paste the script that was copied below the post (it's up to want to put it where).
• Return to activate 'Compose' and see the results. Tradaaa ... there is already a box.

• Then the rest of you change the writing '. Blogboosters (replace this article). 'with the writing you want to place there, it can be in the form of a script or other writing. It's easy, right...!

It's easy, but maybe you don't agree with the example box above. You can change it as you like. Following is the script explanation.

<div style="border:3px #1780dd Double; padding: 10px;background-color:#ffffff;text-align: left;"> .blogboosters (replace this type). </div>

• border: 3px = thickness of the script box. and # 1780dd = script box color.
• Double: box shape. (this code can be replaced with the following code or can also be removed).

.blogboosters (replace this type).

• padding: 10px = length of the box down, for the width automatically to the end of the post.
• background-color: ffffff; = color in the box.
• And text-align: left; = position of writing in the box on the left 

Now that's the explanation of the HTML code to form the script box in the post. Please modify it according to your taste. It's not difficult, isn't it? In the next post we will create a box by a scroll in the post, so ... stay cool.

For this blog, the above script is modified like the following box.

<div style="background-color: #f3f3f3; padding: 10px; text-align: left;"> .blogboosters (script box on this blog) </div>

For those of you who have questions, don't hesitate, leave your comments. Hopefully beneficial. :)

• Facebook
• Tweeter
• Google+
• Pinterest

You Might Also Like

Tips and Tricks

« PREV

NEXT »