Факт: 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"));
}
);
}
