Динамическая шапка блога

Шаг 1. Подготовка изображений.

1.1 Продумайте какую анимацию Вы хотите создать, подберите подходящие фото. Обработайте их а той программе, к которой Вы привыкли.

Например, в моей анимации слайды это коллажи из трёх изображений украшений. Изображения в виде квадратов, поэтому я заранее сделала коллажи в программе Пикасса с соотношеним сторон 3:1, чтобы не искажать картинки.

2.1 Измените размер Ваших слайдов до необходимого.

Например, у меня ширина блога 1100 пикселей, соответсвенно слайды мне нужны были 1050 пикселей, с высотой в три раза меньше - 350 пикселей.

Шаг 2. Создание GIFF анимации в программе Photoshop.

2.1 Откройте Фотошоп. Файл - создать - ширина 1050, высота 350, фон прозрачный.

2.2 Создайте столько копий фона, сколько слайдов будет в Вашем слайд-шоу. Для этого в меню слои, зажав левой кнопкой слой Фон перетащите его на значок чистого листа (создать новый фон).

У меня 3 слоя.

2.4 Делаем активным первый слой, нажав на нем в меню слои (слева)

Файл - Поместить - Выбираем первый подготовленный файл - Ввод.

Благодаря тому, что мы файлы уже подготовили по размеру, изображение идеально помещается на слой.

Делаем активным второй слой, помещаем туда второе изображение и т.д.

2.5 Переходим в режим Движение.

Окно - Рабочая среда - Движение

2.6 Нажимаем Create Video Timeline.

Видим такое окно:

2.7 Далее путем перетаскивания слайдов по шкале времени создаем нашу анимацию. Для просмотра промежуточных результатов можно нажать Воспроизведение.

У меня получилось так:

2.8 Сохраняем???

Файл - Сохранить для Web и устройств.

Проверяем параметры анимации. Формат файла - GIFF. Параметры повторов - я выбрала постоянно.

2.9 Проверяем полученный файл на диске компьютера. Нравится? :)

Обратите внимание, что файл очень маленького размера. У меня около 600 КБ, и это анимация!!!

Шаг 3. Размещение слайд-шоу в Blogger.

3.1 Откройте ваш блог - Настроить - Дизайн - Добавить гаджет - Изображение

3.2 Пишем название, загружаем изображение, указываем ссылку (если хотите). Сохраняем :)

3.3 В меню Дизайн перетаскиваем наш гаджет на необходимую позицию в блоге. Нажимаем Сохранить расположение.

http://www.anna-miracle.com/2013/11/blog-post_25.html

Последние комментарии на блог

Виджет последние комментарии на блог:

Добавить гаджет - HTML/JavaScript:

<style type="text/css">

ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}

.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}

.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}

.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}

.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}

.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}

</style>

<script type="text/javascript">

//<![CDATA[

// Recent Comments Settings

var

numComments = 45,

showAvatar = true,

avatarSize = 60,

roundAvatar = true,

characters = 140,

defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",

hideCredits = true;

//]]>

</script>

<script src="http://bloggerndch.googlecode.com/files/w2b-recent-comments-w-gravatar.js.txt" type="text/javascript">

</script>

<script src="http://blogodel.comURL ВАШЕГО БЛОГА/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=ВСТАВЬТЕ ЦИФРУ КОММЕНТАРИЕВ" type="text/javascript">

</script>

Для черного блога:

<style type="text/css">

ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}

.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;font-size: 13px;}

.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}

.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}

.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}

