How to Add Raw HTML Code as Example, to Ning Discussions

Have you ever tried to add HTML code to one of these Discussion boxes, to show your members how to do something? And, you don't want your code to execute, but you want to show the raw code?
Well, you can do this, by using what we call 'escape' codes.

How It Works:
Your browser wants to interpret/execute HTML code as it sees it. And usually, this is exactly what you want. However, sometimes you would like to show others, how you made something work, or how you designed something, on a web page. To accomplish this, you need to insert what's called "Raw HTML Code". You will need to use 'escape' codes in place of the < and > brackets, or less than/greater than signs.

There are other ways to do this. But, I've found this to be the most reliable, in all browsers.

HTML is processed this way on all web pages, not just a Ning Discussion.

INSTRUCTIONS: If you want to show example raw code, use the following trick.

  • Copy/Paste all of your actual HTML code to a text editor or HTML editor.
  • Use the Find/Replace command, and replace all instances of < with the following (no space after &)
    & lt;
  • Then, Find/Replace all instances of > with the following (no space after &)
    & gt;
  • Copy/Paste all of your edited code, to your blog, web page, or Ning Discussion. SAVE your text, and you're done.

Now, you can show others your code, without the HTML being interpreted.

~Jen~

Tags: add raw html code, how to add html, how to write tutorials, html tags in blogs, raw html

Views: 315

Replies to This Discussion

Permalink Reply by Ashary on February 6, 2010 at 3:09pm
Thanks for the tip, Jen.
More power to TND!
Permalink Reply by JenSocial on February 6, 2010 at 3:13pm
OMGosh, LOL!!!!!!! I'm sitting here for about 2 seconds repeating TND, TND, what the heck is TND?! I'm slow today! My slow brain gave me a good laugh for sure. ;-)
Permalink Reply by JenSocial on May 10, 2010 at 11:14pm
Oh goodness, I did it again. I sat here looking at that TND, TND, TND...LMBO!!!!! Then, it hit me, about the same time I saw my comment back in February!
LOL!
Permalink Reply by Temple of Our Lady of the Moon on February 13, 2010 at 8:29am
Does that work for creating new pages as well as discussions on ning sites?
Permalink Reply by JenSocial on February 13, 2010 at 8:57pm
Lady of the Moon,
Yes. This should work anywhere you want to add HTML for demonstration purposes, like tutorials or instructions.
Best,
Jen
Permalink Reply by Temple of Our Lady of the Moon on February 13, 2010 at 9:01pm
I got it Jen thanks (just to test its capabilities I also used it on myspace but eh didnt work...LOL mainly coz if its javascript it wont work there....) I finally fixed one of my pages!
Permalink Reply by ninadetox.com on May 10, 2012 at 2:05pm

