If you are a blogspot platform blogger and want to display HTML source codes for your blog posts then you will have to had a troublesome time how to make it performed take a look at below. you'll be able to see that i have created unique boxes for the ones HTML codes and the code is still intact within the post it is a great trick for blogger platform if you are willing to post tutorials and badges for your readers.
Step 1
You have to add a special code inside your blogger template. Go to your blogger Dashboard > Layout > Edit HTML. Now hit CTRL+D on your keyboard and search this tag,
]]>
Now you have to add this code above that 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;
}
Now it will look something like this,
After you done it, click the “Preview” button to see if your blog shows or not. If everything’s okay, then click, “Save template“
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! The normal code showed up with the effect but the hacked on remained intact inside the table.
Tags: blogger,blogspot,tutorials,how to,1px solid,overflow,padding,html codes, edit html,widgets,dashboard,paste,tutorial,blogging,seo,blogger templates, free blogger templates,widget,facebook,gadget,wordpress,sidebar,google,download,
For Further Reading,
0 comments:
Post a Comment
Leave your comments here