Короткое описание статьи на Blogger, с превью картинки

17.02.2013



Статья о том как на главной странице блога автоматом вставлять начало вашего поста, ограниченное заданным количеством символов, и первую попавшеюся в нем картинку.

Запомните! Каждый раз перед изменением шаблона делайте его резервную копию!


По умолчанию в блогспоте на главной странице выводится статья целиком и для того чтобы спрятать ее часть, оставив вступление, нужно при форматировании текста в редакторе блоггера в месте "разрыва" нажать на кнопку "Вставить ссылку "Дальше"

Посетитель вашего блога будут видеть, размещение на главной блога только начало сообщения.
Делаем следующее. Переходим в настройки Blogger-Шаблон-ИзменитьHTML, ставим галочку "Расширить шаблоны виджета" и с помощью поиска ищем (Сtrl+F) строчку:

<data:post.body/>

и меняем ее на

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://irjkz.googlecode.com/files/summary-post.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Читать далее&#187;</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Выделенные значения можно изменить на свои:

  • 430 — это количество символов, если текст без картинки,
  • 340 — если текст с картинкой,
  • 100 — высота и ширина первой в тексте картинки. Ее лучше делать пропорциональной значениям, которые вы введете, иначе скрипт просто "сожмет" или, наоборот, "растянет" изображение.
"Читать далее" можете заменить на любое другое сочетание или слово.

Вот и всё, Радуемся!
Всем удачи!
Blog Widget by LinkWithin

0 коммент.:

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