Blogger: 'Читать далее' для самых ленивых или газетный стиль вашего шаблона.

Приплыла к нему рыбка, спросила:
"Чего тебе надобно, старче?"

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

Здесь на страницах ВСЕ для BLOGGER(а) на BLOGSPOT(e) мы не раз поднимали вопрос о расширяемых постах, о сокрытии информации под катом, ссылке Читать далее и т.д.

Я честно написала по результатам экспериментов Кайла и моих собственных экспериментов порядка 5 постов на тему Расширяемых сообщений. И сегодня, я надеюсь, будет завершающий пост на эту тему. Завершающий, потому что для блоггеров, которые хотят использовать в блоге расширяемые сообщения, вариант идеальный. И если даже привередливый Кайл, который перепробовал все на свете, использует его, и если он даже сподвиг меня (а я, вообще, предпочитаю показывать на главной странице все статьи целиком) использовать его у себя в видео блоге, то наверное этот способ заслуживает внимания. Ничего лучшего я просто вообразить себе не могу!

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

Устанавливается очень просто:

1. Идем как всегда Панель инструментов - Дизайн - Изменить Html

2. На всякий случай делаем резервную копию шаблона.

3. Ставим галочку на Расширить шаблоны виджета

4. В шаблоне находим строчку <data:post.body/> и заменяем её на следующий кусок кода:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://blogger4you.narod.ru/JavaScript/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'>Читать далее</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>

5. Нажмите ПРОСМОТР и СОХРАНИТЬ если вам все понравилось, нажмите УБРАТЬ ИЗМЕНЕНИЯ если что-то получилось не так.

6. Некоторые параметры, которые можно поменять:
summary_noimg = 430; - количество знаков summary если нет картинки.
summary_img = 340; - количество знаков summary если картинка есть.
img_thumb_height = 100; высота thumbnail (миниатюрной картинки)
img_thumb_width = 120; и ширина thumbnail (миниатюрной картинки)

8. Если для вас важно единобразие маленьких кусочков (summary) и вы готовы принести в жертву этому единобразию пропорции картинки оставляем строчку http://blogger4you.narod.ru/JavaScript/summary-post.js как есть. А если вам хочется сохранить пропорции картинок в вашем summary меняем эту строчку на вот такую http://blogger4you.narod.ru/JavaScript/summary-postN.js

8. Слова Читать далее (в скрипте см. п4 ) можно заменить
1) любыми другими словами;
2) Html-кодом картинки: <img src="http://адрес вашей картинки" alt="Читать далее"/> Тогда эта картинка станет ссылкой на статью целиком (у нас с Кайлом в блогах где мы используем этот скрипт так и сделано, а alt написан на случай, если что-то случится с сайтом где картинка хранится, тогда вместо картинки появится надпись, которую вы поставили как значение для параметра alt). Об Html-коде для описания картинок читаем подробно вот здесь: Blogger: Картинки для фотохудожника!

9. Еще пара небольших замечаний:
1) Если вы решите внедрить этот скрипт возможно разумно будет пересмотреть стиль написания постов, т.е. хорошо бы вначале поста вместо предисловия и введения писать небольшое краткое содержание (summary).
2) Поэкспериментируйте с размерами миниатюр (thumbnail) - подберите их так чтобы картинки при показе на главной странице не очень искажались.

На этом у меня все.
Всем Удачи и Здоровья (в такую погоду)!
Света

Другие посты по теме Газетный стиль шаблона:
1) Blogger: Газетный стиль шаблона и новые кнопки навигации
2) Blogger: Газетный стиль шаблона (больше постов)




Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

Blogger: Простейшее горизонтальное меню!

У кого на горизонте Алые Паруса, А у кого Горизонтальное меню!

Как вы наверное уже догадались у нас с вами на горизонте показалось (давно обещанное) горизонтальное меню.

А напишу я про создание горизонтальных меню несколько постов.

Простейшее горизонтальное меню. При написании его можно совершенно не знать Html и CSS.

Создается очень легко: Панель инструментов - Дизайн - Добавить гаджет. Гаджет добавляем типа Html/JavaScript.

В теле гаджета пишем:

Главная страница || Об авторе || И еще что-нибудь

Пишем что угодно! Теперь из каждого кусочка делаем ссылку. Так же как мы делали изучая редактор Blogger'а (Все о редакторе Blogger(а)): т.е. выделяем кусочек мышкой нажимаем на пиктограмму цепочки и в открывшееся маленькое окошечко вставляем url (адрес по которому собираемся послать нашего читателя). Когда все, что хотели написали и ссылки поставили переносим гаджет на всю ширину экрана под/над заголовком или над областью со статьями (это уж как повезет). Вот здесь на видео (Blogger: Перемещаем гаджеты по макету) я так и делала: хватала гаджет и перемещала.

Идея принадлежит Кайлу он её даже запостил в своем блоге As The Donut Turns! (Blogger Navigation Bar The Simple Way!)

А мы с вами в ближайшее время нарисуем себе вот такие горизонтальные меню с использованием HTML и CSS или Javascript:

Главная страница Об авторе И еще что-нибудь

Всем здоровья и удачи!
Света

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...