Text Box for Blogger for pasting codes in blogger

5 posts Page 1 of 1
Contributors
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

I want Text Box for my blogger in which i can post Html - CSS codes and user's can copy them.
Example = http://3.bp.blogspot.com/-OhvKmLgY-O4/U ... g+code.png

My Image Link = http://1.bp.blogspot.com/-i3AX6FFu9N8/U ... logger.png



I want that If the code is small. It should automatically become like this = http://1.bp.blogspot.com/-RYmQ9CRKiVw/U ... l+code.png

and If the code is long, it should automatically be like this = http://3.bp.blogspot.com/-OhvKmLgY-O4/U ... g+code.png

When i try to make it and i paste the code in it, it become horrible, you can see = http://1.bp.blogspot.com/-CP8_CBwHwMk/U ... please.png


You can see on JsFiddle that what's actually happening to me
http://jsfiddle.net/e5nHr/
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

The reason why it was overflowing was because your image was too small, and your div was larger than your image.

Anyway, I basically remade what you wanted to do in the first place, without using a big image (just a small one for the sidebar) and fixing the overflow problem.

You can check it out here: http://jsfiddle.net/aDm9R/3/

So basically, you have a div element of class "codeblock" (I'm using classes so you can have more than one codeblock) and inside of it you have a <pre> </pre> tag, which means everything between those two tags will appear exactly as they are entered in the code.

The only image used is for the sidebar, and is 35px wide by 100px high. You can reuse that one if you like, or make your own and customize the code block cooll;

Edit: just for fun, I've also integrated Google's code prettyfier, so code in your <pre> tags will be colored
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

Thank you so much! loove;
Last night i also posted same question in STACKOVERFLOW and someone replied
and he says this = http://jsfiddle.net/fUaXL/

I think yes that's good, but i come here to check any one answer my question or not! but you answer it, It is exactly the same what i want. Thank you So Much! +REP ADDED!

once again thank you! Going to use it ^_^ .
Well I use it and when i paste any html or any code
It just Load it!
I only want to show the code so that others can copy, But it loads the code . How can i fix it :D ?
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Ahh yes, I knew this would happen lol. The problem with putting HTML code inside <pre> tags is that the HTML gets rendered anyway.

To solve this, you should replace all the "<" characters with "<" and all the ">" characters with ">". Do that for the code inside the <pre> tags only.
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

oh yeah thanks :D
5 posts Page 1 of 1
Return to “Help & Support”