codingfreak: Blogger

Showing posts with label Blogger. Show all posts

12.02.2013

Displaying MATH formulas in blogger

Introducing math formulas in blogger was a daunting task in olden days. Now using Mathjax we can include them without any issue. Let us see steps to add support for Mathjax to blogger template.

1. In your blog default home page under "template" section select "Edit HTML" option. Add following line after <head> tag

<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

2. Now we can include math formulas as simple ASCII Math notation.

NOTE: We should use ∖( ...∖) for inline math and ∖[ ... ∖] for displayed math.

For inline math

To display \(\left(x-1\right)\left(x+3\right) \sqrt{a^2+b^2}\) as inline formula

Similarly for displayed math

\[\sqrt{a^2+b^2}x = a_0 + \frac{1}x = a_0 + \frac{1}{\displaystyle a_1 + \frac{1}{\displaystyle a_2 + \frac{1}{\displaystyle a_3 + a_4}}}{a_1 + \frac{1}{a_2 + \frac{1}{a_3 + a_4}}}\]
References:

1. Mathjax
2. Online Latex Editor

2.17.2009

Blogger: Adding syntax highlighter to Blogger

As we know it is really hard to post any source code to the blogger as there is no Syntax Highlighting option by default to the blogger (A Big Deficiency).

After doing some web search first I came across a Javascript tool named syntaxhighlighter and then I came across Heisencoder's post on how to add the syntaxhighlighter option to the blogger template.

NOTE: We are about to tweak the HTML code of the blogger template. Inorder to know how to edit the HTML code of the blogger template check this post.

NOTE: For safety precautions click "Download Full Template" link to download full html code of your present blog's template.

Select "Expand Widget Templates" option to see the full html code in the editor. Now we have to make our hands dirty as we are about to add some code into our blogger template code.

1. Go to http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css, and perform "select all" and "copy" the whole code and paste it at the end of the css section of your blogger html template (i.e., before ]]--></b:skin>).

2. Before the </head> tag, paste the following code:


<!-- Add-in CSS for syntax highlighting -->
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

NOTE: Simply remove lines for languages which you will never use (for example, Delphi) -- it will save some loading time of the blogs.

3. Before the </body> tag, insert the following:

<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

NOTE: Tweaking of the Blogger HTML template code is complete. So before you save the template code just click on "Preview" button to see if the code is not crashing & working fine.

4. While posting a post that has source code then click on "Edit Html" tab and post the source code between pre tags shown below

<pre name="code" class="cpp">
...Your html-escaped code goes here...
</pre>

In the above code substitute "cpp" with whatever language you're using. Choices: cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt. Full list can be accessed at Supported languages.

NOTE: Instead of remembering the code everytime we can add this HTML code simply into the template so that it is displayed whenever we create a new post. Click on "Settings" tab and then "formatting" sub-tab and post the html code in the "Post Template" box. As a result next whenever we create a new post it is displayed when we click "Edit Html".

We have to perform HTML escaping which can be done in the sites like Centricle, Accessify.

Reference

[1] Heisencoder - Link

2.04.2009

Blogger: Adding Applet code into the blogger post

Since we cant directly upload the Applet code into the google and then include it in the blogger post checkout the the way we have to add the Applet code into the blogger.

We cant simply add the Applet code to post in the blogger. For e.g. let us add the following applet code <applet code=ThreeD.class width=100 height=100></applet> into the post then we see a box with a 'x' mark on the left side corner as shown below.

Inorder to solve the problem we have to modify the Applet code so that blogger can track down where the following applet is actually present.

Solution to the problem comes up with a tag "codebase" ...

What is codebase?
Codebase tells the browser where the applet files are located, but if all files (including the HTML file, .class files, and images) are all together in one folder on your own server or local system, you should not specify CODEBASE. Likewise, if you are going to use the applet off-line, do not use a CODEBASE.

