How to display scripts and codes in blogger posts

If you are having a blog which provides various codes and scripts to your visitors, then this tutorial is much needed for you.Today i am going to show you how to show/display codes or scripts in your blogger blog.

If you are having a blog that provides let's say Blogger widgets,templates,wordpress gadget codes or any other codes, then follow the steps given below.

Normally you have seen many blogs using syntax highlighter in order to display HTML/Javscript or CSS codes.There are some advantages and disadvantages with syntax highlighter.Let's discuss the advantages first.Syantax highlighter offers many pro features like one click copy and print,One click code encoder and more.The more the features, the more complicated it will be and may take more time to load.

When you add it in your blog, it reduces your overall blog speed or can even corrupt/mess your blog HTML.This is not good for your blog in SEO point of view.Every blog owners try to make their blog faster,but only few may succeed.Reducing the number of codes used can increase the loading speed of your blog.So its better to use minimal code.The code highlighter which iam going to provide here has many nice features.

The code highlighter uses minimum resources, there by increasing the loading time of your blog.It also even loads fastly.More over this highlighter is fully SEO optimized, so ther is no need to worry about seo.Its also attractive i design.Follow the steps given below carefully to add it in your blog. 

• Go to Blogger Dashboard >>> Template >>> Edit HTML >>> Proceed

 

• Tick the box " Expand widget templates "

 

• Search for the code " ]]></b:skin> " in your HTML  

 

• Add the below code above " ]]></b:skin> "

.codeview { margin : 15px 15px 15px 35px; padding : 10px; clear : both; font-family : "Courier New", "MS Sans Serif", sans-serif, serif; line-height:1.6; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFobb6fE6Nda_t9REacGTYcroIg2LEFvz5cFicdshmO1pstS4cFOPJVGRKGPOFkyXtrSMxeJBsfy8T8l_37JBgQtkqPrfkIb1dJOjpemVh7jbhsaLP33b-y7wLNDmyPKlPmWIa5RQD1uuz/') no-repeat scroll bottom right #EFFBF5; border-top : 1px solid #eeeeee; border-right : 2px solid #cccccc; border-bottom : 2px solid #cccccc; border-left : 1px solid #eeeeee; } .codeview li { line-height : 24px; color : #333333; margin : 0; padding : 0; }

• Save your template

• Now to show/display a code in your blogger post, you have to encode it first

• You can use out HTML ENCODER for this  

• Now add the following piece of code in your post's HTML