How to neatly Display HTML Code in blogger posts

How to neatly Display HTML Code in blogger posts

If you’re a blogspot platform blogger and want to show HTML source codes in your blog posts then you must had a hard time how to make it done. You can see below that I’ve created special boxes for those HTML codes and the code remains intact inside the post. It’s a nice trick for blogger platform if you’re willing to post tutorials and badges for your readers.

see example below

<div style="text-align: left;">
Post in brief, may include pictures too
<span class="fullpost">Hidden part</span>
</div> 

For this you have to take two simple steps,

SEE FULL TUTORIAL



Step 1

You have to add a special code inside your blogger template. Go to your blogger Dashboard > Layout > Edit HTML. Now hit CTRL+F on your keyboard and search this tag,

]]></b:skin>

Immediately above, add the following code

pre { background:#efefef; border:1px solid #A6B0BF; font-size:120%; line-height:100%; overflow:auto; padding:10px; color:#000000 } pre:hover { border:1px solid #efefef; } code { font-size:120%; text-align:left; margin:0;padding:0; color: #000000;} .clear { clear:both; overflow:hidden; }

After you done it, click the “Preview” button to see if your blog shows or not. If everything’s okay, then click, “Save template“

Step 2

Now each time you create a post and you need to add some HTML codes inside your post, you have to convert it into escapable characters. For this go to this tool called Quick escape and insert your code. Click, “Convert to escaped character” the converted code will be different than the original.

Now create a new blog post and add the converted code. You have to enclosed the code with a “pre” tag(marked as blue) For this I’ve added the same code twice. One normally and the other one with the hack.

Publish your post and see the magic!


visit my site for more adventure Social network, Gaming network, Free Internet TV and Live Sport Streams,more Tutotrials, News and Entertainment blog. visit here - http://9jatown.com