tag:blogger.com,1999:blog-62738186848314543062024-03-18T11:48:25.542+02:00cat **/*Akshaalhttp://www.blogger.com/profile/05677582369584740657noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-6273818684831454306.post-42323063544377975982009-03-06T19:49:00.004+02:002009-03-08T14:02:10.967+02:00Async Related Posts WidgetI have finally implemented a feature I wanted to have on my blog. It is Related Posts Widget, but not just Yet Another Related Posts Widget. It differs form all other widgets that show related posts. It has features that no other widget has (yet at least):<br />1. It sorts related posts not only by date, but by <b>relevance</b>!<br />2. It is <b>small</b>. It is <b>fast</b>. It is <b>asynchronous</b>!. It is just AJAX :).<br />3. It is <b>easy</b> to install. It is very crucial point for me because I maintain a bunch of blogs and I don't want to waste my time doing coplicated setups for each blog over and over again.<br /><br />So, lets install the widget in a blog. The installation process constists of two simple modifications to the blog HTML Template. Go to <b>Settings -> Layout -> HTML Template</b>. But <i>Before</i> you start doing any modification, make a backup of your template (<b>Download full template</b>)! Now you are ready. The option <b>Expend Widget Templates</b> should be checked. Then follow the steps below:<br />1. Find string <b><data:post.body/></b> in your template code. Right <b>after(!)</b> this string, insert the snipped below:<pre><div caption='Related posts:' id='akRelatedPosts' max='8'/><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><script language='javascript' type='text/javascript'><br />(function(_1,_2){var _3={};var _4=_2.length;var _5=function(_6){var _7=&quot;([0-9]{4})(-([0-9]{2})(-([0-9]{2})(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(.([0-9]+))?)?(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?&quot;;var d=_6.match(new RegExp(_7));var _9=0;var _a=new Date(d[1],0,1);if(d[3]){_a.setMonth(d[3]-1)}if(d[5]){_a.setDate(d[5])}if(d[7]){_a.setHours(d[7])}if(d[8]){_a.setMinutes(d[8])}if(d[10]){_a.setSeconds(d[10])}if(d[12]){_a.setMilliseconds(Number(&quot;0.&quot;+d[12])*1000)}if(d[14]){_9=(Number(d[16])*60)+Number(d[17]);_9*=((d[15]==&quot;-&quot;)?1:-1)}_9-=_a.getTimezoneOffset();time=(Number(_a)+(_9*60*1000));return Number(time)};var _b=function(){var _c=[];for(var i in _3){_c.push(_3[i])}if(_c.length&lt;1){return}var _e=document.getElementById(&quot;akRelatedPosts&quot;);if(!_e){return}var _f=_e.getAttribute(&quot;max&quot;)||5;_c=_c.sort(function(a,b){var _12=b.weight-a.weight;if(_12!=0){return _12}return b.date-a.date});var s=&quot;&lt;ul&gt;&quot;;for(var i in _c){if(_f--&lt;1){break}var _14=_c[i];s+=&quot;&lt;li&gt;&lt;a href=&#39;&quot;+_14.href+&quot;&#39;&gt;&quot;+_14.title+&quot;&lt;/a&gt;&lt;/li&gt;&quot;}s+=&quot;&lt;/ul&gt;&quot;;var _15=_e.getAttribute(&quot;caption&quot;);s=&quot;&lt;span class=&#39;caption&#39;&gt;&quot;+_15+&quot;&lt;/span&gt;&quot;+s;_e.innerHTML=s};var _16=function(_17){for(var i in _17.feed.entry){var _19=_17.feed.entry[i];var _1a=_19.id[&quot;$t&quot;];var _1b=_3[_1a];if(_1b){_1b.weight++}else{var _1c;for(var _1d in _19.link){if(_19.link[_1d].rel==&quot;alternate&quot;){_1c=_19.link[_1d].href;break}}if(_1c==_1){continue}_1b={weight:1,title:_19.title[&quot;$t&quot;],date:_5(_19.published[&quot;$t&quot;]),href:_1c};_3[_1a]=_1b}}if(--_4==0){_b()}};var _1e=function(_1f){var _20;try{_20=new XMLHttpRequest()}catch(excp1){try{_20=new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;)}catch(excp2){try{_20=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;)}catch(excp3){_20=false}}}var _21=function(){if(_20.readyState==4){if(_20.status==200){_16(eval(&quot;(&quot;+_20.responseText+&quot;)&quot;))}}};_20.open(&quot;GET&quot;,_1f,true);_20.onreadystatechange=_21;_20.send(null)};for(var _22 in _2){_1e(_2[_22])}} <!-- = = = = = endoffunc = = = = = = --><br />)(&quot;<data:blog.url/>&quot;,[<br /><b:loop values='data:post.labels' var='label'><br /> &quot;/feeds/posts/default/-/<data:label.name/>?alt=json&amp;max-results=5&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><br /></b:loop><br />]);<br /></script><br /></b:if></pre><ad></ad>You should end up with something like this (click on the picture to open a full-size version):<br /><a href="http://picasaweb.google.com/lh/photo/vp8KXBOLZ3SC7Y_p36AILA?authkey=Gv1sRgCMTt-MKs5cTh6wE&feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3q3NHxW34YjmA35EHpexe9BZvAyCl-af4tq633xxbPR5kLd-S0BpSqB3eM4FstRTFvcXtFlX-ALyo3sxHWoyL96uiWOJ4FZMKdjJv-Jl_ZX9whJASjNrwMyS7o95woF-ZnExqYH5rsjVe/s400/eng.png" /></a> Pay attention to <i>caption='...'</i> and <i>max='8'</i> You may consider to edit these values. A value for <i>caption</i> defines text to be shown above a list of related posts. And <i>max</i> defines a number of displayed relevant posts. <br />2. This step is optional. Everything should start working without it, but the widget will not be nice-looking. That is why you may want to complete it. So find the string <b>]]></b:skin></b>. And insert the following css snippet <b>before(!)</b> the string:<pre>#akRelatedPosts {<br /> padding-top: 20px;<br />}<br /><br />#akRelatedPosts .caption {<br /> font-weight: bold;<br />}<br /><br />#akRelatedPosts ul {<br /> margin: 0;<br />}</pre>If you think you have knowledge of css, you can tweak the styles below as you like. Finally you should see a picture like the following (click on picture to see full-size version):<a href="http://picasaweb.google.com/lh/photo/1KWdAkPHB-8HbUACiKYfZA?authkey=Gv1sRgCMTt-MKs5cTh6wE&feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyjUC7PMUS-G33pNZ6g9FWvIu_jZhI2Zc2s0DdmfELO4s9ppi47Sod_wRyLR9oNMozXCGGuVK0vC9T1GpT_FWq_r8C6qopR6PpL7Zel6XLm4z0J-cfjL6GQYicJmtZEypy4_jXvE1Slrp1/s400/css.png" /></a><br /><ad2></ad2>That is all. You can save your template and check your posts.Akshaalhttp://www.blogger.com/profile/05677582369584740657noreply@blogger.com0tag:blogger.com,1999:blog-6273818684831454306.post-52225456239219756832009-02-21T22:34:00.003+02:002009-02-22T13:49:08.520+02:00Google Blogger & AdSenseBlogspot had build-in way to insert AdSense ads in blog. But for some reasons it was not enough for me. For instance, I wanted to leverage channels feature of Google AdSense, but it was impossible with build-in AdSense widget. On the other hand, Google Blogger made it possible to edit a blog template, even insert arbitrary Javascript code. So I decided to go this way to insert my custom adsense code. It seemed to be simple to do, but I wasted 3 hours of my time trying to make it work. For these 3 hours I had been trying to understand why a code generated by AdSense and inserted into HTML Template of my blog didn't work.<ad></ad> Instead of any advertisement I saw empty space where an advertisement should be. And even empty space was of wrong size (not the size I chose for the unit). An investigation revealed some details. With a help of firebug I discovered that browser sent a request to http://googleads.g.doubleclick.net and got response 400 Bad Request. Why request was baaaaad, adsense server didn't bother to tell. I compared behavior of an adsense unit that was working and behavior of the non-working unit. I noticed that the non-working unit didn't provide a client id and other info to the AdSense server in request, there values were undefined. The reason for the response 400 was clear now. I suspected that problem could be in javascript code generated by AdSense. The code looked like this:<pre><script type="text/javascript"><b><!--</b><br />[... something like var blah=blah-blah-blah; ...]<br />//<b>--></b><br /></script></pre><ad2></ad2><br />Although there was nothing wrong with this code, I considered to remove <b><!--</b> and <b>//--></b> chunks. The chunks I removed were there just to support old browsers or browsers without javascript turned on. And it helped! Everything went fine. But AdSense prohibited any modifications to generated code. And then I suspected a problem with HTML Template itself, not with AdSense code. I rewrote code to make it look like this:<br /><pre><script type="text/javascript"><b>&lt;!--</b><br />[... something like var blah=blah-blah-blah; ...]<br />//<b>--&gt;</b><br /></script></pre><br />And that worked as well!<br /><br />There is a possible reason for this. It looks like BlogSpot engine parses template to some internal structure. And then, from this internal structure (DOM tree) it generates HTML code. And the problem is that it doesn't preserve new line characters inside a comments <!-- -->. A browser cuts off this comment before javascript engine begins it work.Akshaalhttp://www.blogger.com/profile/05677582369584740657noreply@blogger.com0