How To Add Javascript/HTML Code Box Tool In Blog post

Most bloggers whose work mainly involving developing widget using code will always need some special tool to share them out with other. That's why today I will sharing with a simple trick on how to add Javascript/HTML code box into your blog post. This tool is essential in organizing you content and displaying different sections designed for specific purposes

Okay below is how you can go about adding this code box too in your post.

Step 1. As always you will need to sign into your blogger account>>>>then go to Dashboard and then to the template/theme section.

If you ain't a pro, you can easily go to customize then from the new window  select Advanced and click on Add CSS.

For pros or those who need heavy tactics, you will need to go to Edit HTML and then use CTRL+F to find "]]></b:skin>".

Step 2. Copy and Paste the below codes in the CSS section or just above "]]></b:skin>" and apply to the blog or save your template.

.code { overflow:auto;width:503px;height:200px; font-family: "Consolas", "Courier New", Courier, mono, serif; color:#848176; margin : 15px 35px 15px 15px; padding : 10px 10px 10px 35px; clear : both; list-style-type : none; background : #000000 ; border : 1px solid #000000; border-left:20px solid #ccc; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px } .code:hover{ color:#FEF9BF; border : 1px solid #000; border-left:20px solid #ccc; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 10px 10px 5px #888888; }

Step 3. You will need to go back to post page and on HTML tab view add the code below:

<div class="code">
Your Codes
</div>

Change your codes with whatever code you have and you are done to save your work. publish int to see the result...

Comment below if you got any trouble.

Share: