Add HTML, Java Script & CSS code boy on your blog or Website

Many bloggers especially newbies don't know how to add HTML/JavaScript to their blogger blog post. There are many ways to show this codes in your blog post. I m using Syntax Highlighter, because it looks more professional than others. But here I wanna show you how to show your HTML/JavaScript code in a stylish CSS box with both hover image changing and shadow effects. Lets see how to do it.



 Wanna see a demo CSS code box

You can see live demo of CSS coding box below. So what you have to do is just hover your mouse point on the below code box and see the demo online to get an idea of what we are going to make here.

.mbt-email{
background:urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyqaiYMZ_aLRI5lmHqDZaYPOP_f7rCj4JUueGu18nr9zp035VoSL_AZ-CBaVd-w0YuSXBvY3LRwTfVQ4iGaY-WbHvN-GPi8CfIW6jtfc5copP04k44m21lLttgTdEpW79vuwF8yDQgqtgd/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#0B0B61;
}

.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4px;
text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif; box-shadow:inset 4px 4px 3px rgbaundefined0,0,0,0.1);

}
.mbt-emailsubmit:hover{
background:#0084CE; box-shadow:inset 8px 8px 6px rgbaundefined0,0,0,0.1);
}
.textarea{background: #fff !important;box-shadow:inset 4px 4px 3px rgbaundefined0,0,0,0.1);
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #888; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px; }

</style>

<div class="mbt-email">
Get Free E-mail Updates
<form action="http://feedburner.google.com/fb/a/mailverify?uri=labstrike&loc=en_us" id="feedform" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=labstrike&loc=en_us', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if undefinedthis.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

 Add this CSS coding box to your blog/website

We have only two parts to create this CSS coding box for your blog/website. That's CSS part as well as HTML part. Lets begin with adding CSS code (ie, adding the skin of your CSS coding box).

• Go to Blogger Dashboard > Template
• Backup your Template before making any changes to your blog
• Click on Edit HTML
• Tick Expand Widget Templates
• Press Ctrl + F and search the code shown below ▼

]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

.code1 {
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 url(http://1.bp.blogspot.com/-nic37VqULoA/UDdTubWtwcI/AAAAAAAABbs/zv-i-PbnWHQ/s1600/labstrike-1.png) repeat-y top left;
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
}
.code1:hover{
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRSlOFb0UvoGWXblLBiHoz0ZhLV28DM6xJjvfjFmDkLMs6zaWRBqJbiuZUJ6Bb273Hq1tO8ga9TO_fl32Yu28HRTBKJqUXKse5BfhIEtFFk8kG8qAYQDgRsy6gWNAp4XueBNP4AMtQNxI/s1600/codeback-c4k.png) repeat-y top left;
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;
}

You can change the images from the above highlighted lines (line no: 9 and 15). But remember that your both image dimensions should be 535 x 219 in PX. Also you can adjust the dimension of this entire code box by customizing the dimensions from the above line number 2. But you should change the image dimensions according to your code box dimensions.

Save your template. Now we have successfully added the CSS (style) part in the template and lets see how to show it in your blogger blog posts.

 How to show it in blogger blog posts

You can add it into your blog posts easily. To do that you have to encode your HTML/Javascript code at first. So encode your code by using HTML Encoder Tool. Just follow below two simple steps to do this task. that's all!

• Switch your blog post from Compose to EDIT HTML while you writing post.
• Copy the below ode and paste it in your blog post where you wanna display this CSS code box.

<div class="code1"> Your Code Here </div>

NB: Replace Your Code Here with your pharased HTML/Javascript code. Now You're done!

You may also like -

1. Make Your Blogger Blog SEO More Easy

2. Show YouTube Activity Feed on Your Blogspot Blog

Hope you like this tutorial. If you have any doubt to clarify, feel free to ask via comments or contact form. Also please share this trick and wishing you a happy blogging:)