.w2b_recent_comments li span{margin-top:4px;color: #ffffff;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}

</style>

<script type="text/javascript">

//<![CDATA[

// Recent Comments Settings

var

numComments = 45,

showAvatar = true,

avatarSize = 60,

roundAvatar = true,

characters = 140,

defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",

hideCredits = true;

//]]>

</script>

<script src="http://bloggerndch.googlecode.com/files/w2b-recent-comments-w-gravatar.js.txt" type="text/javascript">

</script>

<script src="URL ВАШЕГО БЛОГА/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=10" type="text/javascript">

</script>

И вариант без аватарок:

<div style="padding: 0px 0px 0px 20px; color: #343f4a"><script type="text/javascript">

//<![CDATA[

var comsmaxamostrar = 7;

var comslongitud = 60;

function showrecentcomments(json) {

var entry, comulr, comcontent, salida;

for (var i=0;i<comsmaxamostrar;i++) {

entry = json.feed.entry[i];

if (i==json.feed.entry.length)break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

comulr=entry.link[k].href;

break;

}

}

comulr=comulr.replace("#","#");

if ("content" in entry){

comcontent = entry.content.$t;

} else if("summary" in entry) {

comcontent = entry.summary.$t;

} else {

comcontent = "";

}

var re=/<\S[^>]*>/g;

comcontent=comcontent.replace(re,"");

if (comcontent.length>comslongitud) {

comcontent = comcontent.substring(0,comslongitud) + " &hellip;";

}

salida = "<li style='list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz7N1OZ2oxH92Uj4-8q1x2S2Z3NpeiexmqLHfx05ju_STlubjDKAEtbWrFOdDuu88k8o2oC1XxgA-1rx3nycCRUXU-Rk7f3VbT1P0hI_sClTmYacFQw5__wOdArlqJ-6rcD4hLQwavrP2k/s1600/komment.png);>";

salida += "<span class='simgvaga001'></span><b>" + entry.author[0].name.$t + "</b><br />";

salida += "<a rel='nofollow' href='" + comulr + "'>" + comcontent +"</a>";

salida += "</li>";

document.write(salida );

}

}

//]]>

</script>

<ul id="poslednie-comment"><script src="URL ВАШЕГО БЛОГА/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></ul></div>

 Источник: 

http://blogodel.com/2012/11/vidzhet-kommentarii-blogger-blogspot.html

Последние комментарии на блог

Виджет последние комментарии на блог:

Добавить гаджет - HTML/JavaScript:

<style type="text/css">

ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}

.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}

.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}

.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}

.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}

.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}

</style>

<script type="text/javascript">

//<![CDATA[

// Recent Comments Settings

var

numComments = 45,

showAvatar = true,

avatarSize = 60,

roundAvatar = true,

characters = 140,

defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",

hideCredits = true;

//]]>

</script>

<script src="http://bloggerndch.googlecode.com/files/w2b-recent-comments-w-gravatar.js.txt" type="text/javascript">

</script>

<script src="http://blogodel.comURL ВАШЕГО БЛОГА/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=ВСТАВЬТЕ ЦИФРУ КОММЕНТАРИЕВ" type="text/javascript">

</script>

Для черного блога:

<style type="text/css">

ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}

.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;font-size: 13px;}

.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}

.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}

.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}

.w2b_recent_comments li span{margin-top:4px;color: #ffffff;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}

</style>

<script type="text/javascript">

//<![CDATA[

// Recent Comments Settings

var

numComments = 45,

showAvatar = true,

avatarSize = 60,

roundAvatar = true,

characters = 140,

defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",

hideCredits = true;

//]]>

</script>

<script src="http://bloggerndch.googlecode.com/files/w2b-recent-comments-w-gravatar.js.txt" type="text/javascript">

</script>

<script src="URL ВАШЕГО БЛОГА/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=10" type="text/javascript">

</script>

И вариант без аватарок:

<div style="padding: 0px 0px 0px 20px; color: #343f4a"><script type="text/javascript">

//<![CDATA[

var comsmaxamostrar = 7;

var comslongitud = 60;

function showrecentcomments(json) {

var entry, comulr, comcontent, salida;

for (var i=0;i<comsmaxamostrar;i++) {

entry = json.feed.entry[i];

if (i==json.feed.entry.length)break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

comulr=entry.link[k].href;

break;

}

}

comulr=comulr.replace("#","#");

if ("content" in entry){

comcontent = entry.content.$t;

} else if("summary" in entry) {

comcontent = entry.summary.$t;

} else {

comcontent = "";

}

var re=/<\S[^>]*>/g;

comcontent=comcontent.replace(re,"");

if (comcontent.length>comslongitud) {

comcontent = comcontent.substring(0,comslongitud) + " &hellip;";

}

salida = "<li style='list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz7N1OZ2oxH92Uj4-8q1x2S2Z3NpeiexmqLHfx05ju_STlubjDKAEtbWrFOdDuu88k8o2oC1XxgA-1rx3nycCRUXU-Rk7f3VbT1P0hI_sClTmYacFQw5__wOdArlqJ-6rcD4hLQwavrP2k/s1600/komment.png);>";

salida += "<span class='simgvaga001'></span><b>" + entry.author[0].name.$t + "</b><br />";

salida += "<a rel='nofollow' href='" + comulr + "'>" + comcontent +"</a>";

salida += "</li>";

document.write(salida );

}

}

