Feedburner интегрирован в Blogger

Подробности здесь


Прочитать полностью...

Используем лайтбокс для показа рисунков

Для понимания ситуации щёлкните на картинку - хотите тоже самое? Тогда приступим.

Лайтбокс это разновидность pop-up'ов которые показываются поверх страницы. Лайтбокс не является новым броузером!

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

Шаг 1
Скачиваем файл Лайтбокс JavaScript
скачиваем картинку "загрузка"
Скачиваем картинку "закрыть"

Шаг 2
Добавьте следующ.. строчку в HTML код сразу после тега <head> или же просто в секции <head>...</head>:
<script type='text/javascript' src='URL вашего хоста/lightbox.js'/>
и меняем URL вашего хоста на конкретно адрес.

Шаг 3
Заливаем всё на хост.

Шаг 4
Далее нужно добавить в CSS вот такой код:
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }

ВСЁ!
Теперь создаём классный пост - только классный, кидаем на хост картинку, в посте, там где <a href="URL вашей картинки"> нужно добавить свойства, чтобы выглядело так или примерно
<a href="URL вашей картинки" rel="lightbox" and title="Your title"><img scr="URL вашей картинки" width=50% height=50% /></a>
теперь после публикации поста при клике по картинке, которая уменьшена по вертикали и горизонтали на 50% т.е. в два раза, во всплывающем окне будет полноценная картинка!
Удачи!

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

Делаем расширенное резюме поста

(исправлено) Расширенное резюме - это метод, которым пользуются, чтобы показать начало поста. Ну например, чтобы на вашей странице был не один пост, а эдак сколько влезет и, например, по одному параграфу - для наглядности! В blogger реализацию тега more, который используется в таких случаях я не увидел, да и бог с ним - мы простые способы не ищем, а этот мне показался интересным! В итоге мы должны получить приведённое ниже фразу 'прочитать полностью'
Приступим!

В мануале blogger'а я так всё запутано, что и я тоже запутался. Объясню попроще. Чтобы всё получилось нужно чётко выполнять инструкции и ни-ни в сторону, иначе -.ОПА.

Условный CSS

Первым шагом поместим код так называемого условного CSS. ...здесь в конце поста рассказывается про то как изменить шаблон вашего сообщения...Он заменяет отображение на экране постов на страницах блога. Заходим в Редактировать HTML и сохраняем шаблон - на всякий случай.

Далее прокручиваем шаблон до тега </html> и добавляем следующий код сразу перед этим тегом:
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
Удачно? Сохраните шаблон. ВАЖНО: в шаблоне есть такой тег
]]></b:skin> пред тегом </html> именно между ними и надо вставить этот код. В нем мы определили класс "fullpost", который будет появляться только на страницах с вашими постами.

Ссылки "Прочитать полностью..."

Вторым шагом является добавление ссылки Прочитать полностью... , которая будет появляться после каждого резюме вашего поста. Чтобы это сотворить надо включить галочку сверху кода вашего шаблона под названием "Расширить шаблоны виджета". Затем пролистайте вплоть до кода (он обязательно у вас есть) <data:post.body/> и сразу за ним добавьте:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Прочитать полностью...</a>
</b:if>

Сохраните шаблон. Эта ссылка будет появляться только на главной странице и по ней будет перекидывать на страницу с вашим 'полноценным' постом.
ОЧЕНЬ ВАЖНО Вааще не трогайте код, ну только если я вам дал наводку, а вы разбираетесь!

Если осилили, то переходим к качеству ссылки! Для читателя важно её видеть, поэтому вместо последнего кода можно засунуть код ( опять же и туда же, но только вместо ) такого плана, Жирный и увеличеный, например такой:

<b:if cond='data:blog.pageType != "item"'>
<span style="font-weight:bold;"><span style="font-size:120%;"><a expr:href='data:post.url' target='_blank'>Прочитать полностью...</a></span></span>
</b:if>

сохраняем!

Изменение вашего поста

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

Это начало поста(резюме)<span class="fullpost">А это остальной текст поста</span>

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

Преимущество способа

Дополнительные ссылки - при индексировании не помешают и текст открывается в новом окошке!
Удачи!
Прочитать полностью...

Как вставить баннер в каждый пост вашего блога?

Для того чтобы вставить баннер в пост, первое ...
Нужно уже иметь готовый баннер или попыталься его сделать в каком-нибудь графическом редакторе ( я всё делаю в фотошопе ). Как альтернативу можно использовать баннер-генераторы, которые можно найти через поисковик.
Когда вы создали баннер, то тогда лейте его на какой-нибудь бесплатный хост, коим является Googlepages.com. Он предоставляет до 100М свободного места. Залив туда имидж, запомните ссылку на него.

Можно использовать и сам Blogger, для этого создайте новый пост и воспользуйтесь вставкой изображения в пост. Вы получите приблизительно такой код:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDtKkis5VfHF4caQNpQi8VNRphToSpLH2fUwNAdMiUnERcV5sFLPKuA60ogRWS-R_tIie8RwTk656RoRK3Uyb5aVR3gQ9JmKm5jgrVNSfEtEkn5UG-ebQyp8-qIfS5dn_UGsVxMtHezCoi/s1600-h/PIC_NAME.jpg >< style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDtKkis5VfHF4caQNpQi8VNRphToSpLH2fUwNAdMiUnERcV5sFLPKuA60ogRWS-R_tIie8RwTk656RoRK3Uyb5aVR3gQ9JmKm5jgrVNSfEtEkn5UG-ebQyp8-qIfS5dn_UGsVxMtHezCoi/s400/PIC_NAME.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5005503282919547810">< /a >

Вам нужно скопировать оттуда адрес где лежит баннер, который выглядит вот так:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDtKkis5VfHF4caQNpQi8VNRphToSpLH2fUwNAdMiUnERcV5sFLPKuA60ogRWS-R_tIie8RwTk656RoRK3Uyb5aVR3gQ9JmKm5jgrVNSfEtEkn5UG-ebQyp8-qIfS5dn_UGsVxMtHezCoi/s400/PIC_NAME.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5005503282919547810

Далее не публикуем, а сохраняем в черновике это сообщение и переходим к главному.

Заходим в Шаблон, выбираем Изменить HTML и ищем такие строчки:

< id="main-wrapper">
< class="main" id="main">

изменяем на:

< id="main-wrapper">
< class="main" id="main" showaddelement="'yes'">

сохраняем шаблон. Переходим к макету страницы с блоками и видим, что появилось новое место для вставок объектов. Будем его использовать под баннер!

Внимание - вставлять баннер нужно через виджет HTML/Javascript, а не через вставку картинки, так как через вставку картинки именно баннер с гиперссылкой вставить нельзя!

вставляем следущий текст в виджет:

< href="http://MYBLOG.blogspot.com">< src="URL OF YOUR BANNER" alt="YOUR BLOG TITLE">< /a >, где MYBLOG.blogspot.com - адрес, куда ссылается баннер, а "URL OF YOUR BANNER" где лежит баннер.

Сохраняем изменения и любуемся баннером. Удачи!
Прочитать полностью...