Showing Codes In Blogger

Showing Codes In Blogger

Hello guys! Today I am going to share with you all an experience. When before some years ago it was too early for me to blog, I didn't know anything. I remember a incident that I tried to show some codes but i messed up with it.

It was a pretty shameful thing for me, but anyway I later on knew and today I am going to teach you the easiest way to show codes in blogger. In fact it is very easy to show codes as we just have to do some editing.

But first of all see a preview of what code really is;

The above picture is a preview of a code which I wrote in Adding Rss Button In Blogger. The basic thing to know while showing code is that the code should appear the very way we type it. Sometimes it happens that the code we want to show acts like a Html code of that page and that is what I meant by messing up.
In order to show the code we have to use <pre> tag. It is also a html tag. See an example below;
<pre><a href="http://YourBlogname.blogspot.com/atom.xml" title="Subscribe For Free"><pre>

The above code when displayed shows like this;
<a href="http://YourBlogname.blogspot.com/atom.xml" title="Subscribe For Free">

I am sure that you have already figured it out the way to show code. If not also than don't regret and follow below steps;

Right in your code by switching to Html mode.
Then close the whole code by <pre> at the beginning and </pre> at the end.

Advanced Way To Show Code;

As we are one of the good bloggers we need to become better than others. The above way to show code is the simplest one. So, we will show the code in a more advanced way. See the code below;

<a href="http://YourBlogname.blogspot.com/atom.xml" title="Subscribe For Free">
<img src="Rss icon URL" style="border:0"/>Subscribe to my feed</a>

The above code is closed inside a rectangle ya. It definitely looks good than the plain lined code. For it you need to use different attributes. See the code which gives the above output;

<pre style="background-color: #f4f4f4; border: 2px solid rgb(230, 230, 230); clear: both; line-height: 18.71875px; margin: 15px; overflow: auto; padding: 10px; width: 531px;"><pre style="line-height: normal;"><span style="font-family: Verdana, sans-serif;">&lt;a href="http://<span style="color: red;">YourBlogname</span>.blogspot.com/atom.xml" title="Subscribe For Free"&gt; &lt;img src="<span style="color: red;">Rss icon URL</span>" style="border:0"/&gt;Subscribe to my feed&lt;/a&gt;</span></pre>

Here in the above code the code highlighted by red colour are the codes which results in the uppermost code. Cutting of this will give the rectangle only. So, you will have to do the following things;