суббота, 6 декабря 2008 г.

Сделать кат в Blogger. Один из лучших способов.

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

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

Идём в макет/изменить HTML и ставим галочку на "расширить шаблоны виджета".
Теперь нам надо добавить код прямо перед тегом </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>


Затем, в коде своего блога вам надо найти строку вида:

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

Но в разных темплейтах она может быть несколько другой. К примеру вот такой:

<div class='post-body>  или такой:

<p><data:post.body/></p>   или такой:

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

   </div>

Вообщем найдите (используйте Ctrl+F, это удобно) у себя тег <data:post.body/> или его вышеприведённое подобие у себя в коде.

Вот. Далее внимание.
Чуть выше его будет строка, которая в разных темплейтах тоже может немного разниться. Она имеет такой вид (3 варианта):
div class='post'

div class='entry'

div class='post-body entry-content
 
 
Если у вас вообще взятый незнамо откуда темплейт - эта строка может иметь и немного другой вид.
Так вот, дальше вам надо изменить и дополнить эту строку следующим образом.
Её начало мы оставляем нетронутым, а потом добавляем только то, что выделено голубым цветом, ровно так, как указано ниже:


<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'>Читать дальше......</a>
       </span>
       <script type='text/javascript'>
         checkFull("post-" + "<data:post.id/>");
       </script>
     </b:if>

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


Обратите внимание, на закрывающий значёк " ' " сразу после первых букв "div class='post-body - если вы забудете его, то темплейт не сохраится и выдаст ошибку.

Всё, если вы всё сделали так как тут сказано - сохраняйте шаблон.
Затем идите в настройки/форматирование.
В рамке внизу, над которой значится "шаблон сообщения", добавляем строки:

Превью поста

<span id="fullpost">

То, что скрыто под катом

</span>

Эти строки теперь будут видны нам при написании всякого нового сообщения в режиме редактирования HTML.
Соответственно, то, что нам надо поместить под кат - мы помещаем между вышеуказанными тегами вместо слов "То, что скрыто под катом".
То, что надо оставить видимым - над ними, то есть вместо слов "Превью поста".

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

О том, как дополнительно настраивать положение в сообщении и вид букв "Читать далее..." я собираюсь написать в одном из следующих постов. Впрочем думаю, что многие из вас и сами догадаются как это сделать.
Кроме этого, я там собираюсь написать ещё и о возможных ошибках (и возникающих из-за них проблемах) при реализации этого способа и их исправлении.
А ещё об одном возможном глюке, который, впрочем, я лично не встречал и у меня его не появлялось (а я вставлял этот код на трёх блогах).
...А то что-то уже поздновато, а я спал меньше чем нужно; а мне нужно ещё кой-чего делать за компом, связанное с работой...
Да, чуть не забыл. Автор этого способа и то, откуда все это взяли: Hackosphere.

