Content feed | Comments Feed

How to show HTML CSS Source Code in blogger(blogspot) blog posts

Posted by Zobayeda Gulshan Ara 24 April 2012

Yesterday, When I was write about "Change your Blogger Blog as Dofollow" I face a problem to show Html Css Source Code in my blogger blog post. I got the solution and Now I will show you how to add any source code(for instance Html Css or Javascript Source Code) into you blogger blog  post.

Put Html Css Source Code in my blogger blog post
Put Html Css Source Code in my blogger blog post

You May Want To Read Following

 

There are basically Two Steps, 
 1. Paste Some Code Into Blogger
 2. Convert your Html/ JavaScript Source code into (escapeable) Special Characters

 I know, This is not enough to understanding, so read the Explanation Now-

 1. Paste Some Code Into Blogger

1. log in your Blogger account.Go Dashboard. Then Click on Design and then Edit Html 
2. Click the check box to expand Widget.
3.Hit Ctrl+F to find the following code
 ]]></b:skin> 
4. Place the following 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: 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;
}


5. Now Click on Preview button. If you don't face  any error, Click on  Save Template Button. Now your blogspot blog is ready for Showing any Html Css or JavaScript source code.  

 2. Convert your Html/ JavaScript Source code into (escapeable) Special Characters


Now Every time When you want to place any source code in your blogger post you just need to make it readable for browser. For this reason, you need to convert the angular bracket and other special character. If there is a few angular bracket then you can convert it manually , just like that , use &lt;  for <   and use   &gt;  for > .
See the Complete HTML Escape Characters list from W3Schools,

That is a simple way to solve few anguler brackets problem. Another way is, just open your Notepad ,paste the source code and go to Edit then Replace and type <  in ‘Find what’ and type in  ‘Replace with' &lt;. Also  do the same for > with &gt;

Does it make you mad ? The easiest way to go any online and take any free service to get you code into escapble character.There have been  lots of, The best one is  Quick Escape  

So Use this tool and convert your source code . Now add the converted code into your blog post .But Add  <pre><code> before your source code and add
</pre></code> after your source code.


Though The post is so long, but don't think that is a tough job to show HTML CSS Source Code in your blogger(blogspot) blog posts. Just Read this post carefully and do exactly the same thing I mentioned above. If you have any problems doing that, leave a comment here, I will try to solve your problem.



0 Responses to How to show HTML CSS Source Code in blogger(blogspot) blog posts

Post a Comment

Blog Archive

Followers