Translate, and two more new gadgets for your dynamic blogs | Blogger Buzz

Translate, and two more new gadgets for your dynamic blogs | Blogger Buzz

MathJax - displaying LaTeX math in Blogger

Ok, so I apparently either forgot to post this or it somehow got erased. I think I just forgot. Anyways, this is what I found to use to display LaTeX math in my Blogger post. MathJax also displays MathML. You can install a javascript into you Blogger template or install MathJax to work from your own server.

I did the install from the CDN. I posted this Javascript into my Blogger template. I think you could do it for just post with LaTeX math displays, but I figured this would be the easiest way to do it. It may pose problems later, but we'll see.

<script type="text/javascript"
  src="https://d3eoax9i5htok0.cloudfront.net/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

My screen shot of where I pasted the Javascript in my Blogger template. Just go to the Edit HTML tab. I pasted it near the top of the template and it works! (At least for me and my template.)

To insert inline equations you must use:

 \(...\) 

To insert a set off "mathdisplay" equations you can use:

 \[...\], $$...$$, \begin{equation}...\end{equation} 

or any other math environment such as:

 \begin{align}...\end{align} 

MathJax - Beautiful math in all browsers - http://www.mathjax.org/

From their website:

MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers.

No more setup for readers. No more browser plugins. No more font installations… It just works.

MathJax features and benefits

High-quality typography. MathJaxTM uses modern CSS and web fonts, instead of equation images or Flash, so equations scale with surrounding text at all zoom levels. See how this works in the scaling math demo.

Simple integration. Using MathJax with blogs, wikis, web pages and other web apps is easy. Learn more about installing MathJax with popular platforms like WordPress, MediaWiki, Drupal, and more.

A rich API. Allows developers to create interactive course materials, advanced authoring tools, and math-enabled web apps. Learn how more about programming with MathJax

Works in all modern browsers. This allows the math in your content to be seen clearly by virtually all readers, even those using smart phones. See supported browsers..

Copy and paste math. Let readers copy equations from your web pages into Word and LaTeX documents, science blogs, research wikis, calculation software like Maple, Mathematica and more. Watch the copy and paste demo.

Accessible math. MathJax is compatible with screenreaders used by people with vision disabilities, and the Zoom feature allows all readers to see small details like scripts, primes and hats. See how to make your math accessible.

Logo from their website:

Pleas donate if you like!

If you like MathJax, please consider making a donation. This helps pay for CDN charges, rapid bug response and browser testing. Thank you for your support! (Please note MathJax is not a tax-exempt US 501c entity).

http://www.pledgie.com/campaigns/15200

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.

The align environment in LaTeX

Here is a little on some equation formatting in LaTex. I've posted some information on this before which might have been a little messy. It needs cleaning up, and I have used some of these commands now so I have some experience to write about them and post examples.

The eqnarray environment is outdated and no longer used or needed. The new environment align has replaced this environment with improvements. For more see this link here:

LaTeX Wiki - Align (environment) - http://latex.wikia.com/wiki/Align_(environment)

Here are some examples that I have written:

\begin{align*}
\textbf{u}_t &= \dfrac{\partial \textbf{u}}{\partial t} \\
\textbf{u} &= \text{vector of dependent variables} \\
t &= \text{initial value independent variable} \\
\textbf{x} & = \text{boundary value independent variables} \\
\textbf{f} &= \text{spatial differential operator} = \textbf{f} \left( \textbf{x}, t, \textbf{u}, \textbf{u}_x, \textbf{u}_{xx}, \ldots \right)
\end{align*}

\begin{align*}
\textbf{u}_t &= \dfrac{\partial \textbf{u}}{\partial t} \\
\textbf{u} &= \text{vector of dependent variables} \\
t &= \text{initial value independent variable} \\
\textbf{x} & = \text{boundary value independent variables} \\
\textbf{f} &= \text{spatial differential operator} = \textbf{f} \left( \textbf{x}, t, \textbf{u}, \textbf{u}_x, \textbf{u}_{xx}, \ldots \right)
\end{align*}

