Cut для blogspot

Факт: blogger.com не умеет делать cut хоть сколько-нибудь элегантно. Погуглив, нашёл решение от PhoeniX'a, основанное на сворачивании блоков с классом "cut" посредством и динамическом из разворачивании яваскриптов. В нём были две вещи, которые мне не очень нравились. Во-первых, человек без яваскрипта не видел ни кнопку развернуть, ни остатка текста. Ну и чисто из идеалогических соображений, мне не нравилаль необходимость лезть в скрипт, чтоб поменять картинки.

Моя версия работает вообще без картинок, и позволяет указывать текст для ката. Установка почти аналогична установке скрипта-оригинала.

1. Необходимо подключить библиотеку jquery и сам скрипт сворачивания. Также надо добавить стили для кат-блока (класс cut) и блока с кат-надписью (класс cut_toogle_text).

<script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.2.1.pack.js'/>
<script type='text/javascript' src='http://4me.net.ru/ln/script4blogger2_noimgs.js'/>
<style>
<b:if cond='data:blog.pageType != "item"'>
BODY.js .cut {display:none;}
<b:else/>
.cut {display: block;}
</b:if>
.cut_toogle_text  {color: #336699; cursor: pointer; display: inline; font-weight: bold;}
.cut_toogle_text:hover  { text-decoration: underline;}
</style>

Внимание, мой скрипт для ката является "живым", так что если вы ссылаетесь на него, и вдруг начнут выскакивать алерты - не пугайтесь ;)

2. Далее, надо сделать так, чтоб при загрузке к BODY добавлялся класс js (чтоб каты сворачивались).

Для этого сразу после тэга BODY добавьте:

<script type='text/javascript'>
   $("BODY").addClass("js");
</script>

3. Теперь сделаем так, чтоб в посте, открытом отдельно, ничего не сворачивалось.

Поставьте галочку на пункте "Расширить шаблоны виджета" и замените строку <data:post.body/> на

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='data:post.id' class='pxpostwrap'>
<data:post.body/>
</div>
<b:else/>
<data:post.body/>
</b:if>

4. Осталось добавить кат-блог

Оберните часть поста, которую надо свернуть, в div блок с классом cut. Если хотите, можете переопределить кат-надпись в атрибуте alt

<div class="cut" alt="Здесь будет cut">
Этот текст будет свёрнут.
</div>

Ну и напоследок, пример использования и текст текущей версии скрипта

/*
Published under GNU GPL2
Author Leonid "PhoeniX" Ponomarev
Edited by Vah aka Anton Bakhtin 
*/
$(document).ready(initCut);

var cut_settings={'more_text': 'Читать далее...', 'less_text': 'Свернуть'};

function initCut()
{
 $("div.pxpostwrap div.cut").each(function(){
  var alt=$(this).attr('alt');
  if (!alt) alt=cut_settings['more_text'];
  pc=$("P", this).size(); var pc_string="абзацев";
  if (pc%10==1) pc_string="абзац";
  if (pc%10==2 || pc%10==3 || pc%10==4) pc_string="абзаца";
  alt=alt + " (" +pc + " " + pc_string + ")";
  $(this).after("<div class=\"cut_toogle_text\" alt=\"" + alt + "\">" + alt + "</div>");
 });
 $("div.cut_toogle_text").toggle(
  function(){
   $(this).text("Загрузка...").prev().fadeIn("slow",
    function(){$(this).next().text(cut_settings['less_text']);}
   );
  },
  function(){
    $(this).prev().fadeOut("fast");
    $(this).text($(this).attr("alt"));
  }
 );
}