Динамичный виджет последние сообщения с эффектом анимации.

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

Я уже как-то писала, что многие считают нет необходимости устанавливать гаджет последних сообщений блога. Ведь на главной странице и так отображаются последние посты. Не всегда читатель переходит на главную и почему бы не показать пользователю, что может его ещё что-то заинтересовать.

Ещё статьи по теме.
Предложенный ниже код устанавливается в гаджет HTML/JavaScript. Скопируйте его в блокнот и ниже разберём настройки.

<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #DBDBDB;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #6B6B6B;
background:#F3F3F3;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
text-shadow: 0px 2px #fff;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
text-transform: capitalize;
color: #0000ff;
font-size: 14px;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-even {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-odd a{
color: #595959;
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
color: #242424;
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
margin-top: 5px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;}</style>

<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:' http://www.shpargalochki.ru/feeds/posts/default?redirect=false&start-index=1&max-results=8'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'последние сообщения', numResults : 6, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>


В первой части кода ( я выделила её серым цветом) все стили CSS можно поменять и подогнать под ваш дизайн. Высоту, ширину, цвет всего блока, границы, шрифт и прочее. Во второй части в строке отмеченной синим цветом впишите соответственно адрес вашего блога.

Розовым обозначено -

6 - это количество отображаемых постов.
5000 -  скорость ротации отображаемых сверху сообщений.
500 - скорость hover эффекта.
Все эти значения тоже меняйте по вашему желанию.

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


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

Введите Ваш email


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

  1. Доброго времени суток Вика! Благодарю за оперативность, отзывчивость и внимание к таким как я чайникам!!! Большое вам спасибо за классный виджет! Я его уже установила к себе, но не могу увеличить ширину (width: 100%; меняла на px по ширине сайтбара (260px) и отступы справа и слева остаются!) вот скрин https://4.bp.blogspot.com/-Phqj8rdIKPI/V-uIa01EgFI/AAAAAAAABg8/97LJW9xKyDMTljSl1N0wrwtgsrYDKNZtgCLcB/s1600/2016-09-28_160707.jpg. И еще один вопросик: все борюсь с расстояниями между блоками, в скрине я отметила между верхним баннером и блоком для сообщения зазор, которое хочется убрать, можно ли это сделать? С уважением к вам и вашей креативности! Тата

    ОтветитьУдалить
  2. Он так и написан что ширина 100% и предусматривает ширину сайдбара. А вот картинку вашу поисковик не находит.

    ОтветитьУдалить
  3. Вика, может по этому адресу, проверила вроде открывается https://1.bp.blogspot.com/-Phqj8rdIKPI/V-uIa01EgFI/AAAAAAAABhA/P637Rv0NqS4q-8AS4HhtxnL9rWKnNzQ8QCPcB/s1600/2016-09-28_160707.jpg.

    ОтветитьУдалить
  4. Посмотрела. поняла о чём речь. Эти отступы не убрать. есть конечно лазейки, но тут нужно в шаблоне в стилях CSS кардинальные изменения делать. Можно попробовать , чтобы не особо бросалось в глаза если вам не нравиться. убрать рамки или вокруг сообщений, или в сайдбаре или там и там. Примерно так как у меня здесь
    http://www.dela-domashnie.ru/

    ОтветитьУдалить
  5. Вика, спасибо, попробую убрать рамку сообщений. А расстояние между баннером и блоком сообщений можно зазор убрать (в скрине я указала стрелкой)? С уважением Тата.

    ОтветитьУдалить
  6. Попробуйте уменьшить расстояние как описано здесь http://www.shpargalochki.ru/2014/11/umenshit-rasstojanie-mezhdu-gadzhetami.html
    Тата, столько копаться вшаблоне, не проще ли скачать сторонний готовый шаблон. Их так много сейчас.

    ОтветитьУдалить
  7. Вика, спасибо, УРА! все получилось! Это мой первый блог, поэтому "копаюсь" вникаю во все! И ваш блог для меня, как руководство к действию! Спасибо вам, с уважением Тата. P.S. А на счет готовых шаблонов надо подумать!

    ОтветитьУдалить
  8. Tata, ну я рада за вас и приветствую ваше упорство.

    ОтветитьУдалить
  9. Виктория, ты, наверное, читала об изменениях с 29 сентября в гаджете "Окно поиска". Сегодня прочитала в некоторых блогах, что информация в нем отображается по-другому (у себя я никаких изменений не заметила). Но самое главное, что в новом блоге уже не поставишь этот гаджет. Он исчез. Моя подруга собирается создавать блог и меня эта проблема волнует. У вас есть пользовательский поиск. Вы как-то писали о нем. А чем он отличается просто от Окна поиска в Блоггере?

    ОтветитьУдалить
  10. Ирина, Я сегодня в сообществе своём Блоггер на русском уже писала об этом. Дала 3 ссылки. Вот ссылка на тот что у меня http://www.shpargalochki.ru/2015/07/polzovatelskij-poisk-Google-Adsense-dlja-bloga.html
    и вот этот можно попробовать
    http://www.shpargalochki.ru/2014/10/fiksirovannoe-okno-poiska-v-bloge.html

    ОтветитьУдалить
  11. Виктория, обязательно посмотрю. Спасибо за ссылки. Меня мои подруги-блогеры напугали. А у меня все работает! Только на тестовом блоге БиблиоИрина Окно поиска не работает и исчез гаджет "Мои блоги" (список ссылок на мои 2 блога и на гугл-сайты). Но этот блог экспериментальный, он не индексируется поисковыми системами. Наверное, поэтому, все и пропало. Главное, все нормально в Волшебном Фонарике и Блоге Кота Васьки.

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

Пользовательский поиск