(Also aligned works to produce the same code in THIS post. I stumbled upon a great LaTeX code display method so i have to update some older posts since I couldn't get them to work):

\begin{aligned}
\textbf{u}_t &= \dfrac{\partial \textbf{u}}{\partial t} \\
\textbf{u} &= \text{vector of dependent variables} \\
t &= \text{initial value independent variable} \\
\textbf{x} & = \text{boundary value independent variables} \\
\textbf{f} &= \text{spatial differential operator} = \textbf{f} \left( \textbf{x}, t, \textbf{u}, \textbf{u}_x, \textbf{u}_{xx}, \ldots \right)
\end{aligned}

\begin{aligned}
\textbf{u}_t &= \dfrac{\partial \textbf{u}}{\partial t} \\
\textbf{u} &= \text{vector of dependent variables} \\
t &= \text{initial value independent variable} \\
\textbf{x} & = \text{boundary value independent variables} \\
\textbf{f} &= \text{spatial differential operator} = \textbf{f} \left( \textbf{x}, t, \textbf{u}, \textbf{u}_x, \textbf{u}_{xx}, \ldots \right)
\end{aligned}

Edit: Eeewww, I'm going to have to change that code display. It IS UGLY!! I need to tweak some things because my blockquote needs to change too. I want to put a box/frame or whatever around it so that it pops out at the reader and is distinguishable.

Edit 2: Ok, so I fixed up the blockquotes and code display (I think, I can't remember now it's been so long!! :P)

In order to have the equation number at the end of a long, multi-line equation use the command \nonumber right before you end the line with the double slashes

\begin{align}
\dfrac{\partial^2 T \left( x, t + \dfrac{\Delta t}{2} \right)}{\partial x^2} = &\dfrac{1}{2} \left[ \dfrac{T \left( x + \Delta x, t + \Delta t \right) - 2 T \left( x, t + \Delta t \right) + T \left( x - \Delta x, t + \Delta t \right)}{\Delta x^2} \right. \nonumber \\ &\left. + \dfrac{T \left( x + \Delta x, t \right) - 2 T \left( x, t \right) + T \left( x - \Delta x, t \right)}{\Delta x^2} \right]  + O \left( \Delta x^2 \right)
\end{align}

In order to center the equation number, surround the array environment with an equation environment

\begin{equation}
\begin{align}
\dfrac{\partial^2 T \left( x, t + \dfrac{\Delta t}{2} \right)}{\partial x^2} = &\dfrac{1}{2} \left[ \dfrac{T \left( x + \Delta x, t + \Delta t \right) - 2 T \left( x, t + \Delta t \right) + T \left( x - \Delta x, t + \Delta t \right)}{\Delta x^2} \right. \\ &\left. + \dfrac{T \left( x + \Delta x, t \right) - 2 T \left( x, t \right) + T \left( x - \Delta x, t \right)}{\Delta x^2} \right]  + O \left( \Delta x^2 \right)
\end{align}
\end{equation}

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

Please Make A Note: How to Cite a Blog & Automatically Generate Citati...

Please Make A Note: How to Cite a Blog & Automatically Generate Citati...: "The MLA format for citing a blog is: Last Name, First. 'Title of Entry.' Weblog Entry. Title of Weblog. Date Posted. Date Accessed (URL). ..."

Please Make A Note: Total Number of Posts and Comments - Blogger Gadge...

Here's a nifty post from PMAN on how to use the HTML/Javascript gadget to display the total number of blog posts and comments.

Please Make A Note: Total Number of Posts and Comments - Blogger Gadge...: "You can add the total number of posts and comments as a blogger gadget. In your design page, add an HTML/Java Script gadget, and put in the ..."

Posting LaTeX equations in Blogger

Here are some links to a few useful ways to post LaTeX equations in Blogger.

First a set of links from PMAN. The first is the latest followed by a couple of older ones to show you PMAN's progression. I "shared" the post earlier and I accidentally switched two in chronology. Here they are in correct order from latest to earliest.

Please Make A Note: How to Post LaTeX Equations in Blogger

---

Edit: 8-5-11

Well, the codecogs thing is nice but not perfect. It doesn't seem to work with LaTeX environments such as

\begin{align} \end{align}

---

These are outdated, but maybe interesting reads for readers.

How to Post Math Equations in Blogger Using Latex

How to Post Math Equations in Blogger using ASCIIMathMIL

---

Edit: 8-5-11, I couldn't get this watchmath.com thing to work. I don't recommend it.

---

A couple of links from WatchMath @ watchmath.com. The first post is the latest, some links were moved. The second is old but a full explanation of the process. Also check out the rest of the blog. I haven't looked at it much, but it seems to have some good stuff there such as math videos and posts.

How To Install Latex On Blogger/Blogspot - http://watchmath.com/vlog/?p=438 July 10th, 2009

The mathtex server is down. Change mathtex2.js on the script into mathtex3.js.

Mathtex3.js using the mathtex server of John Forkosh.

There were some people who moved from Blogger to WordPress because the later has a capability to render math formula/equation/symbols by using LaTeX syntax. I also observed that there are many math Blogger who faithfully stay with Blogger. I believe that given the some capability to write math formula as in WordPress will give more power to the blogger to express their idea and also to make the reader easier to grasp the ide on their article. Besides that of course having latex on your blog make your blog more beautiful . Ok without further ado here are the steps to enable latex on your blogger (thanks to John Forkosh for his mathtex public server and thanks to Randall Farmer for his replacemath javascript)

---

Finally here is where I found the link to WachMath.com at the blog The tools of the trade. I've also added both WatchMath and The tools of the trade to my blog list.

LaTeX in Blogger/Blogspot:

I was wondering if it would be possible to display latex formulas in Blogger - and of course it is. :-) I found a post by Watchmath describing how this can be done by adding a HTML/Javascript Gadget (like the "Blog Archive" on the right) with a little piece of javascript code. If it works, the following code

X(k) = \sum\limits_{i=0}^{N-1}x(n)e^{-2\pi ik \frac{n}{N}}

Please Make A Note: How to Post Math Equations in Blogger Using Latex

