How To Show HTML/Javascript Codes In Blogger Posts

Friends,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
2.Go Blogger Dashboard and select   Edit Hml
2.Check Expand Widgets and find ]]>
3. Paste below code before ]]>
 
/*--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;
}
/*------ End Code View--------------*/
* 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 <br /> <pre><code> before code starts and </code></pre> after post ends. </div>
banner
Previous Post
Next Post

0 comments: