Вставка кода в статью блога (продолжение)

Для вставки кода можно использовать теги <pre>...</pre> и/или  <code>...</code>
Если код не меняя вставить между этими тегами в HTML-редакторе, то в визуальном редакторе совсем ничего не отобразится.
Поэтому надо преобразовать код, заменив угловые скобки в коде на  соответствующие им символы:  < на &lt;  и  > на &gt;  (например, используя программу Кодер HTML или онлайн тут), и только после этого вставлять между тегами <pre>...</pre>

<pre>Ваш преобразованный КОД</pre>

Теперь в визуальном редакторе мы увидим:

То есть код уже отображается и кроме этого автоматически меняется шрифт на моноширинный.

Виджет “Последние комментарии” в сайдбаре блога

В англоязычном блоге “Help Blogger. Tricks And Tutorials For You Blog”  нашла несколько вариантов виджета “Последние комментарии”. Все виджеты вставляются в гаджет "HTML/JavaScript" во вкладке “Дизайн” админки блога.

1 вариант

В виде списка с первыми фразами из комментария (к сожалению, название комментируемой статьи отображается английскими буквами).
Источник: Recent Comments Widget For Blogger
А так выглядит этот виджет в сайдбаре блога:

HTML-код виджета № 1:

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://exp13blog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>

Некоторые пояснения к коду:

Вставка кода в статью блога

Для вставки кода в статью сайт htmlka предлагает такие варианты:

Вставка кода (скриншот с сайта).

Меня заинтересовал вариант с синим фоном.
Чтобы вставить какой-либо свой код в статью на блоге, вставляем такой код в HTML-режиме редактора (скопирован с сайта htmlka):

<textarea style="border-right: black 2px solid; border-top: black 2px solid; background-color:dodgerblue; color:white; border-left: black 2px solid; border-bottom: black 2px solid; width: 100%;">КОДЫ</textarea>

 Некоторые пояснения к коду:

• border-right: black 2px solid - правая граница рамки: чёрный цвет, ширина 2 px, сплошная рамка
• background-color:dodgerblue - цвет фона: синий
• color:white - цвет текста: белый

Поэкспериментировав  с цветами, у меня получились разные варианты цветового оформления:

Форма поиска на блоге

Познакомимся с 3-мя вариантами форм поиска для блога:
1. гаджет Blogger
2. 404.RU!
3. Яндекс.Поиск

1. Собственный гаджет Blogger "Поиск по этому блогу"
Дизайн - Добавить гаджет - Окно поиска - Настройка

Настройка окна поиска

Результаты поиска по фразе "формы поиска" можно увидеть на вкладках:
 1) на блоге, 2) связанные страницы, 3) в интернете.

Выпадающее меню рубрик в сайдбаре блога

В сайдбаре блога сделала "Избранное" в виде выпадающего меню.

Скрипт позаимствовала в статье "Добавляем выпадающее меню в сайдбар" на блоге "BloggFast: Всё о Блогах на Blogspot".
Адаптировав скрипт для своего блога, получила:

<div class="widget-content">
<br />
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" style="width: 240px;">
<option selected="selected" value="0"> Название рубрики </option>
<option value="http://exp13blog.blogspot.com/search/label/Виджеты"> Виджеты </option>
<option value="http://exp13blog.blogspot.com/search/label/Дизайн"> Дизайн </option>
<option value="http://exp13blog.blogspot.com/search/label/Кнопки"> Кнопки </option>
<option value="http://exp13blog.blogspot.com/search/label/Полезные советы"> Полезные советы  </option>
</select><br /><br /><br /></div>

Этот скрипт вставила в гаджет "HTML/Java Script":
Дизайн → Добавить гаджет → HTML/Java Script

Примечания:

1. 240px - ширина окошка меню (можно изменить).
2. "http://exp13blog.blogspot.com/search/label/Виджеты" - ссылка на ярлык "Виджеты" (аналогично проставляются ссылки на другие ярлыки).
3. В виджет можно добавлять новые строчки (по мере добавления новых рубрик в блог). 

Кнопка "Читать далее"

 Нашла статью, в которой показан простой способ замены ссылки "Читать далее" на соответствующую кнопку.

Автор даёт код, который надо заменить, на другой (при редактировании HTML-кода шаблона блога). 

Однако разобравшись я поняла, что тут просто надо заменить всего лишь одну строчку в коде:

<data:post.jumpText/>

на строчку:

<img border="0" src="http://s018.radikal.ru/i511/1201/08/56f2e16bd505.png" />

И это всё!

Кроме того, вместо ссылки http://s018.radikal.ru/i511/1201/08/56f2e16bd505.png можно поставить ссылку на любое другое изображение кнопки.

Кнопки "Поделиться в соц. сетях" от Pluso

По материалам статьи "Кнопки Pluso" с блога "Азбука блоггера: Всё о ведении блога".

Зарегистрировалась на веб-сервисе (эл.почта и пароль).
Попробовала 2 варианта вставки кнопок на этом блоге:

1. В виджет "HTML / Javacript" в сайдбар блога (отображается всегда)
2. После каждой статьи блога (не отображается на главной). Для этого необходимо внести изменения в шаблон блога.

Чтобы кнопки отображались после каждой записи и не отображались на главной странице (скриншот статьи-источника):

Как я делала по 2-му варианту вставки кнопок (после каждой статьи):
1. Сначала полученный код кнопок вставила в блокноте между тегами <b:if cond='data:blog.pageType == &quot;item&quot;'> и </b:if>
У меня получилось так:

Виджет "Связанные сообщения"

Сегодня опробовала ещё один виджет "Связанные сообщения" от сервиса nRelate.

В статье "Виджет похожие статьи для Blogger от сервиса nRelate" на блоге "Школа Bloggera" даётся подробное описание, как установить этот виджет на блог. 

Таким образом, есть 3 хороших варианта подобных виджетов для Blogger: 

1. LinkWithin - http://www.linkwithin.com 
2. Related Posts by Zemanta - http://www.zemanta.com 
3. nRelate Posts Only - http://nrelate.com 

Общее в настройках этих виджетов:

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

Виджет "Связанные сообщения" от Zemanta (отображается и на главной странице и после каждой статьи) выглядит так:

Виджет "Связанные сообщения" после каждой статьи.

На этом блоге оставила виджет только от nRelate.