Please Make A Note: How to Post Math Equations in Blogger Using Latex: "In a previous post , I discussed how to post math equations in blogger using the ASCIIMathML script. The advantage of using this method is t..."

Please Make A Note: How to Post Math Equations in Blogger using ASCIIM...

Please Make A Note: How to Post Math Equations in Blogger using ASCIIM...: "I know that most of us working directly with mathematics are looking for a fundamental solution to posting equations on blogger. So far, I w..."

Please Make A Note: How to Post LaTeX Equations in Blogger

Please Make A Note: How to Post LaTeX Equations in Blogger: "I've gone through several approaches to post math equations on blogger (check my previous posts here, and here ). I found that the most eff..."

Blogger Tips: Readability and Post Width

Alright well I am slowly cleaning up my blog, and I have started to notice how ugly and hard to read it was. Appearance is everything for things like this because you want people to stop and check your blog out. Usually people have googled something and are quickly scanning pages (this is what I do) so you want something to capture your reader which is easy to read and aesthetically pleasing.

First I have changed my font color and post background color. To me, from what I have mentally gathered, a dark font with a light background or vice-versa works best. I personally like a darker font with a lighter background. This all can be changed easily in the Design Tab in Blogger.

Screenshot from my blog:  I guess if you are reading this it probably looks the same, :P.

I had something like this before.  It was a darker grey with a yellow tinged font.  Not very easy to read...

This one is better, but I think, IMO, it is better not to get too fancy.

And please don't do something like this...it looks like a 14 y/o girl's MySpace or Xanga (sorry, no offense, just not professional).  Seriously, I saw a PhD student who was applying for a professorship at my school who presented his equations in this color in a font size of 8...really?

Next I changed the layout. I have a blog archive as one of my gadgets on the sidebar like most people do (it seems pretty standard, and you can see mine in the images and probably now of course). However, I first had the archive gadget in a small width gadget space which crammed it and made it ugly and unreadable.

So I finally figured out you could move the gadget to a wider gadget space in the layout design tab.  I also had columns on both sides of the post, but I found it is better if you have one column on one side because it will increase the width of your post area.  Also, I like the column on the left because I like to use X-Large picture formats and they spill over on the right side of the site.  Even though I figured out you (reader) can click on the image and it will enlarge.

Also, it is nice to use a decent size font.  Right now I am using Times Roman at an 16pt.  I think in my format it is the perfect size.  It is big enough, but not distorted like 18 or above.

Anyways, this post was supposed to be about how to widen your post.  I thought changing to the one column format helped a lot.  However, I went to the Design tab and under Edit HTML couldn't really follow this blog tip (John Deere Mom: How to widen your columns on Blogger) :

I am going to post some links and screenshots of some examples of what I am talking about.  Here is the link again to the one I just mentioned:

John Deere Mom: How to widen your columns on Blogger

See (image above) how she has a simple white background with a black font color.  Font is nice a big, very readable.  She also has a nice blend of her post area and gadget area.  I think this is due to the Design Template.  I use the Awesome, Inc.

Here is the Simple:

She also has some (it looks) customized stuff which I haven't gotten to yet but will post about when I get there.

This is a screenshot of Please Make a Note.

Tony also has a very nice layout.  Good font, background contrast.  Very readable.  He also has some nice customized stuff.  I also noticed his tab at the top on the internet browser has a blue sphere instead of the Blogger emblem.  Got to figure out that trick!!

Well, I just found the adjust width tab under the Design tab.  Geez, it couldn't have been any more obvious.  Haha, oh man, maybe it's new??  Anyways here are some screenshots:

Blogger Application Issues and a Few Notes

Ah, quick bug fix. I keep getting the error: "Post was not saved due to form errors" in my blog "notifier" when it tries to save or autosave. Well, I though I had a quick fix. At first it went away when I selected everything and clicked default font and normal size. However, it seems that the blog application does not like some stuff that gets copied over if you copy and paste from somewhere else such as a webpage or Word document. To fix this go to the Edit HTML tab at the top of the blog post editor. I know it looks scary, but it should tell you what the error refers to at the top in a red box with red lettering. In this case it was something to do with META?! I don't know so don't ask me, :P. All I did was find the line of code and with META in it and deleted it. I wanted to post some screen shots, but I will have to do it later when the error appears again, :P.

Ok, so maybe forget all of that. I just found out that it is easier to edit in the Edit HTML tab so that way you don't get all the unnecessary junk.

Here is a snapshot of the image of the Ubuntu Software Center a little ways down and how it looks in Edit HTML format.  The second screenshot shows this first image pasted in html mode.

I don't quite understand the HTML editing code quite yet, but I can figure some stuff out with my adequate programming/engineering background. I will try to update when I figure something out or learn to do something, :).

Here is a screenshot of an error. This error pertains to a bold face font I was trying to add manually. I forgot to add the "/" so this is the error given (see the list above in the figure for the correct notation; for bold face type without the quotes and spaces do "< b >  Text here < / b >").

Ok I finally got the same META error. It appeared when i copied and pasted and website link with the link active (underlined, can click on it to go the website) in Compose mode. I guess the META is hidden under the copy and paste. The best way is to do this in the Edit HTML mode.