If you are using something like BLOGGER, then yes, you will definitely need to use a codebase address (since .class files can't be directly stored on the .blogspot server).

Something like this

<applet code=ThreeD.class width=100 height=100 codebase=http://www.yoursite.com/files/ ></applet>

I have provided the exact link location where the applet code is stored.

7.15.2008

Blogger: Optimize post title for more visitors and search engine results

When we search for the posts of a blog in google or yahoo we will find out that the post title is displayed as

Blog Title + Post Title

Such titles really doesn't attract much traffic to your blog. But it is the default setting in our blog template code. Now we will tweak the HTML code of our blog template to optimize the post title for search engines in a more attractive format

Post Title + Blog Title

This tweak will take a while for the Formatted titles to appear in search results(will appear when it is reindexed) but I am sure that it will increase the traffic to your blog.

Check out my post "Editing the HTML code of a Blogger Beta Template" to know how to edit the html code of the blogger template.

Search for the code <title><data:blog.pageTitle/></title> and replace the code with the following code

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>

So use the tweak for more traffic.

7.13.2008

Blogger: Setting labels as horizontal tabs

In this post I will discuss how to set the labels in blogger as a horizontal tabs.

NOTE: Read this post completely before you start tweaking your blog.

Since we are about to modify the HTML code of your blog template backup your complete blogger template. Check out my post on Editing the HTML code of a Blogger Beta Template to know how to perform template backup. Also make sure that your blog has posts with labels assigned to them if not nothing will be working out.

Step 1:

Download the free CSS navigation menus from the Exploding Boy website. Once you download the entire set unzip it and decide which type of menu you are going to include in your site. Then we have to upload these GIF images to any photosharing site or any place in internet so that we can access them directly. There are many options like Photobucket, Picasa, Googlepages.

Step 2:

Now we have to change the Header so that it can include page elements. Search for id="header" in html code of your blog's template and modify this line:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

as

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

Step 3:

Now we will prepare the CSS portion of the tweak. I have uploaded the images tableftF.gif and tabrightF.gif which are related to Menu style F at the links

http://www.site.com/tableftF.gif
and
http://www.site.com/tabrightF.gif

So you have to replace those links in the code with the appropriate links where you have uploaded those images. Below is the CSS code for menu style F:

#tabsF
{
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid #000;
}

#tabsF ul
{
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}

#tabsF li
{
display:inline;
margin:0;
padding:0;
}

#tabsF a
{
float:left;
background:url(" http://www.site.com/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#tabsF a span
{
float:left;
display:block;
background:url(" http://www.site.com/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span
{
color:#FFF;
}

#tabsF a:hover
{
background-position:0% -42px;
}

#tabsF a:hover span
{
background-position:100% -42px;
}

Step 4

Now we have to add the Label Widget. Insert the following Widget code

<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>

</div>
</b:includable>
</b:widget>

NOTE: By using the above code by default tabs for all your labels is created. If you got more number of labels then the tabs for all labels is created by default i.e. If there are 30 labels in your blog then 30 tabs are created which don't looks good. So I modified the green lines in the above code in this way so that we can include only those labels which we want to add.

<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>

<b:loop values='data:labels' var='label'>


<b:if cond='data:label.name == "Linux"'>
<a expr:href='data:label.url'>
<span>
<data:label.name/>
</span>
</a>
</b:if>


<b:if cond='data:label.name == "Open Source"'>
<a expr:href='data:label.url'>
<span>
<data:label.name/>
</span>
</a>
</b:if>

</b:loop>

</ul>

</div>
</b:includable>
</b:widget>

Depending upon your requirement you can add as many labels you want.

NOTE: If you use a CSS menu style other than F, than make sure id='tabsF' reflects the correct tab, such as id='tabsE' for style E. Later, if you like a different design, just cut-and-paste the style's CSS code, then change this id again to reflect the change. Check out the Tabs in my blog.

Checkout the CSS code for other Menu styles from A to F

/*- Menu Tabs A --------------------------- */

#tabs {
float:left;
width:100%;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("http://www.site.com/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("http://www.site.com/tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs B--------------------------- */

#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}
#tabsB ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsB li {
display:inline;
margin:0;
padding:0;
}
#tabsB a {
float:left;
background:url("http://www.site.com/tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightB.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0% -42px;
}
#tabsB a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs C--------------------------- */

#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("http://www.site.com/tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsC a span {float:none;}
/* End IE5-Mac hack */
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs D--------------------------- */

#tabsD {
float:left;
width:100%;
background:#FCF3F8;
font-size:93%;
line-height:normal;
border-bottom:1px solid #F4B7D6;
}
#tabsD ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsD li {
display:inline;
margin:0;
padding:0;
}
#tabsD a {
float:left;
background:url("http://www.site.com/tableftD.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsD a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightD.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#C7377D;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsD a span {float:none;}
/* End IE5-Mac hack */
#tabsD a:hover span {
color:#C7377D;
}
#tabsD a:hover {
background-position:0% -42px;
}
#tabsD a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs E--------------------------- */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://www.site.com/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs F--------------------------- */

#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("http://www.site.com/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs G--------------------------- */

#tabsG {
float:left;
width:100%;
background:#666;
font-size:93%;
line-height:normal;
}
#tabsG ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsG li {
display:inline;
margin:0;
padding:0;
}
#tabsG a {
float:left;
background:url("http://www.site.com/tableftG.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsG a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightG.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsG a span {float:none;}
/* End IE5-Mac hack */
#tabsG a:hover span {
color:#FFF;
}
#tabsG a:hover {
background-position:0% -42px;
}
#tabsG a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs H--------------------------- */

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("http://www.site.com/tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs I--------------------------- */

#tabsI {
float:left;
width:100%;
background:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:1px solid #DD740B;
}
#tabsI ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsI li {
display:inline;
margin:0;
padding:0;
}
#tabsI a {
float:left;
background:url("http://www.site.com/tableftI.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsI a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightI.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsI a span {float:none;}
/* End IE5-Mac hack */
#tabsI a:hover span {
color:#FFF;
}
#tabsI a:hover {
background-position:0% -42px;
}
#tabsI a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs J--------------------------- */