//]]>

</script>

<ul id="poslednie-comment"><script src="URL ВАШЕГО БЛОГА/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></ul></div>

 Источник: 

http://blogodel.com/2012/11/vidzhet-kommentarii-blogger-blogspot.html

Последние комментарии на блог

Виджет последние комментарии на блог:

Добавить гаджет - HTML/JavaScript:

<style type="text/css">

ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}

.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}

.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}

.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}

.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}

.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}

</style>

<script type="text/javascript">

//<![CDATA[

// Recent Comments Settings

var

numComments = 45,

showAvatar = true,

avatarSize = 60,

roundAvatar = true,

characters = 140,

defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",

hideCredits = true;

//]]>

</script>

<script src="http://bloggerndch.googlecode.com/files/w2b-recent-comments-w-gravatar.js.txt" type="text/javascript">

</script>

<script src="http://blogodel.comURL ВАШЕГО БЛОГА/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=ВСТАВЬТЕ ЦИФРУ КОММЕНТАРИЕВ" type="text/javascript">

</script>

Для черного блога:

<style type="text/css">

ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}

.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;font-size: 13px;}

.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}

.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}

.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}

.w2b_recent_comments li span{margin-top:4px;color: #ffffff;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}

</style>

<script type="text/javascript">

//<![CDATA[

// Recent Comments Settings

var

numComments = 45,

showAvatar = true,

avatarSize = 60,

roundAvatar = true,

characters = 140,

defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",

hideCredits = true;

//]]>

</script>

<script src="http://bloggerndch.googlecode.com/files/w2b-recent-comments-w-gravatar.js.txt" type="text/javascript">

</script>

<script src="URL ВАШЕГО БЛОГА/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=10" type="text/javascript">

</script>

И вариант без аватарок:

<div style="padding: 0px 0px 0px 20px; color: #343f4a"><script type="text/javascript">

//<![CDATA[

var comsmaxamostrar = 7;

var comslongitud = 60;

function showrecentcomments(json) {

var entry, comulr, comcontent, salida;

for (var i=0;i<comsmaxamostrar;i++) {

entry = json.feed.entry[i];

if (i==json.feed.entry.length)break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

comulr=entry.link[k].href;

break;

}

}

comulr=comulr.replace("#","#");

if ("content" in entry){

comcontent = entry.content.$t;

} else if("summary" in entry) {

comcontent = entry.summary.$t;

} else {

comcontent = "";

}

var re=/<\S[^>]*>/g;

comcontent=comcontent.replace(re,"");

if (comcontent.length>comslongitud) {

comcontent = comcontent.substring(0,comslongitud) + " &hellip;";

}

salida = "<li style='list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz7N1OZ2oxH92Uj4-8q1x2S2Z3NpeiexmqLHfx05ju_STlubjDKAEtbWrFOdDuu88k8o2oC1XxgA-1rx3nycCRUXU-Rk7f3VbT1P0hI_sClTmYacFQw5__wOdArlqJ-6rcD4hLQwavrP2k/s1600/komment.png);>";

salida += "<span class='simgvaga001'></span><b>" + entry.author[0].name.$t + "</b><br />";

salida += "<a rel='nofollow' href='" + comulr + "'>" + comcontent +"</a>";

salida += "</li>";

document.write(salida );

}

}

