вторник, 2 декабря 2008 г.

Как сделать кат (cut) в Blogger, так же как это можно в Livejournal? Post Summaries.

Как сделать сообщения, убирающиеся под кат в Blogger, также как можно сделать это в Livejournal?

Это важная и полезная вещь, особенно если вы используете виджет со ссылками на близкие по тематике сообщения после поста.
По правде говоря, я уже нашёл по крайней мере три, если не больше, способов это реализовать.
У способов есть свои плюсы и минусы.

Другие способы сделать кат: второй способ и третий способ.

Вот один из них.
Он хорош тем, что с его помощью можно развернуть сообщение на странице блога, даже не заходя в него.
Т.е. представьте себе, что на главной странице у вас есть несколько, убранных под кат сообщений, в которых видны только первые один-два абзаца.
Так вот, этот способ позволяет развернуть сообщение, даже не уходя с главной страницы.
Под постом будет ссылка "More..." (или любое другое слово, которое вы захотите), и после нажатия на неё пост автоматически развернётся, даже без необходимости переходить на другую страницу (к примеру страницу этого самого поста).

Минус: при заходе на саму страницу поста этот кат также действует. То есть читателю придётся лишний раз нажимать на ссылку "развернуть".
Кроме этого, там же где была ссылка "развернуть" после этого самого разворачивания на том же самом месте появится ссылка "свернуть", которая будет несколько разрывать тело сообщения.

Реализация:
Как обычно, не забываем сделать резервную копию своего шаблона и сохранить её на своём жёстком диске.
Затем идём в макет/изменить HTML.
И там, сразу после тега <b:skin> вставляем код:

    .expand
    {
        display: inline;
    }
    .collapse
    {
        display: none;
    }

А сразу перед этим же тегом <b:skin> вставляем код:

<script type="text/javascript" language="javascript">
    //<![CDATA[
    function toggleMore() {
    var currentText = this.innerHTML;
    if (this.nextSibling.nodeName == "#text") {
    this.parentNode.removeChild(this.nextSibling);
    }
    if (currentText == "More...") {
    this.innerHTML = "Hide <br />";
    this.nextSibling.className = "expand";
    }
    else {this.innerHTML = "More...";
    this.nextSibling.className = "collapse";
    }
    }
    function attachHndlr() {
    var anchors = document.getElementsByName("ToggleMore");
    for (var i = 0; i < anchors.length; i++) {
    anchors[i].onclick = toggleMore;
    anchors[i].href="#" + i;
    }
    }
    //]]>
    </script>

Потом заменяем тег <body> тегом <body onload='attachHndlr();'>

Сохраняем темплейт.
Потом идём в настройки/форматирование.
Находим там внизу строку "шаблон сообщения", и вставляем в рамочку эти строки:

    <a href="#" name="ToggleMore">More...</a><span class="collapse">

  </span>

Этот последний код вы будете видеть в теле каждого вашего нового сообщения при его написании.
То, что будет написано до всего этого кода - не попадёт под кат и будет видимо при просмотре с главной страницы.
Текст, который вы хотите скрыть (поместить под кат) вы должны помещать между тегами

<span class="collapse"> и </span> 

Слово "More..." вы можете заменить на любое своё. Но если вы заменяете его на своё - то, после щелчка по нему мышкой, на месте ваших слов всё равно появится слово "More...", которое читателю придётся щёлкнуть ещё раз, чтобы развернуть пост. Поэтому, чтобы терпение читателей не лопнуло - лучше не меняйте слово "More...".
И вообще, этот способ из-за всех его недостатков мне не нравится.
Я б его не использовал (и не использую).
Хотя я его потестил - работает.

P.S .: Да, чуть не забыл. Способ найден здесь.

16 комментариев:

  1. ОК! А какой из трёх указанных способов сам автор здесь использует?
    Вроде, и виджет со ссылками на близкие по тематике сообщения есть указанных здесь "минусов" нет...

    ОтветитьУдалить
  2. Вот этот получился НАКОНЕЦ-ТО :)
    С первого раза!
    Спасибо!!!!!!

    ОтветитьУдалить
  3. Очень интересно, конечно, но эти способы можно применить, насколько я понял, с шаблонами - макетами, а как быть с классическим шаблоном? Или какой-то способ подходит и для них?

    ОтветитьУдалить
  4. Аноним, я не знаю =)
    Рекомендую посмотреть в англоязычном хелпе по Блоггеру.
    У меня нет ни одного блога на классическом шаблоне, поэтому такой проблемы не появлялось.

    ОтветитьУдалить
  5. Привет всем.Хочу показать свою реализацию скрытия текста. Заинтересовал меня эффект открытия и скрытия текста по клику. Вот какое решение я нашел: http://ptc-payback.blogspot.com/
    Так мне понравилось, что убрал "читать дальше".
    Применил практически на всех страницах но более наглядно в разделе FAQ и Рефералы.

    ОтветитьУдалить
  6. Здравствуйте, у меня после вставки пишет"Найдено несколько виджетов с идентификатором HTML10. Идентификаторы виджетов должны быть уникальными. Что делать?

    ОтветитьУдалить
  7. Желтухина Маргарита Владимировна, попробуйте заменить в одном из виджетов HTML10 на что нибудь другое, например HTML11.

    ОтветитьУдалить
  8. Подскажите, пожалуйста, как избавиться от надписи в блоге undefined?

    ОтветитьУдалить
  9. Желтухина Маргарита Владимировна, а где она у вас появилась? Впервые слышу.

    ОтветитьУдалить
  10. Здравствуйте, я создаю новый блог. Применила новый шаблон, так там уже есть эта надпись. Зайдите на мой блог, может что подскажите, как избавиться?
    http://margaritavlad1.blogspot.com/

    ОтветитьУдалить
  11. Желтухина Маргарита Владимировна, попробуйте найти в коде шаблона это слово и удалить его. Предварительно сохранив шаблон, на всякий случай.
    Никогда не имел дело с таким шаблоном, так что наверняка сказать не могу.

    ОтветитьУдалить
  12. Спасибо большое за ответ. Обязательно попробую. А также спасибо за понятное объяснение - как сделать кат, получилось с первого раза.

    ОтветитьУдалить
  13. хмм сейчас попробую, как раз ищу что-нибудь подобное

    ОтветитьУдалить