Blogger eXtensions

So long and thanks for all the fish!

2010-08-25T19:18:00.000-06:00

I am moving on to other ventures and will no longer be maintaining this blog!

Live long and prosper!

Blogger in Draft now has tracking!

2010-07-30T18:43:00.001-06:00

Check it out at: http://bloggerindraft.blogspot.com/2010/07/introducing-blogger-stats.html

You soon may be able to say goodbye to Stat Counter, Analytics or Site Meter!

Automatic Jump Breaks - bxA2

2010-06-03T19:51:00.032-06:00

Background
bxA started out as an expandable post summary hack that required editing your template to paste in a bit of CSS, Javascript and XML[bxA].

bxA2 can be placed in an HTML/Javascript widget!

You can even use Blogger's jump break feature and bxA2 automatic jump breaks together!

Installation
Copy and paste everything in the box below into an HTML widget ...

<script type='text/javascript'>
var bxA = {};
bxA.vSize = 250;
bxA.vRatio = 1.5;
bxA.vDot3 = '...';
bxA.vMore = 'More &raquo;';
bxA.vClass = 'bxAlink';
</script>
<style>.bxAlink{display:inline;clear:both;float:right;z-index:3;position:relative;margin:0px;padding:3px 4px;text-decoration:none !important;font-size:0.9em;line-height:1em;border:1px solid #336699;background-color:#B0C4DE;}.bxAlink:hover,.bxAlink:active{  background-color:#FFD363;border:2px solid #D2B48C;padding:2px 3px;}</style><script type='text/javascript'>function bxAE(a){return document.getElementById(a)}function bxAC(c,a,b){var d,t,r,s,l,f,i,j,x;d=(a)?a:document;t=(b)?b:'*';r=[];s=d.getElementsByTagName(t);l=s.length;f=' '+c+' ';for(i=0,j=0;i<l;i++){x=' '+s[i].className+' ';if(x.indexOf(f)!=-1){r[j++]=s[i]}}return r}function bxAH(h){var t=h;t=t.replace(/<script(.*?)>((.|\n)*?)(<\/script>)/gi,' ');t=t.replace(/<.*?>/g,' ');t=t.replace(/\s/g,' ');t=t.replace(/[ ]{2,}/g,' ');t=t.substring(1);return t}function bxAS(e,h){var a,s,i,q,b,c,d,f,g,x;b=[];c=e.innerHTML;d=bxAH(c);f=bxA.vRatio;g=bxAC('jump-link',e,'div');if(g.length>0){return}x=c.indexOf('[bxA');if(x>-1){a=c.substring(0,x);s=bxAH(a);f=0.1;if((d.length-s.length)==(c.indexOf(']',x)-x+2)){return}}else{s=d.substring(0,bxA.vSize);b=s.split(' ');for(i=0;i<b.length;i++){q=c.indexOf(b[i],q)}a=c.substring(0,q)}if((d.length)>(s.length*f)){e.innerHTML=a+bxA.vDot3+'<\/textarea>';e.innerHTML='<div style="display:inline;">'+e.innerHTML+'<\/div><a class="'+bxA.vClass+'" href="'+h+'"\/>'+bxA.vMore+'<\/a><div style="clear:both"\/>'}}function bxAI(){var e,p,l1,l2,i,a,h,ih,b;if(arguments.callee.done){return}arguments.callee.done=true;e=bxAC('post-body',bxAE('main'),'div');p=bxAC('post',bxAE('main'),'div');l1=p.length;l2=e.length;for(i=0;i<l1;i++){if(l2>1){a=p[i].getElementsByTagName('a');h=a[1].getAttribute('href');bxAS(e[i],h)}ih=e[i].innerHTML;b=ih.indexOf('[bxA');if(b>-1){e[i].innerHTML=ih.replace(ih.substring(b,ih.indexOf(']',b)+1),'')}}}if(document.addEventListener){document.addEventListener('DOMContentLoaded',bxAI,false)}(function(){/*@cc_on try{document.body.doScroll('up');return bxAI()}catch(e){}/*@if(false)@*/if(/loaded|complete/.test(document.readyState)){return bxAI()}/*@end@*/if(!bxAI.done)setTimeout(arguments.callee,30)})();if(window.addEventListener){window.addEventListener('load',bxAI,false)}else if(window.attachEvent){window.attachEvent('onload',bxAI)}</script>

How do I ...

How do I style my bxA2 jump breaks?
- The variable bxA.vClass contains the style class name for your bxA2 jump breaks. The 'bxAlink' style can be used as an example to start with.
How do I force the summary to occur at a specific point?
- Type in the code "[bxA]" anywhere in a post to override the automatic summary length or use a Blogger jump break!
- To force a post to always display, type the "[bxA]" code at the end of the post.
How do I control whether to display a short post instead of displaying a summary?
- The variable, bxA.vRatio, controls how much larger the post has to be than the summary. In the default code, it is set to '1.5', which means the raw text of the post has to be at least 1.5 times the size of the summary in order for the summary to be displayed with a bxA2 jump break.
How do I always display the summary and a bxA2 jump break, even if there are only a few words displayed after the bxA2 jump break is clicked?
- Change the variable, bxA.vRatio, to '0.1'.
How do I turn off the default configuration and only have a summary appear on a post that I specifically want it to?
- Change the variable, bxA.vRatio, to '100000'. Insert the "[bxA]" code into your posts where you want a summary to be displayed.

bxA2 has been tested, as of June 21st, 2010, using Windows XP and the most recent stable versions of: Safari, IE, Firefox, Opera and Chrome.

Post Summaries v1.1.4 - Sunset!

2009-05-18T11:42:00.026-06:00

Check out bxA2 »!

Background
I was looking for the ability to display the first few lines of a post and a link to the rest of the post, where the link would either expand the post inline, or jump to the single post page view. Most of all, I didn't want to edit existing posts and I didn't want to segment a post by wrapping a section with <span> tags[bxA].

I didn't find a "post summaries" hack that fit my requirements, so I wrote my own ...

Since this was my first blogger extension/hack, I gave it the rather unexciting acronym of "bxA".

With bxA, at a minimum, you can specify how much of a post you want to be automatically displayed as part of the summary and what behaviour you want for the link: expand/collapse the post inline or jump to a single post page.

Installation:

Click [Layout] ...
Click [Edit HTML] ...
Click [Download Full Template], and save a copy of your existing template.
Check [Expand Widget Templates] ...
In your template, search for "]]></b:skin>" and replace it with a copy of the code from here.
bxA is currently configured to display the first 30 words of your post as the summary (bxA.sDs=30; bxA.sDt='w';). The "read more" link is configured to expand/collapse the post inline (bxA.dPa='i';).
For example, if you want bxA to only show the first 10% of your post and jump to the single post page when the reader clicks on the "read more" link, you would change the following in the code that you just pasted in: bxA.sDs=10; bxA.sDt='p'; bxA.dPa='p';
After you have finished configuring how you want bxA to behave, search for "<data:post.body/>" in your template.
Replace "<data:post.body/>" with the code from here.
Click on [Save Template] ...
Done!

How do I ...

How do I style my "read more" link?

The variable bxA.lCn can contain the class name for the style you wish to use to style your "read more" link. The 'bxAlink' style can be used as an example to start with.

How do I force the summary to occur at a specific point?
- Insert the code "[bxA]" anywhere in a post to override the configured summary length.
- To force a post to always display, place the "[bxA]" code at the end of the post.
- To force the summary to never display, place the "[bxA]" code at the beginning of the post.
How do I change the display post action for a single post?

To change the display post action to display inline, use the "[bxAi]" code!
To change the display post action to display the single post page, use the "[bxAp]" code!

How do I control whether to display a short post instead of displaying a summary?
- The variable, bxA.pSr, controls how much larger the post has to be than the summary. In the default code, it is set to 1.5, which means the raw text of the post has to be at least 1.5 times the size of the summary in order for the summary to be displayed with the "read more" link.
How do I always display the summary and "read more" link, even if there are only a few words displayed after the "read more" link is clicked?
- Change the variable, bxA.pSr, to '0.1'.
How do I turn off the default configuration and only have a summary appear on the post that I specifically want it to?
- Change the variable, bxA.sDs, to 1000000. This will effectively turn-off the automatic summary creation. Insert the "[bxA]" code into the posts where you want a summary to be displayed.

bxA 1.1.4 has been tested, as of May 15th, 2009, using Windows XP and the most recent stable versions of: Safari, IE, Firefox, Opera and Chrome.

How do I hide the Blogger navigation bar?

2009-03-13T11:04:00.029-06:00

To hide the Blogger navigation bar, you can add the following into your template's style sheet:

#navbar-iframe {
display: none;
visibility: hidden;
height: 0px;
}

Or, if you would rather not edit your template and want to have the ability to hide/show the navigation bar, you can copy and paste the code below into an HTML/Javascript widget:

<!-- bxC -->
<!-- bxC check box -->
<form name="bxCF" style="display:inline;">
<input name="bxCC" checked="checked" style="vertical-align:middle;" onclick="bxCH(this.checked);" type="checkbox"/>
<span style="vertical-align:middle;">
<i>Hide the Blogger navigation bar</i>
</span>
</form>
<!-- /bxC check box -->
<script type="text/javascript">
var bxC={};bxC.v=bxC.h=bxC.d=false;
function bxCH(c) {
var e=document.getElementById('navbar-iframe');
var x=document.bxCF.bxCC;
if (x) {x.checked=c;}
if (e) {
if (!bxC.h) { 
bxC.h=e.getAttribute('height');
bxC.d=e.getAttribute('display');
bxC.v=e.getAttribute('visibility');
}
e.style.display = c?'none':bxC.d;
e.style.visibility = c?'hidden':bxC.v;
e.style.height = c?'0px':bxC.h;}
}
bxCH(true); // true turns off the navbar
</script>
<!-- /bxC -->

Note, if you do not want the "Hide the Blogger navigation bar" check box, delete everything between the "" and "" lines.

bxC has been tested, as of June 23, 2010, using Windows XP and the most recent stable versions of: Safari, IE, Firefox, Opera and Chrome.

Translation widgets ...

2009-03-12T11:44:00.006-06:00

Encoded eMail address

2009-03-02T22:27:00.067-06:00

I was searching today for something to obfuscate an eMail address, such that it would display correctly on the browser page, but not in the page source ...

If you have any questions, please send me an eMail at: acheron1357@gmail.com

Google Analytics, Stat Counter or Site Meter?

2009-02-26T17:50:00.047-06:00

Google
Analytics

Stat Counter

Site Meter

Google Analytics

After signing up for Google Analytics, the best place to insert the tracking code is right before the </body> tag in your template. The tracking code does not display a visit counter or a Google Analytics graphic.

I originally had the Google Analytics tracking code inserted right before the </body> tag, when I decided to cut and paste it into a gadget. Unfortunately, I assumed that the Google Analytics tracking code hadn't been modified by Blogger. Not so. Blogger changed the double quotes into single quotes. I only discovered my error when Google Analytics reported zero visitors for the previous day. If you are moving the Google Analytics tracking code around, make sure you start with a fresh copy of it from your Google Analytics account. Finding that fresh copy is a bit clunky ... on the "Website Profiles" page, click the [Edit] link, then click the [Check Status] link in the top right.

Blocking your own IP address uses regular expressions and Google Analytics provides a page to quickly build the regular expression needed for an IP address range.

Google Analytics gathers tracking information on a day by day basis. Statistics are available only up to and including the previous day. Interesting to note, Google Analytics gathers a visitor's IP address, records the geographic location of the ISP associated with the visitor's IP address, and then discards the IP address. Google Analytics does not record visitor IP addresses.

Stat Counter

After signing up and creating a project, the Stat Counter tracking code can be inserted right before the </body> tag in your template or by using a Blogger HTML/Javascript gadget.

Blocking IP addresses, like your own, is simply a list of addresses using the "*" symbol as a wildcard.

Stat Counter gathers tracking information in real-time. The free version only retains detailed information on the last 500 visitors. However, Stat Counter can export the detailed visitor data to a CSV file. Tracking totals are retained indefinitely.

Site Meter Basic

Signing up for Site Meter Basic is slightly different than Google Analytics and Stat Counter. With Google Analytics and Stat Counter, you create an account and then, within that account, you create profiles/projects that allow you to track a website. With Site Meter Basic, each website tracked ... is the account. To sign up for Site Meter Basic is quicker and easier than Google Analytics and Stat Counter. Site Meter Basic leads you through a series of forms, emails the account/project name and password, and provides a bookmark link to quickly access the tracked site's statistics.

Site Meter Basic tracking code can only be inserted right before the </body> tag in your template. It cannot be inserted into a gadget ... correction, I could not get it to work as a gadget and Site Meter only recommends inserting it in before the </body> tag.

In Site Meter Basic, there is only the option to block your local sub-net.

Site Meter Basic gathers tracking information in real time. One feature that I really like, is the ability to view, in one page, all the information about a single visitor.

Initial reaction?

Google Analytics is ideally suited for a website that has large volumes of traffic. Detailed information is not available about a specific visitor.

The free version of Stat Counter is targeted at someone who has several smaller websites or blogs and would like to track down to the individual visitor, using a centralized console.

Site Meter Basic is targeted at someone who wants to add visitor tracking to their blog or personal web presence.

Conclusion?

I'm keeping Stat Counter and Google Analytics!

Site Meter Basic ... is too clunky to administer multiple instances; is too clunky when trying to navigate the reporting console; and is too clunky when displaying graphics. Compared to Stat Counter and Google Analytics, Site Meter Basic is just ... you guessed it! Too clunky!

Search Engine Optimization (SEO) for Blogger/Blogspot

2009-01-29T11:47:00.091-06:00

Background information on this hack can be found by searching Google.

Installation
• Click [Layout] ...
• Click [Edit HTML] ...
• Click [Download Full Template] ... save always, save often!
• In your template, search for "<data:blog.pageTitle/>" and replace with:

<!-- bxB -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<!-- /bxB -->