//]]>

</script>

<ul id="poslednie-comment"><script src="URL ВАШЕГО БЛОГА/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></ul></div>

 Источник: 

http://blogodel.com/2012/11/vidzhet-kommentarii-blogger-blogspot.html

Скрыть текст в блоггере

Вот интересный способ скрыть дополнительную информацию в кнопочку на блоггере. 

<div style="margin: 5px 5px 5px;">

<div class="smallfont" style="margin-bottom: 2px; text-align: center;">

<span style="color: red;"><b>ПРАВИЛА КЛУБА ДРУЗЕЙ :</b></span> <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Прочитать'; }" style="font-size: 14px; margin: 0px; padding: 0px; width: 100px;" type="button" value="Прочитать" /> </div>

<div class="alt2" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: white; background-image: none; background-position: 0% 50%; background-repeat: repeat; border: 0px inset; line-height: 1.5em; margin: 0px; padding: 6px;">

<div style="display: none;">

СКРЫТЫЙ ТЕКСТ

<br/>

</div>

</div>

</div>

Код нужно вставлять в запись/страницу в режиме HTML

Как сделать свой дизайн вкладки страниц

Для этого нужно ввести в страничку код

<a href="url сайта"><img src="url картинки" alt="" width="число в пикселях" height="число в пикселях" border="0" /></a>

Ширину и высоту в коде можно не указывать, если вставлять уже готовые картинки заранее выверенных размеров.

Эти параметры нужны для того, чтобы потом подкорректировать размеры картинки прямо в коде.

Как сделать вкладки страничек блога.

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

2. В Фотошопе нарисовать нужные картинки с названиями страниц. Картинки должны быть одинаковые по высоте. Вообще-то, могут быть и неодинаковые, если вы так специально задумываете. Суммарная ширина картинок не должна превышать ширину блога. Ширину блога можно узнать и изменить во вкладке "Шаблон" на панели управления блогом. Перед этим сделайте на всякий случай резервную копию вашего имеющегося шаблона. Вдруг что-то наменяете не то... А так всегда можно вернуть как было.

У меня картинки высотой 50 пикс., ширина у них разная. Есть иллюзия того, что между картинками промежутки. Но это не так, они стоят вплотную друг к другу. Поэтому, когда будете рисовать картинки, оставляйте пустое место по бокам.

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

4. Для каждой картинки создать отдельный код. 

URL сайта - это адрес вашей странички блога. Сколько страниц, столько и разных адресов.

5. Перейти во вкладку "Дизайн" на панели управления и прямо под заголовком блога вставить гаджет "HTML/JavaScript". Поле "Название" оставляем пустым, а в "Содержание" вставляем друг за дружкой коды, сделанные в п.4. Сохранить.

6. Открыть вкладку "Страницы" на панели управления блогом и выбрать "Не показывать страницы блога"

 Источник: 

http://www.olinohobby.com/2012/12/blog-post_21.html

Алгоритм решения проблем в блоггере

Алгоритм действий при возникновении проблем с блоггером (запишу на память )

Всегда периодически сохраняйте резервную копию шаблона!

Если заблокировали аккаунт - восстанавливаем через СМС (появляется окно для ввода телефона).

 Форумы по продуктам гугл обращаемся, если:

Если удалены блоги или заблокированы (за спам) и вам пришло письмо-уведомление об этом, то нужно написать объяснительное письмо.

Если не помогло (на восстановление блога нужны сутки) или вы не получили письмо-нужно сообщить о своей проблеме на форум. Если возникли какие-то вопросы - идем в Общие вопросы, Коды Ошибок, Известные проблемы,Сообщения о проблемах.