A Cool Flash Animated Label Cloud for Blogger!

"Blogumus" is an Flash based tag cloud widget which uses scripts converted from Roy Tanck's WP Cumulus plugin for Wordpress. That original plugin was converted into the Blogger widget by Amanda Fazani you see on my sidebar. Hover your mouse over the Flash object to see the animation begin.

In this post, I'll explain how you can add Blogumus to your own Blogger layout with ease!

How it works

This widget uses a combination of JavaScript and Flash animation to parse and display your blog labels. Once installed in your template, it should work "out of the box" without any additional tweaking required, though of course you may prefer to change the variables for color, background and size if appropriate :)

You should also be able to move the Label Cloud widget through the Page Elements page of your dashboard if you prefer display in a different layout location.

To see Blogumus in action, both Flash and Javascript must be installed and enabled for your internet browser. However, it does degrade relatively gracefully, and label links will still be clickable (though not animated) for those who do not use JavaScript of Flash (including search engine spiders).

How to install Blogumus in your Blogger layout

Installing Blogumus in your Blogger layout is surprisingly simple! You should only need to copy and paste a section of code to your Blogger template, though any tweaks for the style of display will require some manual editing.

Here are the steps required to install Blogumus in your Blogger layout:

Go to Layout>Edit HTML in your Blogger dashboard, and search for the following line (or similar):

<b:section class='sidebar' id='sidebar' preferred='yes'>

Immediately after this line, paste the following section of code:

<b:widget id='Label99' 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://halotemplates.s3.amazonaws.com/wp-cumulus-example/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://halotemplates.s3.amazonaws.com/wp-cumulus-example/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>

Then preview your template. If installed correctly, you should see the tag cloud appear in your sidebar. Then you are free to save your template, edit the colors and dimensions as required, or move it to a different location.

That's all!

Customizing Blogumus

In this default installation, Blogumus includes the following preset variables:

• Width is set to 240px


• Height is set to 300px;


• Background color is white


• Test color is grey


• Font size is "12"

If you would prefer to make your widget wider, shorter, change the color scheme, etc, you will need to do this by editing various parts of the code. I'll go through these options in the order they appear in the widget code.

Editing width and height

The variables for width and height are found in this line of the script:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

The width (currently 240) is highlighted in red, while the height (300px default) is highlighted in blue. These numerical values specify the width and height in pixels, so you can alter these of you prefer.


Editing background color

You can change the background color from white to any other color by altering the hex value in the same line:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

For example, if you prefer a bright red background, you may replace #ffffff with #ff0000.

Alter the color of text

By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:

so.addVariable("tcolor", "0x333333");

Be aware that "tcolor" is a Flash variable and doesn't include the usual hash symbol of hex color codes. Be sure to only replace the numbers!

Adjust the font size

The maximum font size of tags is specified in this line:

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing "12" to a larger or smaller number.

While making any of these changes, you should be able to preview your widget and be certain that your new choice of color, dimensions and background are suitable for your needs.

Read more »

On-Screen Keyboard on Windows XP

Heres a neat function which you may find some use for sometime. Windows XP comes with a built in on-screen keyboard. Basically a graphic of a keyboard comes up and acts like your keyboard, you can use your mouse to hunt and peck around on it. It's perfect for people with disabilities, where it would be easier to use a mouse than trying to type or it's great to use when your keyboard goes kaput. Works also if you have multiple language settings setup on your computer. You will see that the keyboard changes languages as you do, ie Russian language setting will present a cyrillic keyboard.

Here is how you launch it:

* Go to start
* Go to run and type OSK
* Then the keyboard comes on

It's really just that simple. It's best to make a desktop icon for it or a shortcut, because if your keyboard should go out on you, it would be handy to have it. All you do to create the shortcut is to:

* Right click on the desktop
* Click the new shortcut button
* Type osk, click next twice, and there you have it.

Read more »

Program Your Own Keyboard Shortcuts

We'll show you how to save time, keystrokes, and mouseclicks by making your own customized shortcuts.

Pressing buttons isn't particularly good for you. Jane Jetson knew it as early as 1962, and your friendly neighborhood orthopedic surgeon would be hard-pressed to argue with her today. Problem is, you can't very well answer your daily deluge of e-mails without typing, and as if to add insult to injury, odds are you're pretty much typing the same thing again and again.

One approach is the macro: a tiny program you write (or have generated automatically) that can lift the burden of repetitive tasks—like typing email replies—by doing them for you. Macros have been around for decades, but there's usually a catch that makes then not worth the trouble. You can write a macro in Word or Excel, but you can't use it outside (nor inside Office in some cases, depending on your antivirus settings). Windows includes the Script Host, but it's hard to use, and it's lousy at controlling programs and typing text. But a small, free download called AutoHotKey takes a different tack—one that, as it turns out, might actually save you some time.

