Thursday, August 30, 2018

By this useful tutorial, I guide you that how to display HTML code in Blogger Blog Post or website. Now for better SEO tips and Tricks for blogger, you like this article like other tutorials. If you want to make your blogger post more beautiful with adding of stylish text box and add html code it will be looking nice. There is no doubt  it  is very tricky to add  show html code in blogger post page.  Demonstrating code in wonderful boxes without exasperating the design/indenting was simple however dubious. You have to know and well aware that it is not easy way to show html code in blogger post. Likewise to keep up consistency among this crates, is another issue.
How Display HTML Code in Blogger Post to use Stylish Text Box
 So here is the thing that I did and I have solved the issue. As blogger wont take html code as it seems to be, which means you should change over it into got away code. For that get the code you have to any word processor.  There is another simple method to do it, first go to and Search website parse html code and add it. Presently how to include html code properly and with easy ways.  There are a considerable measure of approaches to do it. I will demonstrate to you the one that I utilized. First you will make a CSS code  in blogger html area. Utilize this for basics of Blogger layout. 
You can change the foundation/outskirt hues stature and so forth to coordinate your needs. Now I guide you step by step that how to show HTML code in blogger post withi beautiful stylish box. Some Blogger templates creating problems to add the code so, first parse the code to use this  website  link it is nice website to  parse html code for blogger post.

How to Add CSS Code in Blogger Template

First login to your Blogger Blog with your email address and click on theme and then click on Edit HTML, and further add the following code above of ]]></b:skin> in CSS area of blogger blog.

code 
{color: #000099; 
font: 108% "Arial",Arial,mono;padding: 0 2px;
white-space: nowrap; }
pre code {-moz-box-shadow: 0 0 10px #DDDDDD;
background: url("https://2.bp.blogspot.com/-ZOwC6kfLvUo/W4LEIFAizqI/AAAAAAAASdg/bPRO7EOFgJgRYQ8OJdF0xhWMEGELKNEjwCLcBGAs/s1600/background.png") repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
clear: both;
color: #ffffff;
display: block;
font-size: 14px;
line-height: 15px;
margin: 10px auto 10px 30px;
overflow: auto;
padding: 15px;
white-space: pre;
width: 95% !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;
}

How to Add HTML Code in Blogger Post

Now go to your blogger post and add the following code  in post HTML area and then compose it, and it will be looking nice and also supported for all browsers and working fast. This text box is beautiful looking with nice shadow.

<pre><code>
Add Code here
</pre></code>
 
Finally if you want to add Scrollbar to textbox area and if you want to save some place in blogger post with changing of  height of textarea box use the following code.

<div style="height:200px; overflow: auto; padding: 0px; width: 712px;">
<pre><code>
Code Here
</pre></code>
<div>
For the above code how to add  scrollbar in textarea box see Demo Here

I hope you like this article like other tutorials. Please leave your comments.

Post a Comment:

Contact Form

Name

Email *

Message *

Home     About Us     Contact Us     Privacy Policy     Disclaimer     Sitemap    

                                  Copyright ©2014-2018. Media Music Mania - All Rights Reserved.