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.
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.
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 < for < and use > for > .
See the Complete HTML Escape Characters list from W3Schools,
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.
![]() |
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 < for < and use > 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' <. Also do the same for > with >
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
</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