AutoHotKey has no interface to speak of; you use only a plain text editor (for example, Notepad) to write your scripts, and then save them with the AHK filename extension. But since AHK files are more configuration files than procedural scripts, you can double-click an AHK file right away to load it and leave it running in the background while you work on other things. Then when you press one of the hotkey (or "hotstring") combinations defined by the AHK file in memory, AutoHotKey does the rest.

Each line in your AHK script identifies a trigger and an associated action. For instance, the one-line script in Figure 1 opens Google's search page in your default browser whenever you press the Windows logo key + G. (Here, the # character represents the Windows logo key, and the double colon :: separates the hotkey from the commands to carry out when the key combination is pressed.) But that's AutoHotKey at its simplest.

Global Autocorrect

Are your annoying texting habits creeping into other parts of your life? Use AutoHotKey hotstrings (Figure 2) to automatically expand abbreviations as you type, no matter what program you're using. Here, the double-colon mark goes before and after the abbreviation.

Without changing the way you type, "btw" instantaneously becomes "By the way," "fubar" becomes "[fouled] up beyond all recognition," and "kissoff" becomes "Thank you for your suggestion; it has been forwarded to the appropriate department for review." AutoHotKey is even smart enough to ignore incidental abbreviations buried in other words, so "atmosphere" doesn't become "at the momentosphere."

You Can Do Anything—but Seek Help First

You can also carry out a sequence of commands from a single hotkey, as long as you end the sequence with the "return" keyword (Figure 3). The flexible (albeit sometimes confusing) scripting language lets you simulate mouse clicks, read and write text files, display balloon-tip messages, override Windows' default keystroke combinations, control speaker volume, change the opacity/transparency of windows, and more. You can even "compile" your scripts into standalone EXE files and then run them on other PCs without having to install the full AutoHotKey package. Nearly everyone will need to peruse the enormous help file to accomplish any of this, however. AutoHotKey also has an active forum that provides, among other things, sample scripts and community support.

What AutoHotKey lacks, though, is context awareness. If you want to personalize a canned email reply spit out by an AutoHotKey script, you'll have to do it by hand. But here's a tip: If you need a more personalized touch and you happen to use Mozilla Thunderbird, try the QuickText extension (extensions.hesslow.se/extension/4/Quicktext/), which can grab names and other cues from your outgoing message and use them in your reply. So, instead of "Dear Customer," your canned response could automatically begin, "Dear Miss Teschmacher."

The beauty of AutoHotKey, though, is that it can be used anywhere. If you're able to use the same shortcuts in Gmail, Excel, Photoshop, and World of Warcraft, it might finally be worth your time to write a macro or two.

Read more »

Create Navigation Buttons for your Blog

Many blogs and websites feature "navigation button" links like a menu at the top of the page or beneath the header. This can be really helpful for readers to navigate to areas of interest in your blog, such as the home page, about page and contact links.

In this tutorial, I'll explain a very simple (but effective) method of creating such a "navigation buttons" for your own blog, which you can use to add easily accessible links to your post pages.

To create these buttons for your blog, we don't need to use any external images! With a little CSS styling, you can easily create navigation buttons which change color when your mouse hovers over them, making it easier to see that these are indeed clickable links. This style of button is helpful to your visitors and invites them to view the important pages you link to using these links.

There are two main steps to creating these buttons for your blog:

1. Add some styling code to your blog's template
2. Create a new HTML/Javascript widget, and create your links

You can use these links anywhere in your blog that you are able to place an HTML/Javascript widget, such as your sidebar, the header section, or above your blog posts.

Here are the steps in detail:

Add some code to the style section of your blog template

The "style" section of "layouts" blogs is contained between the <b:skin> and </b:skin> tags in your template. The simplest way to add extra styling code is to place this just after the closing tag (key CTRL+F to easily find this in your template).

The styling code used for the buttons featured above is as follows:

a.navigation {

background: #000000;

color: #ffffff;

margin: 1px;

padding: 5px 35px 5px 5px;

border-width: 0;

text-transform: uppercase;

text-decoration: none;

font-weight: bold;

}

a.navigation:hover {

background: #5d5d54;

text-decoration: none;

}

If you copy and paste this code just before the closing </b:skin> tag in your blog template, you will easily be able to create your navigation buttons. If you prefer, you can change the color of the backgrounds (highlighted in red) to colors which better suit your blog. You can easily find the hex values for the colors you need by using this handy Color Calculator .

You will notice that there are two statements in this styling: the first defines what the buttons will look like as they appear in your blog, while the second (hover) statement defines the background color of the button when you place your cursor over the button (the "mouseover" effect).

Create your links in an HTML/Javascript widget

Once you have added this style code to your template, you should save your template and go to the layouts section of your blog (Template>Layout). Here you should create a new HTML/Javascript widget where you would like your buttons to appear.

In this new widget, you should add your links in the following format:

<a class="navigation" href="http://your-link-url.blogspot.com">Your link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your second link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your third link</a>

