Friday, April 9, 2010

Adding Flash animated Tag cloud (Label cloud) Blogumus to blogger

2:38 AM by meharoof · 1 comments
Labels: , ,
Blogumus is an Flash based tag cloud widget developed by Amanda Fazani based on Roy Tanck's WP Cumulus plugin for Wordpress.(You can find the demo here. Amanda explains how to use it with blogger here. Lot of readers commented to her post by saying that it is not working. So investigating the cause of problem, i noticed the reason is that the files tagcloud.swf and swfobject.js can't access now.
By searching the Roy Tanck's website i found these files here and here.

So the solution is download these files and upload it to your site. But blogger doesn't allow uploading javascript and swf files. So you have to signup for a googlesite. Create a google site and log-in to it. Then you can upload these files to your googlesite as:
Click MoreOptions->manage site.
Click Attachments
Then you can upload these files by clicking upload button.
suppose your googlesite name is 'mysite', then these files may be in:
http://sites.google.com/site/mysite/swfobject.js
and
http://sites.google.com/site/mysite/tagcloud.swf

Detailed step for adding tagcloud is explained as follows:

If you are not added the 'Labels' page element to your blog, add it (After logged in to your blog) by
click 'Layout', then click 'Add a gadget' in 'Pageelemtns' tab.
add a 'Lables' widget. then click 'save'

(If you already added the labels widget, skip the above step)

click 'edit html',make sure that 'Expand Widget Templates' check box is unchecked.

In your html code find "type='Label'". You can find a line like,

Replace this line by the following lines:
(you can copy the following lines by clicking 'copy to clipboard' button next to 'view source' button in the upper right corner of the first line)

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/mysite/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/mysite/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Don't forget to change the location 'http://sites.google.com/site/mysite' (line 7 and 10 in the above code) to location of your site, where you uploaded the files mentioned first in this post.


For customizing and more details of this widget, look here.

Monday, April 5, 2010

Beginner's guide to Adding Syntax Highlighter 2.0 to Blogger

SyntaxHighlighter is a Free tool, that can show the code snippets in your blog post with proper highlighting & syntax.New version SyntaxHighlighter 2.0 was released in February 2009.

Here I show how to use the latest syntaxhighlighter in your blog.

(Before updating your blogger template, make sure that you have taken the backup of your current template-by clicking 'Layout' -> 'Edit Html' -> 'Download Full Template' under ''backup/restore template)

1. Log-in to blogger.com and Click 'Layout', then click 'Edit HTML' tab
2. Paste the following lines code before </head> or after <head>
(You can copy the code by clicking the 'view source' button(appear when you move the
mouse to the upper right corner of the following code) and copy the content
or
by clicking the 'copy to clipboard' button next to 'view source' button)

<!-- START: Syntax highlighter 2 -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!-- END: Syntax highlighter 2 -->

Now your blog has reference to all necessary javascript and css files for syntaxhighlighter.
(You need to only include reference to .js files that are specific for your code language.But don't remove the code from line 2 to 5 and 17 to 21 in the above code. That is, if your code contains only Php, then you only need to include 'shBrushPhp.js'(line number 10) and lines 2 to 5 and 17 to 21)

3.Now you can use your code snippets in your blog in two ways
(a):- Enclose your code between <script type="syntaxhighlighter" class="brush: html"><![CDATA[
and
]]></script>
For example, suppose your code is 'my test code' then your formatted code for syntaxhighligher is:
<script type="syntaxhighlighter" class="brush: html"><![CDATA[
my test code
]]></script>

(b):-Convert your code to html escaped charecters(we can do this by the help of some online tools like This)
Then enclose your html escaped code between <pre class="brush: html">
and
</pre>
For example, suppose your code is 'my test code' then your formatted code for syntaxhighligher is:
<pre class="brush: html"> html escaped my test code </pre>

The part class="brush: html" means your code language is 'html' . If your code language is php,then use "brush: php". similarly, for csharp use "brush: csharp".
A list of available languages can be found Here
You can also change the appearance of your highlighted code by changing the themes. A list of available themes can be found Here

Followers

Labels

Blogumulus by Roy Tanck and Amanda Fazani