Эффект всплывающих заголовка ссылок изображений и другие трюки в blogger



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

Не скажу, что информация очень ценная, но для женских ресурсов вполне даже может пригодится, особенно кто ведет фото блоги.

После вставки кода при загрузке сайта, всплывающий эффект будет у всех заголовков: название, описание, заголовки постов и виджетов, ссылки в меню, изображений. Можно настроить эффект одного элемента, для этого нужно будет немного подкорректировать код. 

Пример сходите посмотреть в тестовый блог, если сразу не увидите эффекта, перейдите в меню содержание блога, нажмите по ярлыкам. Работает в Google Chrome, Mozilla Forefox, Opera, Yandex браузер, кроме ИЕ (у меня старая версия). Напишите в отзывах, всплывающий эффект на Вашем компьютере в разных браузерах рабочий?

Скопируйте код ниже и вставьте дизайн добавить гаджет, или шаблон изменить шаблон выше строки ]]></b:skin> без <style></style>. Не забывайте делать резервную копию шаблона.

<style>
@keyframes myfirst
 {
 from{opacity:0;}
 to{opacity:10;}
 }
@-moz-keyframes myfirst
 {
 from{opacity:0;}
 to{opacity:10;}
 }
@-webkit-keyframes myfirst
 {
 from{opacity:0;}
 to{opacity:10;}
 }
@keyframes
 {
 from{transform:translate(0px, 9000px)}
 to{transform:translate(0px, 0px)}
 }
@-moz-keyframes
 {
 from{-moz-transform:translate(0px, 9000px)}
 to{-moz-transform:translate(0px, 0px)}
 }
@-webkit-keyframes
 {
 from{-webkit-transform:translate(0px, 9000px)}
 to{-webkit-transform:translate(0px, 0px)}
 }
@keyframes myfirst
 {
 from{opacity:0;}
 to{opacity:10;}
 }
@-moz-keyframes myfirst
 {
 from{opacity:0;}
 to{opacity:10;}
 }
@-webkit-keyframes myfirst
 {
 from{opacity:0;}
 to{opacity:10;}
 }
@keyframes
 {
 from{transform:translate(0px, 9000px)}
 to{transform:translate(0px, 0px)}
 }
@-moz-keyframes
 {
 from{-moz-transform:translate(0px, 9000px)}
 to{-moz-transform:translate(0px, 0px)}
 }
@-webkit-keyframes
 {
 from{-webkit-transform:translate(0px, 9000px)}
 to{-webkit-transform:translate(0px, 0px)}
 }
#header-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#content-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#main-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#sidebar-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,h4,h5,h6,a {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,h4,h5,h6,.post img {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 8s;}
</style>

Всплывающий эффект для главного заголовка выделено зеленым, выделенное другим цветом удалите до </style>. Розовым-эффект для контента; голубым для боковых колонок; коричневым для заголовка в сообщении; оранжевым заголовки и картинки в посте.

Можно оформить только для одной страницы, когда напишите пост, перейдите по вкладке HTML и вставьте код внизу статьи.

Оформление только для изображений в сайдбаре:

#sidebar img {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}

Для картинок в постах

.post img {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 8s;}

Вставляете верхнюю часть кода плюс эффект для отдельных элементов.

И хочу еще написать о стандартной строке автор, ярлыки, дата публикации поста. Можно изменить надписи своими, вставить символы, посмотрите у меня внизу страницы.

В дизайне нажимаем изменить сообщение

Изменить параметры сообщения в blogger
Изменить параметры сообщения в blogger

То, что отмечено галкой, измените на свой текст. Коды символов вписываете в нужное место или копируете в таблице символов и вставляете в поле. Почитайте пост Как вставить символ в текст сообщения; и Коды символов для вебмастеров;

У кого проблемы с отображением этих элементов, читайте статью Под сообщением блога не отображается имя автора дата ярлыки;

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

Другие статьи:

TEXT.RU - 100.00%




Автор статьи ✎ Olga Protasova Выпуск ✹ 10/04/2015 Ярлыки ►


Открыть комментарии →

4 коммент. :

  1. Ольга, сбегала в тестовый. Или я не поняла про что идёт речь, но чего-то я по теме не увидела.

    ОтветитьУдалить
  2. Вика проверила демо, всплывающий эффект заголовков и картинок присутствует. Попробуй посмотреть еще раз. А в каком браузере смотришь? В гугл хром у меня работает.

    ОтветитьУдалить
  3. Сейчас всплываю. Может я не правильно сначала поняла о чём идёт речь. Прикольно.

    ОтветитьУдалить
  4. Вика, я уже во всех браузерах проверила. Работает, кроме ИЕ. Вообще эффект правда прикольный, но не для всего блога. Нам уж точно не подходит. Может на одной из страниц в других своих блогах использую. А вот у кого фото блоги, можно оформить всплывающие изображения.

    ОтветитьУдалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *