Blogger eXtensions: post summaries

Thursday, June 3, 2010

Automatic Jump Breaks - bxA2

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.

Monday, May 18, 2009

Post Summaries v1.1.4 - Sunset!

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.