74 комментария:

  1. Спасибо за этот способ.
    Однако меня устраивает предыдущий, не вижу в нем для себя каких-то существенных недостатков.
    А что все же со сторонними скриптами, google, как я проверил, не дает на своих sites вставлять скрипты. Получается в пределах сервиса google положить скрипт-файл некуда?

    ОтветитьУдалить
  2. Да, прямо в страницы ява-скрипты в гугл-сайтс вставлять нельзя =(
    Хотя, насколько помню, я видел ссылки на скрипты, которые хранились на их сайтах... Как это реализовано-не знаю (может я и что-то путаю).
    Они, случаем, не могут считываться с файла txt?
    Типа как тут:
    http://sites.google.com/site/tilromen/antiseo-s-store/Kod_vidget_recent_posts_2.txt

    Я никогда сам не хранил там ява-скрипты чтоб их оттуда запускать, так что просто предполагаю.

    ОтветитьУдалить
  3. Это лучший способ ката который я видел, спасибо. Подписался на новости ;)

    ОтветитьУдалить
  4. получилось с 55 раза. код первой вставки (что перед тегом /head) не виден у тебя на странице. знаешь? пришлось лезть к автору способа Hackosphere за кодом. тоже, конечно, полезно...
    а так работа оч нужно-важная. у мну все ж получилось же... спасибо!

    ОтветитьУдалить
  5. Странно, у меня всё прекрасно отображается (раньше и в данный момент тоже).
    Первый код хранится у меня на Google sites, и подгружается оттуда. Видимо в тот момент сервис у них тормозил (что большая редкость) или был недоступен.
    Либо у вас в браузере не не читается тег <iframe>.
    Рад что оказался полезен, спасибо за комментарий - позже проверю отображаемость кода ещё раз.

    ОтветитьУдалить
  6. А у меня вообще все пропадает из блога когда я так делаю..
    Уже раз 10 пробовала..
    Не подскажите в чем может быть побелема?

    ОтветитьУдалить
  7. Svetlana Planets, а у вас классический шаблон или макет?

    ОтветитьУдалить
  8. Здравствуйте. Не видно кода в белом квадрате? Может быть это только у меня так. Пробовала первый метод, ничего не получилось. А очень хочется найчиться скрывать сообщения.

    ОтветитьУдалить
  9. Спасибо большое. Разобралась. Скопировала код у Hackosphere.

    ОтветитьУдалить
  10. Спасибо большое. Получилось с первого раза.
    Вы так подробно и четко все описали. Всю последовательность и возможные ошибки.
    Супер!
    Ещё раз благодарю.

    ОтветитьУдалить
  11. Раз уж это такой замечательный способ, немогли бы подправить (или изменить) в первом коде (белом квадрате) что то, а то действительно не видно ничего там ((

    ОтветитьУдалить
  12. Мне всё видно.
    Вы каким браузером пользуетесь?
    Этот код подгружается в окне из другого ресурса, который, впрочем, хорошо работает.

    ОтветитьУдалить
  13. Internet Explorer, но как я вижу - не у одного меня такая проблема...((

    ОтветитьУдалить
  14. Melnar Tilromen,все сделал как указано в примере, все получилось, огромное спасибо!!

    ОтветитьУдалить
  15. Прекрасно, что всё заработало.
    Не знаю, что за проблема - я ни разу не видел чтоб код пропадал...

    ОтветитьУдалить
  16. Melnar Tilromen, извеняюсь за наглость, но не подскажете, где у меня может быть ошибка? Проблема в чом: все вроде как работает, но под кат абзацы убираются в хаотичном порядке, то есть середина и пару абзацев в конце поста могут уйти под кат, а последняя часть записи остается на главной страницы.

    ОтветитьУдалить
  17. У меня такой вопрос, а RSS этод метод обрезает?

    ОтветитьУдалить
  18. Zefir, у меня примерно такое было под Google Chrome. Не знаю, как насчёт Интернет Эксплорера...
    Хром неправильно отображает кат, несмотря на то, что в других браузерах он отображается правильно.
    Такое возможно и само по себе, безотносительно к браузеру - если в пост затесался один или несколько лишних тегов </span>.

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

    ОтветитьУдалить
  19. Еще раз презнателен. Попробывал просто публиковать через "Изменить html", а не через "Создать". Так действительно могу видеть теги и лишний раз их не трогать ))

    ОтветитьУдалить
  20. Не знаю почему, но у меня в посте остаётся нереально много места до надписи "Читать Дальше", приходится долго прокручивать, чтобы вообще узнать, что такая надпись есть. Если же зайти в сам пост (уже внутрь, где ката нет), то всё идеально, без лишних пробелов. В чём может быть причина?

    ОтветитьУдалить
  21. Спасибо, все получилось с первого раза.
    Правда теперь не получается "втюхать" между постами(в конце) блоки Адсенсе, как решить такую проблему? Причем ни в статьях с катом, ни без ката?

    ОтветитьУдалить
  22. Helenika, проблема, наверное, в том, что в вашем шаблоне есть что-то ещё, что вызывает такой эффект. Так как с таким шаблоном я дела не имел, то не могу сказать ничего конкретного.

    DiVolk, как вариант попробуйте убрать код ката, вставить рекламу, и если она правильно отображается - поставить код ката. Не уверен что поможет, т.к. сам рекламу между постов не вставлял, но попробовать стоит.

    ОтветитьУдалить
  23. Melnar Tilromen, спасибо за этот способ!
    Один вопрос только - у меня в постах, где я не добалвяю кат, он все равно есть. Это баг, фича, или у меня что-то не так? Макет стандартный "Simple"

    ОтветитьУдалить
  24. Timmytitty, Такого быть не должно.
    Смотрите, чтобы в режиме редактирования HTML-кода поста внизу не оставалось тегов
    <span id="fullpost"> и </span>

    ОтветитьУдалить
  25. Melnar Tilromen, точно не остается, однако, кат все равно есть.
    Еще баг - я кат добавлял по инструкции в старый шаблон, затем перешел на новый - в нем кат появился сам. Так должно быть?

    ОтветитьУдалить
  26. Timmytitty, иногда то что было в старом шаблоне перетекает в новый. Я нажимал "Восстановить шаблоны виджетов по умолчанию" в "редактировать HTML" и обычно всё становилось на свои места.
    В любом случае - можно там же в редактировании HTML убрать ненужные части кода, если они остались.
    То что кат есть там где нет нужных тегов - странно. Не знаю отчего так.

    ОтветитьУдалить
  27. гранмерси, помогло

    ОтветитьУдалить
  28. А фид получается урезанный? Или, что-то не так сделано?

    ОтветитьУдалить
  29. DiVolk, нет, фид остаётся полный (если конечно, его не урезали фидбёрнером или в настройках блоггера).

    ОтветитьУдалить
  30. Немного модифицировал скрипт - теперь можно прямо в тексте поста определить какой текст будет у ссылки ката
    Если хотите, могу поделиться

    ОтветитьУдалить
  31. При использовании этого способа у меня появляется такая проблема: под кат прячется только первый абзац текста, все остальное, что по моей задумке тоже должно быть спрятано, "всплывает" над катом. Чтобы убрать под кат другие абзацы, приходится лезть в html-код поста и вручную убирать теги span до и после каждого из них.
    Спрашивается: это только у меня так, или это нормально? И как с этим можно бороться?
    Использую Opera 9.64, если это имеет значение. Спасибо.

    ОтветитьУдалить
  32. Александр, это скорее всего происходит оттого, что вы вставляете кат в режиме редактирования HTML, а затем снова переключаетесь в визуальный редактор.
    Вставлять кат в тело поста надо в самом конце. В противном случае, при переключении обратно в режим визуального редактора тег span будет появляться в каждом абзаце поста после тега span id="fullpost".
    Визуальные редакторы вообще, бывает много глюков делают иногда.

    ОтветитьУдалить
  33. Я внедрил код в темплейт, после чего добавил указанные строки:
       Превью поста
       span id="fullpost"
       То, что скрыто под катом
       /span
    ...как стандартный шаблон для новых сообщений, поэтому в режим редактирования HTML я бы вообще не лазил - просто писал бы свой пост, если бы не эта досадная неурядица.

    Но ваш совет мне понятен, большое спасибо, я попробую.

    ОтветитьУдалить
  34. Да, точно, только что попробовал еще раз: создал Lorem ipsum на несколько абзацев, убрал 2-3-4 абзацы под кат, опубликовал - все это только в визуальном редакторе, в хтмл не совался. Результат - под катом только второй абзац )':

    Похоже, придется вставлять span'ы в готовое сообщение, а от изменения стандартной формы нового сообщения придется отказаться.

    ОтветитьУдалить
  35. Александр, а как вы "только в визуальном редакторе" проставили нужные теги?

    Механизм должен быть следующий: вы пишите пост в визуальном редакторе. При необходимости правите что-то в HTML-редакторе.
    Но теги, отвечающие за кат, нельзя вставлять в тело поста перед тем, как вы снова будете заходить в визуальный редкатор.
    Их надо ставить в самом конце, в режиме HTML-редактирования
    .

    Как-то был глюк с браузером Google Chrome - в нём кат не работал. В Опере работал.

    ОтветитьУдалить
  36. Как вы и сказали в тексте поста:
    „В рамке внизу, над которой значится "шаблон сообщения", добавляем строки:
    ...
    Эти строки теперь будут видны нам при написании всякого нового сообщения в режиме редактирования HTML.“
    ____
    ...Соответственно, когда я создаю новое сообщение, эти теги там уже прописаны и мне без надобности лезть в HTML-редактор.

    Ну да ладно, это мелочи. Все равно спасибо за способ.

    ОтветитьУдалить
  37. О дружище ты лучший!
    ТОлько по твоему объяснению осилил эту штуку :)

    ОтветитьУдалить
  38. Я ламер, но вычитал, что поисковики не индексируют информацию в кате, если использовать display:none. Поэтому использую "быстро-мгновенный" кат . Хотя у него масса недостатков. Но он не скрывает информации от поисковиков. Например:

    Четыре ключевые слова спрятаны под катом:
    "sooner or later comes"
    Но Гугл их нормально проиндексировал:
    http://www.google.com.ua/search?hl=ru&q=http://crazyamazy.blogspot.com/+sooner+or+later+comes&btnG=Поиск&meta=

    Хочется заменить "мгновенный" кат на нормальный, но боюсь использвать "display:none". Можно ли его юзать?

    Можно попросить,кто шарит: дать отзывы по поводу сайта http://crazyamazy.blogspot.com
    Нормально грузится или медленно?:\
    Корректно ли отображается в браузерах...?
    Спасибо за инфу! Там в чат или в комментах..или на почту DeXtR2006(gaf)mail.ru

    ОтветитьУдалить
  39. Sunny, у меня всё нормально индексируется.
    Ваш блог грузится долго.

    ОтветитьУдалить
  40. 2 Melnar Tilromen .. а как же это дело ускорить? Это из-за этих глупых виджетов и гаджетов внизу? Или из-за хостинга картинок...?(искал куда написать личное сообщение.. не нашел)

    ОтветитьУдалить
  41. Sunny, большей частью, думаю, именно из-за картинок. Когда их много - всегда долго грузится. Впрочем это зависит от того, насколько быстрый интернет у того, кто просматривает.
    Можете уменьшить количество отображаемых постов на главной странице.

    ОтветитьУдалить
  42. Работает! Давно хотел такой кат, после ухода из ЖЖ не хватало.

    ОтветитьУдалить
  43. спасибо, теперь хоть какая-то красота появилась =)

    ОтветитьУдалить
  44. По какой причине Фаерфокс не обрабатывает этот кат? На главной появляются все посты целиком, а кнопка "читать дальше" - под каждой моей записью, в самом конце.
    В Опере при этом все работает.

    ОтветитьУдалить
  45. Александр, у меня так же было раньше, только с Chrome.
    Но сейчас всё в порядке и там тоже.
    Постарайтесь добавлять теги ката в режиме html-редактирования и в последний момент перед публикацией. И не переключайтесь после этого в режим визуального редактора.
    Единственное, что могу посоветовать.

    ОтветитьУдалить
  46. Ура! Спасибо большое. У меня всё получилось с первого раза. Здорово!

    ОтветитьУдалить
  47. Обратите внимание, на закрывающий значёк " ' " сразу после первых букв "div class='post-body - если вы забудете его, то темплейт не сохраится и выдаст ошибку.

    >>>>>>>>>> Что надо сделать какие кавычки поставить нужно. А то у меня ошибку выдает

    ОтветитьУдалить
  48. У меня почему-то в полной новости и короткая тоже отображается.Как сделать чтобы этого избежать?

    ОтветитьУдалить
  49. Спасибище вам огромное. Давно искала хороший способ привести в порядок блог. Не с первого раза правда, но получилось. Хорошо, что написали про визуальный редактор, а то я не могла понять откуда столько spanов...

    ОтветитьУдалить
  50. Julia Presentime, сейчас кат в блоггере уже есть встроенный:

    http://seorussian.blogspot.com/2009/09/kat-v-blogger-teper-vstroen-ura.html

    ОтветитьУдалить
  51. А у меня не получилось внести эти изменения. Я не поняла во второй части с голубым цветом. Там оба этих абзаца копировать, или только один? Если оба, то я не могу найти куда вторую часть голубого вставлять. У меня на blogspot нет такой

    ОтветитьУдалить
  52. Спасибо большое! У меня хоть не сразу, но все получилось :)

    ОтветитьУдалить
  53. Спасибо -всё толково! а то лень было возиться сначала, а потом щелкнул обычный кат в Визуальном Редакторе - и на главной странице только один пост с катом, а на следующий PR упал с 2 до 0 ..чего такое?!..

    ОтветитьУдалить
  54. Царевна, так ведь сейчас кат в блоггере уже по умолчанию встроен!

    ОтветитьУдалить
  55. а вот как сделать кат для rss канала мне до сих пор не ясно((

    ОтветитьУдалить
  56. bitrateQZ - а это очень просто.

    Зайдите в настройки Blogger / Канал сайта. И выберите "короткий".

    А для продвинутого ката в rss воспользуйтесь
    http://feedburner.google.com

    ОтветитьУдалить
  57. спасибо! всё заработало.

    есть ли что-нибудь новее?)

    ОтветитьУдалить
  58. bitrateQZ, теперь в канале RSS команда Blogger тоже сделала кат. Можно сделать так, чтобы он начинался там же, где вы ставите кат в журнале.
    Загляните в настройки.

    Туманов Сергей, да в Blogger уже давно есть собственный встроенный кат. Обратите внимание в режиме визуального редактора.

    ОтветитьУдалить
  59. Всё сделала как вы писали в статье по сворачиванию текста. Но не получилось. Кнопка читать есть, текст спрятан под катом, но не раскрывается. Что делать???

    ОтветитьУдалить
  60. Veronika, Вам это уже не нужно, ибо: http://seorussian.blogspot.com/2009/09/kat-v-blogger-teper-vstroen-ura.html

    ОтветитьУдалить
  61. А как вы поняли, что он встроен. Тогда почему у меня не получается открыть скрытый текст?

    ОтветитьУдалить
  62. Вроде все получилось! Спасибо! Но почему у меня кнопка "читать дальше..." ?!

    ОтветитьУдалить
  63. Kate, сейчас кат встроен автоматически, его не надо больше делать.

    http://seorussian.blogspot.com/2009/09/kat-v-blogger-teper-vstroen-ura.html

    ОтветитьУдалить
  64. решительно лучше второго способа! огроменное спасибо!
    совсем не нужно убирать все сообщения под кат)

    ОтветитьУдалить
  65. Получилось в комбинации со стандартной кнопкой "под кат" от блогспот что стоит по умолчанию. она у меня не работала так как шаблон не стандартный. в комбинации с этим способом работает.

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