Как сделать расширенное резюме поста, анонс "Читать далее..."

8 нояб. 2008 г. ·

Все сталкивались с проблемой больших постов которые тянуться далеко в низ и портят вид блога, поэтому существует очень хороший способ прятать большую часть текста под кат а видимым оставлять только анонс. Существует два способа прятать текст под кат
1. Простой я его потом опишу он легче но на мой взгляд не удобный, потому как "Читать далее..." отображается в каждом посте и при нажатии на него начинает обновлять или открывать новое окно.
2. По сложнее но дело того стоит, я выбрал именно его для своего блога. В отличии от первого способа при нажатии на ссылку "Читать далее..." он просто раскрывает остальной текст поста без надобности обновления страницы. Ну что поехали...

1. Идем Макет>Изменить HTML и сохраняем шаблон, это важно.
2. Теперь перед тегом </head> вставляем следующий код, сохраняем:

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

</script>
</b:if>


3. Находим <div class='post-body' теперь внимание добавляем только то что выделено красным:

<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>

<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

4 Идем Настройки>Форматирование в пункт Шаблон сообщения вставляем следующий код и сохраняем

<span id="fullpost"">

</span>

Если вы все сделали по инструкции то все должно работать как у меня.
PS Возникнут проблемы или вопросы прошу в комменты.

8 коммент.:

3tx комментирует...
3 апреля 2009 г. в 19:10  

А для чего это собственно нужно?

Tn Pegas комментирует...
8 апреля 2009 г. в 16:57  

Для быстрого поиска например.

Анонимный комментирует...
16 июня 2009 г. в 22:49  

А напишите пожалуйста как сделать вот такую как у вас бегающую менюшку сбоку

Tn Pegas комментирует...
17 июня 2009 г. в 01:58  

Уже мой друг, уже написал http://tnpegas.blogspot.com/2008/11/navbar.html

Пользуйтесь на здоровье!

DekSter комментирует...
23 июля 2009 г. в 14:48  

Хмм, странно.. Tn Pegas, а я когда нажимаю "Прочитать полностью..." у тебя в блоге, то открывается новая вкладка )

Tn Pegas комментирует...
23 июля 2009 г. в 23:33  

Все правильно, я пользуюсь другим способом. Так что не бойтесь все здесь в порядке с этим мануалом)))

Tn Pegas комментирует...
23 июля 2009 г. в 23:34  

А пост я изменить забыл, исправлю.

Максим комментирует...
19 февраля 2011 г. в 17:23  

спасибо. все получилось

Отправить комментарий

Подписка на блог

Подпишитесь в ридере или, через электронную почту:
Введите ваш E-MAIL адрес:
Поиск Google: