January 2009

AJAX Labels Reloaded

Saturday, January 31, 2009 at 1:14 PM Posted by Souras

The AJAX Labels is back with more features! I was planning to release this with my new template, but the template design is slipping beyond schedule.
Note: If you want to integrate AJAX Labels with Phydeaux3's Label Clouds, read this post and come back here.
Some of the new features are:

Built-in navigation system.
More user customizability. (You don't even need to know coding for that!)
Support for Unicode Categories in IE.
More user-friendly installation. (Code to be copied/modified in template is reduced)

The installation of this hack afresh would be easy. But upgrading from my previous version is a bit knotty. Anyway, I will explain both. If you get stuck, feel free to comment and I'll be there to help. FRESH INSTALLATION Click here for Up gradation instructions. If you already have AJAX Labels installed, you can directly jump to up gradation instructions. Like the first version, this one too needs the Prototype JS framework. You can either store it in a location of your preference, or use the location that I've given below. First of all, back up your template. It is always a good idea to back up your template, so that you can revert if you mess things up. 1. Click Page Layout->Edit HTML. Check the box saying "Expand Widget Templates" Look for the </head> tag in your template. Insert the following code just above that.

<style type='text/css'>                

#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}                 

#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}                 

.search-result-meta {background:#EFEFEF;padding:2px;}                 

.search-result-meta img {border-width:0;vertical-align:text-bottom;}                 

.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}                 

.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}                 

.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}                 

.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}                 

</style>                 

<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' />                 

<script type='text/javascript'>                 

//<![CDATA[                 

// User customisable parameters                 

// ----------------------------                 

// maxresults - Number of results to show per page                 

// navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.                 

// feedLabel - Text to show for the label feed link.                 

// catLabel - Label for categories.                 

// closeLabel - Label for Close button. You can use hypertext also.                 

var maxresults = 5;                 

var navFlag = 1; //ON by default                 

var feedLabel = "Subscribe to";                 

var catLabel = "Sorted into:";                 

var closeLabel = "Click to close";                 

//]]>                 

</script>                 

<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />

Note: You can avoid the prototype script addition line if you already have added the prototype.js script to your template (It is quite likely, if you have added some hack to your blog). If you don't understand what I'm saying, never mind. Now the customization part. See the snippets in red above. Those are the stuff which you can customise. Just above that I have written comments on what each represent. To customize them, you just need to modify them to the appropriate value. For example, if you want to change the close button text from "Click to close" to, say, "[X]", then simply change "Click to close" in the red area to "[X]". Navigation Feature: The navigation feature allows pagination of the results. So you can view all the results in several pages. maxresults and navFlag together determine how it is shown. navFlag is the parameter saying whether you want this feature or not. The number of results shown per page will be decided by maxresults. The number of pages will be calculated automatically. Eg: Lets say, you have 13 posts with a particular label in your blog. Case 1: maxresults=5 and navFlag=1 You will have 3 pages (peekaboo blocks) with 5 results each. There will be a navbar which will let you go to any of those 3 pages. Case 2: maxresults=5 and navFlag=0 You will have a single page with 5 recently updated posts with the particular label. You won't be able to view other results Case 3: maxresults=20 and navFlag=1 You will have a single page with 13 results (Because 13 is less than 20). If you know CSS, you can modify the look of your result block as well. 2. Locate the following code in your template:

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

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Replace it with this:

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



<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>

3. Optional:If you have the labels widget in your template.

Locate the following code in your template:

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>

Replace it with this:

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat

(\"" + data:label.name + "\",null)"' ><data:label.name/></a>
</b:if>

4. Click on the button below.

<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif" /> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><span id="preserve28e29bc50e8543bdbc285c3b47ad246c" class="wlWriterPreserve"><script type="text/javascript">document.write(closeLabel);</script></span></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"><span id="preservee463285a218e49dfabc9efcfc5e8ae87" class="wlWriterPreserve"><script type="text/javascript">document.write(closeLabel);</script></span></div></div>This will take you to an Add Widget Screen. Select your blog and click on Add widget. 5. Save your template. That was a breeze, wasn't it? UPGRADATION Caution! If you are installing AJAX Labels for the first time, don't proceed any further. You are already finished with your installation. This section is only for upgrading from the previous version. 1. Back up your template first. (Be pessimistic in these matters ;) ) 2. Go to Edit HTML. Look for my previous installation of Javascript. It is very easy to find. It is enclosed within  and  Delete that entire portion. 3. Now check Step 1 of the FRESH INSTALLATION section. Follow that step and come back here. 4. Search for the following snippet in your template. '"javascript:getCat(\"" + data:label.name + "\")"' There will be two places where this occurs. Replace both places with this '"javascript:getCat(\"" + data:label.name + "\",null)"' 5. Save your template and go to page layout screen and delete the HTML/Javascript widget you had created when you installed the previous version. 6. Go to step 4 of FRESH INSTALLATION section. Follow that step and come back here. 7. Save your template and you are done. There! That was not very difficult. ACKNOWLEDGEMENTS Tsung-Kai Chen - For his several comments and the bugs he found in the previous version. Bahram - For the heads up on the Unicode Category issue in IE. Update 1: The code had minor syntax errors (due to wrong copy paste)because of which the hack was not working. Problem is fixed now. Reinstalling the hack will make it work. Update 2: Drat! Another silly mistake. The Close button was not working. I've fixed this. Just delete the widget and add it again (Step 4) . You don't have to redo any other steps. Update 3: Arrgh!! Another bug. I have made the corrections. You will have to redo Steps 2, 3 and 4. This will remove support for the rel-tag microformat. I will release an update if I find a way to work around that.

Javascript Redirect Traffic from Blogspot to WordPress Site

