How to Make Script Boxes in Blog Posts - 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. :)


    Popular posts from this blog

    How to check the Dead Link, Broken Link or the URL is off

    How to create a Script Anti Bomb Click for Blogger?

    How to Make a Navigation Menu on Footer Contempo, Soho, and Emporio Themes

    How to Permanently Delete an Instagram Account

    What is the difference between immature and mature?

    Link Building and Tier Backlink

    Medium vs Tumblr: Comparing the Popular Blogging Platform

    On page SEO Optimization on Blog, Complete

    SEO tips to get your website to the top of Google search

    HTML Color Code and How to Use it