Ratz File : 06/09/fdn – Code Snippet for Banners

Great. Well, I’m a bit behind in terms of technology but I have always believed that the underlying logic and principles of it…… in the past few days, I have been trying out my hand on animated banners, or should I say, animated gif files. That was not the hard part. The hard part came when I wanted to display the code on Wordpress. Surprised? Yes, Pretty In White’s website is using Wordpress. So I wanted to display the code for people to copy and paste, linking the banners, from Pretty In White’s website…… oh my, that’s when the headache started.

Ok, so I thought it would be as easy as a cut and paste operation. I normally do most of the content on Wordpress, HTML view and not in VISUAL view, so when I copy and pasted the link in HTML, the above Banner Appeared. Yay! But wait how do I display the code snippet for people to copy and paste? Oh err …

A short read read at The Wordpress Official website told me to use the [sourcecode] c0de [/sourcecode]. Didn’t work for me. Tried numerous plug-ins … some worked, but the code just went out of alignment breaking the template …. I needed to craft more CSS … not something I wanted. What I really wanted was something simple and easy and so here are my findings from my experimentation;

• Copy any code that you want to display in your page or post. Please take note that I will assume you are in HTML MODE of Wordpress.

Start Out By Copying any HTML code

• Add a new page or post and change your view to VISUAL MODE. Here, paste your code. If you do a PREVIEW of our page, you will see the following;

Now Change To VISUAL MODE

If you do a PREVIEW, you should see your code. Not The BANNER!

• Now switch back to HTML MODE. You will now see that your original code has changed. What has happened is that when pasting in HTML MODE, Wordpress changed your code characters into alternate characters that will give your viewers the ability to see your code on your page or post when you publish.

Look - Some changes to your code! No more < and >!

• Lastly, you will need to replace all the Quote Marks [ " ] with &#34. So now you need to replace all the [ " ] with &#34 …. and that’s it! If you don’t do that, when someone copies it, your code won’t work!
• You can see the final results at http://www.prettyinwhite.com.my/contact/link-exchange.html

If you have a more complicated code you want to change, here is a good source; http://lorelle.wordpress.com/2007/02/04/wordpresscom-blog-bling-signatures-and-writing-code/