Анимированный виджет популярных сообщений.

виджет популярные сообщения
Здравствуйте, уважаемые читатели, друзья и гости блога. Давно не делилась с вами гаджетами/виджетами для блога. Последний раз это был виджет аккордеон. Предлагаю сегодня вашему вниманию виджет популярных сообщений с миниатюрами и всплывающим эффектом при наведении курсора.
Если у вас уже установлен гаджет популярных сообщений от Блоггер, трогать его не будем. У кого такого нет идём во вкладку дизайн-популярные сообщения и делаем соответствующие настройки.



Сохраняем и перемещаем в нужное место на боковой панели. Сейчас остаётся немного его изменить, чтобы придать уникальности. Рабочий вариант на этом блоге.


Для этого нам потребуется вот такой небольшой код.


.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}

.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:100%}


Копируем его. В админпанели блога заходим во вкладку шаблон-изменитьHTML. С помощью горячих клавиш Ctrl+F находим строку ]]></b:skin>. Прочитайте, пожалуйста этот пост если пока не знаете, как это сделать. И сразу над ней вставляем, код, приведённый выше. Не забудьте нажать на функцию предварительны просмотр. И если всё правильно сделали, сохраняем шаблон.

Всё. Вот такой интересный виджет популярных сообщений. И глазу приятно и посетили будут видеть самые читаемые посты. А в этой статье гаджет с кнопкой Гугл+.
 http://www.allbloggertricks.com
И у меня сегодня всё. Спасибо, что читаете мои шпаргалки.  До новых встреч.


Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

Введите Ваш email


13 комментариев:

  1. Вика, здравствуй. Хороший виджет популярных сообщений, необычный. Посмотрела пример, было бы больше показано сообщений, посмотрела бы все. Ты в посте наверное ссылку хотела дать "Прочитайте пожалуйста этот пост", как найти строку в шаблоне?

    ОтветитьУдалить
    Ответы
    1. Ага, Оля. Хотела и забыла. Спасибо, что обратила внимание. А виджет этот у меня зарекомендовал себя. Давно на блоге стоит. Тьфу.

      Удалить
  2. Вика, привет! И мне нравится этот виджет. :) Я тут потихоньку создаю ещё один блог, так к тебе бегаю за подсказками то и дело. Спасибо большое за твой труд. :)

    ОтветитьУдалить
  3. Привет Кристина. А в гости что не приглашаешь. Хоть одним глазком посмотреть..

    ОтветитьУдалить
    Ответы
    1. абажди... я сначало приведу его в товарный вид... :)))

      Удалить
    2. Жду. Просто всегда интересно с новыми блогами знакомиться.

      Удалить
  4. Добрый вечер, Вика! приглашаю Вас к себе в гости. Я пока чайник, я только учусь, но у меня нет строки ]]>. все проискала.Подскажите пожалуйста. И еще Вика, как сделать ,чтобы мой блог по названию был виден на яндекс, майл. К сожалению, никто меня не может найти. Благодарю Вас за Ваши подсказки.

    ОтветитьУдалить
    Ответы
    1. Доброго времени суток. Не страшно, все мы когда-то начинали. Как найти ]]>.читаем здесь.http://www.shpargalochki.ru/2014/04/stili-css-v-shablon-bloga.html#more
      Яндекс добавляем сюда https://webmaster.yandex.ru/
      Майл-http://webmaster.mail.ru/
      Гугл https://www.google.com/

      Удалить
  5. Добрый вечер, Вика! Вы моя добрая фея! Спасибо. Буду "химичить"

    ОтветитьУдалить
  6. Добрый вечер, Вика! Вы моя добрая фея! Спасибо. Буду "химичить"

    ОтветитьУдалить
    Ответы
    1. ирина, не забывайте только перед тем, как что-то делать в шаблоне сделать резервное копирование. удачи.

      Удалить
  7. добрый вечер! спасибо за шпаргалочки, очень интересно! все получилось!

    ОтветитьУдалить
    Ответы
    1. Ирина, пожалуйста. Кстати на подходе статья ещё одного варианта. Следите.

      Удалить

Пользовательский поиск
Foto Saya
My Photo