tag:blogger.com,1999:blog-68273632805925329572024-02-08T08:24:51.703+02:00cat **/* | grep яAkshaalhttp://www.blogger.com/profile/05677582369584740657noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-6827363280592532957.post-81237875653937678422009-03-06T18:29:00.005+02:002009-03-08T14:03:10.681+02:00Related Posts / Похожие темыНаписал расширение (widget) для тем blogger'а. Расширение отображает список постов похожих по меткам. Данное расширение отличается от всех прочих Related Posts Widget'ов тем, что <b>очень легковесно и не замедляет загрузку страницы браузером</b>, так как выполняет дополнительные запросы к серверу параллельно (асинхронно) с загрузкой страницы. Более того, записи сортируются не только с учетом даты написания постов, но и <b>с учетом релевантности (по меткам)</b>. Так как у меня несколько блогов и мне не хочется заниматься рутиной, то я постарался написать виджет как можно более простым для установки.<br /><br />Итак, чтобы установить это расширение в своем блоге, необходимо произвести две довольно простые модификации HTML шаблона (HTML Template'а). Для этого нужно открыть <b>Настройки (Settings) -> Макет (Layout) -> Изменить HTML</b>. Перед тем как менять что-то далее, сделайте резервную копию шаблона (<b>Загрузить весь шаблон</b>)! После чего нужно пометить галочкой <b>Расширить шаблоны виджета (Expend Widget Templates)</b>. После чего можно приступать к редактированию:<br />1. В поле с текстом шаблона нужно найти строку <b><data:post.body/></b>. И вот сразу за этой строкой нужно аккуратно вставить следующий код:<pre><div caption='Похожие темы:' 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><br /></pre><ad></ad>Должно получиться что-то типа вот этого (на картинку можно нажать и нормально рассмотреть):<br /><a href="http://picasaweb.google.com/lh/photo/O8Slxb1iCNPJc0Ot6zdHew?authkey=Gv1sRgCMTt-MKs5cTh6wE&feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgydhmILw0Ij901VKFPayYNihoT8BEF39V_U7VGAca_lxHRGjkzH0a9rgSFtnyhDoiTwYH1fTmIO4WK-o37Pws5Qa2mRyttCYDz1GPICvlvRU9jDiCx9fz48OzD8nqzHKG14i31ZHQNxalZ/s400/rus.png" /></a> Обратите внимание на caption='...' и max='8' Значения в кавычках можно изменить. Значение для <i>caption</i> определяет текст, который будет высвечиватся над списком похожих постов. Значение <i>max</i> определяет максимальное количество элементов в списке.<br />2. Это изменение вобщем-то и не обязательно, все должно заработать и без него. Но выглядеть оно будет не очень. Поэтому, этим шагом производится настройка внешнего вида. Для этого необходимо найти строку <b>]]></b:skin></b>. И <b>перед(!)</b> этой строкой вставить вот такой кусок настроек:<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>Если есть желание и знание css, то можно тут подкрутить стили как душе угодно. Должно получиться как-то вот так:<a href="http://picasaweb.google.com/lh/photo/1KWdAkPHB-8HbUACiKYfZA?authkey=Gv1sRgCMTt-MKs5cTh6wE&feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtW9CaKo2vS_b33DaaW1I4jvimzUinXB6m6NdS95AL0JkhwM9l3IHh0px5r1r6HGr3gCD3p_XyZma2DZPpUlGXUQDY-wSuH1EKAw3aCcfE-qKlw3GWs_q7T2q2wM1ibfqjCXna_lAhx2Tz/s400/css.png" /></a><br /><ad2></ad2>Это все. Можно сохранять шаблон и пробовать.Akshaalhttp://www.blogger.com/profile/05677582369584740657noreply@blogger.com0