Альтернативная реализация сообщений под катом с визуальным эффектом

Недавно я уже рассматривал одну из возможностей публикации сообщений под катом для Blogger – после каждого поста добавлялась надпись «Читать далее» со ссылкой на страницу с полным текстом заметки. Сегодня предлагаю рассмотреть второй вариант реализации поставленной задачи. Особенностью этого способа есть то, что при клике на ссылку «Читать далее», переход на другую страницу не производится, продолжение текста отображается сразу после анонса и без обновления страницы в браузере.

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 &lt; spans.length; 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 &lt; spans.length; 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 &lt; spans.length; i++) {
     if (spans[i].id == "fullpost") {
         spans[i].style.display = 'none';
         found = 1;
     }
     if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
         spans[i].style.display = 'none';
}
}

</script>
</b:if>

Вы можете скачать этот код здесь.

3. Поставьте галочку в поле «Расширить шаблоны виджета» в правом верхнем углу над полем шаблона. После этого найдите в коде блок с id=’post’, у меня эта строка имеет вид:

<b:includable  id='post' var='post'> 

Далее аккуратно вставьте в код часть кода, выделенную красным цветом ниже:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
  <a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
  <data:post.title/>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

  <p><data:post.body/></p>

<b:else/>
  <style>#fullpost {display:none;}</style>
  <p><data:post.body/></p>
  <span id='showlink'>
    <p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
  </span>
  <span id='hidelink' style='display:none'>
    <p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>
  </span>
  <script type='text/javascript'>
    checkFull("post-" + "<data:post.id/>");
  </script>
</b:if>

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

Вы можете скачать этот код здесь.

После этого сохраните шаблон, нажав соответствующую кнопку.
Если возникло сообщение с ошибкой, то восстановите сохраненный ранее исходный код шаблона и попробуйте выполнить шаги 2-3 еще раз.

Добавить код у меня также получилось не сразу, судя по наблюдениям, вставлять первую его часть (шаг 2) требуется без включенной опции «Расширить шаблоны виджета», хотя сказать, что проблема скрывается именно в этом наверняка сказать не могу.

4. Теперь чтобы скрыть часть текста в сообщении нужно использовать следующую конструкцию:

Вступление для поста <span id=»fullpost»>продолжение текста</span>

5. Если вы хотите добавить визуальный эффект для отображения/скрытия текста сообщения, то добавляете перед тэгом </head> код:

<script type="text/javascript" src="https://anniyalogam.com/scriptaculous/src/prototype.js">
<script type="'text/javascript'" src="'http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=">
<script type="'text/javascript'">
var fade = true;
var peekaboo_bgcolor = '#ffffff';
</script>

Причем переменная peekaboo_bgcolor должна совпадать с цветом фона вашего шаблона. Если это не так – укажите вместо используемое значение.

Далее находите в коде похожую конструкцию и удаляете код, выделенный красным:

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

После внесения всех изменений, сохраните шаблон.

При подготовке материала использовались источники:
Читать дальше-2 или внедряем Peekaboo view в Blogger (рус)
Blogger hack: Expandable posts with Peekaboo view (eng)

Поскольку я не прячу сообщения под катом, то продемонстрировать работу механизма, увы, не могу. Тем не менее, я пробовал его на одном из тестовых блогов – код полностью работоспособен. Пример выполнения скрипта можете глянуть на этом блоге.