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'.
Make Script Boxes in Blog Posts

  • 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)

Copy Paste on HTML

  • 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.
make a box in the post

  • 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. :)

    Comments

    Popular posts from this blog

    7 Functions of VPS You Need to Know

    Google Algorithm 2018 and Change Your SEO Strategy

    5 Best Battle Royale Games (PUBG) on Smartphones

    Increase Blog Traffic By Setting Permalink

    How to Create SEO Friendly Blog Post Title

    HTML Color Code and How to Use it

    The Ideal Way to Get Ideas for Writing

    Creating Sub Domains from Custom Domain Blogspot

    Comparison of WordPress Advantages With Other Platforms

    How to Create Free Website with Weebly