#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url("http://www.site.com/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}

/*- Menu Tabs K--------------------------- */

#tabsK {
float:left;
width:100%;
background:#E7E5E2;
font-size:93%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#tabsK ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsK li {
display:inline;
margin:0;
padding:0;
}
#tabsK a {
float:left;
background:url("http://www.site.com/tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url("http://www.site.com/tabrightK.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsK a span {float:none;}
/* End IE5-Mac hack */
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}

7.11.2008

Blogger: Editing the HTML code of a Blogger Beta Template

In this post we will be checking out How to Edit the HTML code of template of a Blogger BETA.

Once you login into blogger.com by default you will be landing into "Dashboard" which shows the list of blogs that have been created by you.

Since we are editing the layout of the blog we have to click the "Layout" link to check the layout of the blog. Then you will be seeing a page that has a look similar to one shown below.

Now you can see three tabs namely Posting, Settings, Layout. Depending upon your template you will be having different options under Layout tab and I got Page Elements, Fonts & colors, Edit HTML, Pick New Template.

If you have to pick a new predefined template from google you have to click the option "Pick New Template". As I decided to show how to edit the HTML of the existing template I will be clicking "Edit HTML" option.Then you will be seeing a view similar to as shown below.

Before you modify the HTML of the BLOGGER template remember that you have to backup the existing template code so that even if any problem occurs because of modification of HTML code we can revert back to previously working HTML code. Click the "Download Full Template" link to backup the existing template code. The backup is saved as a .xml file. If you have to revert back to previously existing code which is saved in your harddisk just upload it by clicking the upload button.

By default "Expand Widget Templates" is not checked. Before we modify the HTML code we have to check it so that the code related to each and every widget that is present in our blog is shown up.

Once modifying the code present in the HTML editor we have to save the template or preview it using the appropriate button shown in above figure. Even if anything goes wrong we can revert back to the previous code as we already performed the backup of our previous code.

Subscribe to: Posts ( Atom )

Pages