Friday, January 30, 2009 at 11:53 AM Posted by Souras

Ok. So you’ve had a blogspot blog for a little while and you’ve decided you want a WordPress site. How do you redirect traffic from the old site to the new site and lose as little traffic as possible in the process.

First. Use the import feature available in WordPress. From your Daskboard, look for Tools > Import

Second. Add some javascript code to your blogger template. Update the vars blogTitle and wordPressUrl to match your blogspot blog.

<script> var blogTitle = 'Flexing My Kerkness'; var wordPressUrl = 'http://kerkness.ca';

if( document.title == blogTitle ){
window.location = wordPressUrl;
} else {
var newUrl = str_replace( document.title, blogTitle+’: ‘, ” );
window.location = wordPressUrl + ‘/?s=’ + newUrl;
}
function str_replace(haystack, needle, replacement) {
var temp = haystack.split(needle);
return temp.join(replacement);
}
</script>

Basically what this script does is redirects from your blogger site to your new domain while conducting a search based on the title of page being requested.

For example. If you had a post called “How to change outboard motor oil” on blogger. When you try and access the blogspot url for that post you will be directed to the new wordpress domain and you will search for posts matching “How to change outboard motor oil”. If that post was imported into word press and you haven’t changed the title. Users will be shown a link to the post on your new site. Also they may find any new or relevant content you’ve posted since making the change to WordPress.

Show Limited Number of Labels in Widget.

Thursday, January 29, 2009 at 11:04 AM Posted by Souras

As you write more and more posts you will keep adding labels to them to categorize your posts. You can add more than one label to any single post. Labels are useful as they serve as keywords channelling traffic to your posts through search engines like Technorati.

However the list of labels in your blog can get to be very long stretching your sidebar until y

our blog post looks like a flag on top of a long sidebar. To prevent this you can modify the code of your Labels widget to show only the topmost labels in your blog..............

LIMIT LABEL NUMBER

To limit the number of labels shown in your Labels sidebar widget login at Blogger.com and click 'Layout' link on Dashboard. The Page Elements subtab of Template tab will open. If you do not have a Labels widget in the sidebar Add a Labels Page Element to it.

After the Labels widget is added click on Edit Html subtab of Template tab. This will open the Template code box on the Edit Html subtab. Click the Expand Widgets Template checkbox on top of the Template code box to put a check mark in it. The Template code box will show the expanded widgets templates.

Scroll down in the Template code box to locate the code for the Labels widget. This will look like this :

<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'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

REPLACE THE WHOLE ABOVE CODE WITH THE CODE BELOW :

<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>
    <ul>
      <script type='text/javascript'>
        var labelnum = 0;
        <b:loop values='data:labels' var='label'>
        if (<data:label.count/> &gt; 2) {
           document.write(&quot;<li><a expr:href='data:label.url +  "?max-results=100"' 
rel='nofollow'><span><data:label.name/></span></a>(<data:label.count/>)</li>&quot;);
        }
        </b:loop>
      </script>
    </ul>
 <b:include name='quickedit'/>
</b:includable>
</b:widget>

The code above will only show labels with more than two posts. To increase number of labels increase the number two in this code :

if (<data:label.count/> &gt; 2) {

Multi-Pinging Tools Compared.

Tuesday, January 27, 2009 at 10:49 AM Posted by Souras

Everytime you make a post to your blog or update it you have to ping the search engines

to notify them of the changes you have made. I have dealt with this in an earlier post : Pinging Simplified. There are some sites which can ping multiple engines for you in one click. Here I have compared several such tools......

There are several sites where you can submit your blog url and click the Ping button to notify the search engines and directories of new content. These are :

1. Autopinger.com
2. Pingoat.com
3. Pingomatic.com
4. Blogflux Pinger.
5. Feedburner Pingshot.
6. Feedping.com

Except for Feedburner just go to the respective site and paste your blog url and click on the Ping button after publishing a new post. For feedburner login to your account click on your blogname (You should have claimed your blog first as shown in Feedburner and Blog feeds.) and click on Publicize tab at top. Then click on Pingshot in the sidebar. Choose the services you wish to ping and click Save. Now these services are automatically pinged on publishing a new post.

Add Widget to provide Button-Link to your Blog.

Saturday, January 24, 2009 at 10:19 AM Posted by Souras

You can now add a widget to your blog with a button which when clicked adds a button link to your blog from the reader's blog. This is done automatically without the reader having to type in even a line of code.....

First create a button by going to http://cooltext.com/Buttons and create a button for your blog. Then upload this button picture to a freehost like Googlepages and copy down the url of the picture. Let us call it : URL OF YOUR BUTTON PICTURE.

To do this go to Layout from the Dashboard after logging in to your account. In the Page Elements section click on Add Page Element link in the sidebar. In the new pop up window which opens choose Html/Javascript option. In the content section paste the following code :

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="FAVOURITE" name="widget.title" type="hidden"/>

<textarea style="display:none;" name="widget.content">

</textarea>
<input
value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>

<input
value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>

<input value="LINK TO THIS SITE" name="go" type="submit"/>
</form>
<p>Click above button to get a button link to this blog</p>

In the middle code replace the Capital letters with the appropriate values. Add all the above code in blue including the code in the middle picture. Click on picture to enlarge it. Then save the widget.

View blog. You will see below button in your sidebar:

When a reader clicks on this button he is taken to a page where he has to select his blog where he wants to add the link to your blog as shown below :

Here the reader can change the Title and edit the content if he/she wants. On clicking Add Page Element the link is added to the Page Elements tab in the sidebar of his blog. He/She can then rearrange its location in the blog by drag and drop method.

Using this method I have added it to my blog in the right sidebar at the bottom.