Add Html Box to blogger?

ideal4tech
here is example


Here you will learn how to add HTML Box code in your blogger post.This is one of the simple methods. Here you will learn how to add a stylish box code for your blogger

If you need any instructions following you can watch my YouTube video as well as.
follow my steps

Quick Navigation

Method 1
Method 2

Method 1:


  • Login to Blogger Dashboard
  • Then click on Theme > Now Click >Edit HTML
  • Click anywhere on the code area and press Ctrl + F. Search box will open.
  • Now write or paste " ]]><b/:skin> " on the search box and hit the enter button on your keyboard.
  • Just above the " ]]><b/:skin> " past the below-given code. 

Here are two types of codes.You have to paste one of them.If you paste both the code you will get an error in your website and it will not work.

Code 1 (with scroll)

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }

Code 2 (without scroll)

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }

Save your template and go back to blogger dashboard.

Now you have to paste following code to show specific code of your website in box.

<div class="code">
Type your code here
</div>
ideal4tech
it looks like this


Method 2


  • Login to Blogger Dashboard
  • Click  on Theme > Now Click > Customize
  • Find Advanced option on the top left of the screen and hit that button
  • Then click Add CSS
  • Past one of the above-given codes and click the Apply To Blog button.
  • Now you are done.

ideal4tech
Now you have to paste following code to show specific code of your website in box.

<div class="code">
Type your code here
</div>