Update Notice (4 Dec. 2014) - Hi, We have started updating non-working scripts,demos and widget generators and it is almost done still if you find any broken script,demo or W.G then you can report it here. Provided link will be fixed within 24 hours.Thanks and regards.

Thursday, 5 January 2012

How To Show HTML/Javascript Codes In Blogger Posts

If you are giving tutorial about adding HTML/JavaScript codes then you have to show your codes in proper ways that's why I am giving today's tutorial. The installation is so easy just follow my step to install.

Installation -
1. Log in to Blogger Dashboard > Design > Edit Hml
2. Check Expand Widgets and find ]]></b:skin>
3. Paste below code before ]]></b:skin>

/*--Code View--------------*/
code {
color: #000099;
font: 108% "Courier new",Courier,mono;
padding: 0 2px;
white-space: nowrap;
pre code {
-moz-box-shadow: 0 0 10px #DDDDDD;
background: url("http://2.bp.blogspot.com/-SEx0wApLIcI/TwVyjZ6VIRI/AAAAAAAAAO4/HNHKxURtzIU/s1600/btsnts_color_background.png") repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
clear: both;
color: #333333;
display: block;
font-size: 12px;
line-height: 15px;
margin: 10px auto 10px 30px;
overflow: auto;
padding: 15px;
white-space: pre;
width: 85% !important;
word-wrap: break-word;
code .comment {
color: #888;
code .class, code .rules {
color: #ff00ff;
font-size: 100%;
code .value, code .title, code .string {
color: #0000FF;
code .tag {
color: #000099;
code .keyword {
color: #000099;
.html .attribute {
color: #006600;

                                           Live Demo

* Important Tips -
1) If you want to show HTML/JavaScript codes in blogger posts then 1st 
Escape them.

2) Before adding codes in post you have to type <pre><code> before code starts 
and </pre></code> after post ends. 

2 Comments : Read Them Below Or Add One

  1. tried this on my test blog and all though the code i added appeared there was no box around it or coloured background to highlight the code...also there was no need to use the pre code tags before or after or Escape the code first.
    why isn't my code sitting inside the coloured box like yours does in the preview and on your site?

  2. <div class="doc">
    Bản đẹp(hơi chậm 1 chút :) )</h2>
    <div class="content">
    <iframe frameborder="1" height="480" scrolling="yes" src="http://commondatastorage.googleapis.com/itchio/html/22851/index.html" width="480"></iframe> </div>


If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box).PLEASE DO NOT SPAM