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


Для этого нам потребуется вот такой небольшой код.
.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%}
.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.shpargalochki.ru/2014/04/stili-css-v-shablon-bloga.html#more
УдалитьЯндекс добавляем сюда https://webmaster.yandex.ru/
Майл-http://webmaster.mail.ru/
Гугл https://www.google.com/
Добрый вечер, Вика! Вы моя добрая фея! Спасибо. Буду "химичить"
ОтветитьУдалитьДобрый вечер, Вика! Вы моя добрая фея! Спасибо. Буду "химичить"
ОтветитьУдалитьирина, не забывайте только перед тем, как что-то делать в шаблоне сделать резервное копирование. удачи.
Удалитьдобрый вечер! спасибо за шпаргалочки, очень интересно! все получилось!
ОтветитьУдалитьИрина, пожалуйста. Кстати на подходе статья ещё одного варианта. Следите.
Удалить