Format My Source Code for Blogging

This is a cool link I found. simply paste your code into the app, and it will automatically generate a nice box with the code inside using the "pre" html tag.

A Javascript web application that will format source code text into HTML for inserting into your blog.

Format My Source Code for Blogging

A sample from the app:

.post-body blockquote {
margin: 1em 3em;
padding: .5em;
background-color: #f6ebc1; 
}

I changed the generated "width: 100%" to "margin: 1em 3em"

This is the original.

.post-body blockquote {
margin: 1em 3em;
padding: .5em;
background-color: #f6ebc1; 
}

Changing/styling/customizing/etc. your blockquotes in blogger

Ok, whew, so I have just been on an emaculate journey through blogger. This journey began with trying to display LaTeX in blogger. I then wanted to tweak and fix my "blockquote" in blogger since the template I am using doesn't specify a different background color or border which helps the quotes pop/stand out to the reader for better aesthetics and distinguish-ability. (I will also mess with and talk about the "code" and "pre" HTML tags in another post.) Then default "blockquote" in my template that I chose to use only indented the quote which made it very difficult to pick out of the blog post.

So one of the problems was finding out what to do. I knew I had to go into the Design tab, then the Edit HTML tab/option in the Blogger Dashboard. This allows you to edit the HTML code which controls your template settings of how your blog post/page/widgets/etc. will look. So I Googled "how to edit blockquote in blogger" where of course about a million (figuratively and literally) links returned.

Here are some links I came across which you might find helpful:

Blogger 101: Blockquote Coding - http://momswhoblog.blogspot.com/2007/05/blogger-101-blockquote-coding.html

Quotes in Blogger - Customization - http://www.blogbulk.com/2008/12/quotes-in-blogger-customization.html

How to customize "block quotes" in your posts - http://www.bloggerbuster.com/2007/11/how-to-customize-block-quotes-in-your.html

How to Style Up Your Quotes in Blogger - http://maketecheasier.com/style-up-quotes-in-blogger/2010/09/03

Now this post ^ tells you to find this piece of code in the HTML template editor:

blockquote {
margin:1em 20px;
background: #dfdfdf;
padding: 8px 8px 8px 8px;
font-style: italic;
}

However, in the template that I am using there was not a piece of code like this. I couldn't even find "blockquote" in the code using the find function, CRTL + F. This next post then showed an alternative possibility of code, but alas, it was not there either.

Customize Blockquote In Your BlogSpot Blogs - http://bloggerstop.net/2009/05/customize-blockquote-in-your-blogspot.html

Weird, this link is nearly the same as this ^, information-wise.

How To Customize Blockquote In Blogger - http://www.royaltutor.net/2011/01/how-to-customize-blockquote-in-blogger.html

.post-body blockquote {
margin: 1em 3em;
padding: .5em;
background-color: #f6ebc1; 
}

So ,what I did was simply find a spot to copy and paste to see if this code would work. I saw where the blockquote needed to be in between

<b:skin> </b:skin>

I then searched for a similar phrase as

.post-body

This is in the Post section of this template code.

I then changed the color and added a border. The colors are in a 6 digit hex code. You can find out more about these colors and digits here:

Color Hex Color Codes - http://www.color-hex.com/

About color-hex.com

Color-hex.com gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. Color-hex.com also generates a simple css code for the selected color.
Html element samples are also shown below the color detail page.
Simply type the 6 digit color code in the box above and hit enter.

HTML Code: The Beginning - Displaying Code in Blogger (&lt displays <), Bold Code , and a Horizontal Breaker

Edit: 07-20-11 I started this post over 6 months ago, but I never published it. I am truncating it as of now and posting what I have so far. More will come.

Well it finally came. The day to talk about HTML code. I knew it existed, knew a little bit about it, but now I have begun immersion, full immersion (I'm kind of excited to learn this new "code;" I know such a dork).

Ok, so I knew HTML existed due to Blogger and the "Edit HTML" tab under the posting editor, and I think I have done some in Microsoft FrontPage as well for my advisor's website. I've been trying to use it mostly as I have posted before. So I had copied and pasted one post about LaTex line spacing and page breaking which had created a mess in HTML. The post looked fine. It was a carbon copy of what I had copied and pasted style-wise. However, I now decided that I wanted to clean the post up a bit since there were some unnecessary links, colors, and font sizes.

Well first I tried to do the cleaning up and editing in the "Compose" tab. Yeah, that didn't work or help. It seems to layer the HTML code. What I mean by that is that I tried to reduce the font size so I clicked Blogger's Normal style (really annoying that they don't have the normal choice of 12pt, 14pt, etc.) which "fixed" it visually. When I published or viewed the post, however, the fixes were wrong. Some of the fonts were too small. So I jumped into the HTML editor and tried to find the font controller. No problem as it was called something like style = font size etc., but the issue was due to all the other junk surrounding it such as "span" blah, blah blah. I tried to mess around with it to no avail (began getting span errors, etc). So I simply copied the preview (which it appear around the editor; I have never seen it do that before) and pasted it into the HTML which was nice, neat, and straightforward. I then bolded what I wanted hi-lighted by clicking the bold button. It simply puts a <b></b> around your text that you want bolded (I found out how to display the less than and greater than signs for displaying the HTML code in a Wordpress blog here: The Blog Herald - Writing and Publishing Code in Your WordPress Blog Posts). In order to show the less than sign the code & l t must be written without the spaces. In order to display the code without the code displaying the character then the ampersand code &lt must be used. Then I wanted to add...

---

Here are some links to some HTML coding help and information. I found these while trying to figure out how to insert and horizontal line for breaks in my blog. The code for a simple horizontal line is <hr> which looks like this &lthr&gt wrapped in <code> . Remember to close <code> with </code> , or you will get something like this which only changes the font and the rest of the post will be in courier typewritter font!

HTML Made Really Easy - http://www.jmarshall.com/easy/html/

How to add horizontal line to webpage - http://www.rogersplaceblog.com/2008/02/how-to-add-horizontal-line-to-webpage.html

WordPress.com Blog Bling: Signatures and Writing Code - http://lorelle.wordpress.com/2007/02/04/wordpresscom-blog-bling-signatures-and-writing-code/

Writing Code in Your Posts - http://codex.wordpress.org/Writing_Code_in_Your_Posts