I am having issues with my website. Originally it worked fine but now its acting up. This is what i am having issues with see link here http://screencast.com/t/uZwW51t4fDTN  here is the code is there a way to fix this where it can stay in a straight line vs descending downwards <p style="text-align: center;"><span><a target="_blank" href="http://statigr.am/ninadetox"><img class="align-left" src="http://api.ning.com:80/files/wRzWGOVhqoZXcGcolMFrTGPmQlhea1bSc8XM827WeuYCAnod2UAv0*nK7asW3hftp-khX3IjsrqtiZyizEOYNZKWwnyuNYBQ/insta.jpg?width=60" width="60" /></a></span></p>
<p><span><a target="_blank" href="http://stores.ebay.com/NINADETOX"><img class="align-left" src="http://api.ning.com:80/files/q3SW9wH4fEn*l-ztqacmtMRsFC4LayimEzf5gDopm4lTtlNhe8uDeXl5R9mMdaurCHvZV4UIrSacsl2HVtT-0RPa0kUOSyxl/ebaylogo.png?width=65" width="65" /></a></span></p>
<p style="text-align: left;"><span><a target="_blank" href="http://www.amazon.com/dp/044654860X/ref=as_li_tf_til?tag=httpwwwninade-20&amp;camp=14573&amp;creative=327641&amp;linkCode=as1&amp;creativeASIN=044654860X&amp;adid=07HTRKG1S4NNX7E8NPYA&amp;&amp;ref-refURL=http%3A%2F%2Fwww.ninadetox.com%2F"><img class="align-left" src="http://api.ning.com:80/files/Jd1Z1TT0TiHrzY9XSfbnxDy2uyCtgy97EDObOAhWuCtCHi8UksisHa4poFIWPwKZzwFzPRTE3pZzQ*PjRRSldZhcqO0FcW*n/amazonicon.png?width=60" width="60" /></a><a target="_blank" href="http://ninadetoxpills@yahoo.com/"><img class="align-left" src="http://api.ning.com/files/9W1Kumh8j*PRz*6E0maV5RIEVjiWVRazutt1qHOR6WC1NrIqyaHGTD1hKG*XskyS*rKmLwrjFY2-G7Gn711TKGGTrFGfqggo/MAILLOGO.png?width=70" width="70" /></a></span></p>
<p style="text-align: left;"><span><a target="_blank" href="http://www.ninadetoxpills.com/"><img class="align-left" src="http://api.ning.com:80/files/KT1DIEz3-umx-e8Dmpg8lGbKS6kUX8HOfxF9O-jXYpdRy710c3wOIFdnxW8XI7ZhrRe1k0XAwJptcapxymkoecZQxm-SNkVy/bloggerlogo.png?width=70" width="70" /></a></span></p>
<p><span><a target="_blank" href="http://ninadetox.tumblr.com/"><img class="align-left" src="http://api.ning.com:80/files/ZAzC9kmJLzno8WvmYTKJXwbnVM4BtczH-Zdi4rSebmA31TE9CMMLI8IKyrB40cVP*dKReL58n2SakKaj0h1b*PN-0xO5dwmF/tumblrlogo.png?width=70" width="70" /></a></span></p>
<p style="text-align: left;"><span><a target="_blank" href="http://www.youtube.com/ninabonita777"><img class="align-left" src="http://api.ning.com:80/files/Q6i877iLBV3eoCQ7MERLUWkk2xYIP0TddwGkoVu7LlJjnNYHn*LK-8YKDfIj1Zsk7MtoKedZkBKlpMT5HG7nf5gPxptLiBut/youtubelogo.png?width=70" width="70" /></a></span></p>
<p style="text-align: left;"><span><a target="_blank" href="http://www.linkedin.com/pub/nina-detox-com/37/126/537"><img class="align-left" src="http://api.ning.com/files/zwzEAHkhvSVjnoG1-Go5pZbhIn2iJ7fAv*jByB7hMsyV4Vj-LdJKtk78rrggvwC44rXkiGpmQ1SZWWKNqqPZlr9HpjjBGuw0/linkedlogo.png?width=70" width="70" /></a></span></p>
<p style="text-align: center;"><span><a target="_blank" href="https://twitter.com/#%21/NinaDetoxPills"><img class="align-left" src="http://api.ning.com/files/xdJ-uh85w1AmYLMBtAgsPOs56YC2IDrH0-x2JkIN3Wc7RUp0ek242l7mBiqkJ3RPYb-al1hc4-jw8XU9e*NhIw__/tewe.png?width=70" width="70" /></a></span></p>
</center><center>
<p style="text-align: center;"><span><a target="_blank" href="http://www.facebook.com/NinaDetox"><img class="align-left" src="http://api.ning.com/files/ZAzC9kmJLzkubOomb1uOu*3PmWGMqzuiQiyTQ*0paqNGeS*kq3X4bgTgi7P6RQEez3tsX8Q9DwLtvfzhNJ0y5W*CuK621Isx/facebookicon.png?width=70" width="70" /></a></span></p>
<p style="text-align: left;"></p>
<p style="text-align: left;"></p>
<p style="text-align: center;"></p>
<p style="text-align: center;"></p>
<p style="text-align: center;"></p>
</center>
<p style="text-align: center;"></p>
<p style="text-align: left;"> </p>
<p> </p>

Permalink Reply by JenSocial on May 12, 2012 at 2:13pm

Try adding float:left to all of the paragraph tags, that are wrapped around each image/link. In example code, I'm using the same image/link for each paragraph. Then, wrap entire code with a DIV to center it. 

<div align="center"><p style="float:left;"><a target="_blank" href="http://stores.ebay.com/NINADETOX"><img class="align-left" src="http://api.ning.com:80/files/q3SW9wH4fEn*l-ztqacmtMRsFC4LayimEzf5gDopm4lTtlNhe8uDeXl5R9mMdaurCHvZV4UIrSacsl2HVtT-0RPa0kUOSyxl/ebaylogo.png?width=65" width="65" /></a></p>

<p style="float:left;"><a target="_blank" href="http://stores.ebay.com/NINADETOX"><img class="align-left" src="http://api.ning.com:80/files/q3SW9wH4fEn*l-ztqacmtMRsFC4LayimEzf5gDopm4lTtlNhe8uDeXl5R9mMdaurCHvZV4UIrSacsl2HVtT-0RPa0kUOSyxl/ebaylogo.png?width=65" width="65" /></a></p>

<p style="float:left;"><a target="_blank" href="http://stores.ebay.com/NINADETOX"><img class="align-left" src="http://api.ning.com:80/files/q3SW9wH4fEn*l-ztqacmtMRsFC4LayimEzf5gDopm4lTtlNhe8uDeXl5R9mMdaurCHvZV4UIrSacsl2HVtT-0RPa0kUOSyxl/ebaylogo.png?width=65" width="65" /></a></p>

<p style="float:left;"><a target="_blank" href="http://stores.ebay.com/NINADETOX"><img class="align-left" src="http://api.ning.com:80/files/q3SW9wH4fEn*l-ztqacmtMRsFC4LayimEzf5gDopm4lTtlNhe8uDeXl5R9mMdaurCHvZV4UIrSacsl2HVtT-0RPa0kUOSyxl/ebaylogo.png?width=65" width="65" /></a></p>

<p style="float:left;"><a target="_blank" href="http://stores.ebay.com/NINADETOX"><img class="align-left" src="http://api.ning.com:80/files/q3SW9wH4fEn*l-ztqacmtMRsFC4LayimEzf5gDopm4lTtlNhe8uDeXl5R9mMdaurCHvZV4UIrSacsl2HVtT-0RPa0kUOSyxl/ebaylogo.png?width=65" width="65" /></a></p></div>

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips