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

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

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

Ещё статьи по теме.

Очень оригинальный гаджет последних сообщений.
Виджет последние сообщения по ярлыкам.
2 красивых виджета последние сообщения.

Предложенный ниже код устанавливается в гаджет 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