Be sure to replace "http://your-link-url.blogspot.com" with the URL of the post page (or link) you would like the button to link to, and replace the link text (eg: Your Link) with the text you would like to display.

Once you have created your links (you can add as few or as many as you like), save your HTML/Javascript widget, and take a look at the effect in your blog.

How this works

The styling code we add to the template creates styling rules for "anchor links" which are given the class of "navigation". We can use different "classes" to create different effects for elements which appear in your blog layout; the class we give for the navigation links does not affect other links in your template, only those which have the class of "navigation".

With a few tweaks, you can change the style of these buttons to completely blend with the overall appearance of your blog template, and create attractive clickable buttons to your important pages which your visitors will love.

Read more »

Stop Blogger from turning all your text into CAPITALS

Blogger makes your post footer, blog footer, profile widget and header text turn out in uppercase letters by default, and this of course, sucks like a black hole for some (I know it does for me). To remedy this, just do the same procedure as with eliminating borders (see above) but instead of searching for "border:", search for "text-transform:" and eliminate every instance of it. Change "uppercase" to "none".

Read more »

Web Color Calculator: Find the Hex Values for your favorite colors

Use this color calculator to find the HEX and RGB values for the colors you would like to use in your blog or website.

ColorCalc 1.0 is a freeware Javascript applet written by Hendrik Schreiber.

Read more »

HACKED!!! Supercharge Firefox For Speed Surfing

Nowadays THE most popular freeware is the Mozilla Firefox browser. As a huge Firefox fan, I wanted to give you some tips on increasing the speed when surfing the web using Firefox!

First of all I suggest you to download and Install Mozilla Firefox. In my opinion, its the best browser available. Download it here.

Some obscure preferences exist that affect the network performance and display performance of Firefox. They're the equivalent of special hardware tweaks that enthusiasts use to make your CPU run faster. There are security implications to modifying the network performance. They might make you a hazard as you burn down the street. There are also stability risks in cranking up the display performance. Such tweaks are really meant only as debugging tools. If you can't keep your hands off the engine, here's how to proceed without warranty.

The following preferences might not make you a good web citizen, but they'll get you as much bandwidth as you can manage. Note, however, that too many simultaneous network connections will just slow you down. The best possible performance occurs when there's one connection only and the remote web server is blindingly fast. If web servers or other hops in the network are comparatively slow, try playing with these many preferences.

As all we know Firefox is more flexible than other browser out there. Firefox can be tweaked by editing some preferences in it. For this operation we want to open Firefox editing surface, by typing about:config command in your url bar and press Enter on your keyboard.

After that search the following preferences that I indicate by green color or just copy them and past them in firefox filter bar.

Turn the following preferences on by double clicking on them.network.http.pipelining /* default = false */ double click on this for change it to TRUE

network.http.proxy.pipelining /* default = false */ double click on this for change it to TRUE

Search the following integer and change it to 30. This means it will make 30 requests at once.network.http.pipelining.maxrequests change its value to 30.

After that Right click anywhere and select
New-> Integer.
Name it “nglayout.initialpaint.delay” and set its value to “0″. This value is the amount of time the browser waits before it acts on information it receives.

You can make your Firefox browser much faster by doing adjustment I posed above. Those adjustments are very common and you can find them by go surrounding the web much easier. But when I became an advanced Firefox user I wanted more options for speeding my browser than those I mentioned above. I found the following preferences and they work well for me. So I thought I would post them here as well as the very "common" tricks I showed you above.

If preferences name doesn't exist in your browser don't be concerned. It is not your doing. If some preference doesn't exist just follow last adjustment we did at the above of this post.

Right click anywhere and select
New-> Integer or Boolean ( If change we are going to do is a Number it should be a Integer / If change true or false it's a Boolean )

And set it's name and value as I given:
Name it "xxxxxxxxxxxxxxx” and set its value to “xxxx″ or "false" or "true"

* browser.tabs.showSingleWindowModePrefs - true -- ( boolean )

* network.http.pipelining.firstrequests - true -- ( boolean )

* content.notify.backoffcount - 5 -- ( Integer )

* ui.submenuDelay - 0 -- ( Integer )

* content.interrupt.parsing - true -- ( boolean )

* content.max.tokenizing.time - 2250000 -- ( Integer )

* content.notify.interval - 750000 -- ( Integer )

* content.notify.ontimer - true -- ( boolean )

* content.switch.threshold - 750000 -- ( Integer )

* network.http.max-connections - 48 -- ( Integer )

* network.http.max-connections-per-server - 24 -- ( Integer )

* network.http.max-persistent-connections-per-proxy - 16 -- ( Integer )

* network.http.max-persistent-connections-per-server - 8 -- ( Integer )

* network.dns.disableIPv6 - true -- ( boolean )

* network.http.request.timeout - 300 -- ( Integer )

By adjusting these settings in Firefox you can make your browser super faster..

Read more »