ПУТНИК : Recent Posts – продвинутый виджет последних постов

Recent Posts Slider - это плагин, который выводит в слайдере последние посты с заголовками и миниатюрами. Такой подход к анонсу постов будет интересен тем, кто хочет показывать последние посты в сайдбаре или футере, но сделать это пооригинальнее.

Основные особенности виджета Recent Posts:
Отображение миниатюр записей с настраиваемыми и автоматически изменяемыми размерами картинок через timthumb скрипт.
Вывод краткого анонса поста, даты, числа комментариев и т.п.
Разные опции для настройки анонсов, вариантов сортировки, отображения – об этом расскажу чуть позже.
Возможность использовать несколько виджетов.

Так же в настройках Recent Posts Slider можно указать, посты из каких категорий выводить стоит, перечислив ID категорий через запятую, и посты из каких категорий выводить не нужно, перечислив их через запятую со знаком минус (-).

Вставить слайдер в блог можно, непосредственно внедрив его в шаблон с помощью кода.
Установка очень лёгкая. Заходим в панель управление blogger. Выбираем блог, куда хотите установить виджет. Нажимаем Дизайн - Добавить гаджет HTLM/JavaScript на боковой панели и в его поле копируем следующий код:

img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:10px; border:1px solid #ccc;

border-bottom:3px solid #87CEEB;

border-top:1px solid #ddd;

border-radius:10px;

-webkit-border-radius:10px;

-moz-border-radius:10px;}

img.recent_thumb:hover {

-webkit-animation: cssAnimation 1s 16 ease;

-moz-animation: cssAnimation 1s 16 ease;

-o-animation: cssAnimation 1s 16 ease;

}

@-webkit-keyframes cssAnimation {

from { -webkit-transform: rotate(0deg) scale(0.987) skew(1deg) translate(0px); }

to { -webkit-transform: rotate(4deg) scale(1.132) skew(1deg) translate(0px); }

}

@-moz-keyframes cssAnimation {

from { -moz-transform: rotate(0deg) scale(0.987) skew(1deg) translate(0px); }

to { -moz-transform: rotate(4deg) scale(1.132) skew(1deg) translate(0px); }

}

@-o-keyframes cssAnimation {

from { -o-transform: rotate(0deg) scale(0.987) skew(1deg) translate(0px); }

to { -o-transform: rotate(4deg) scale(1.132) skew(1deg) translate(0px); }

}

transform: rotate(12deg) scale(0.994) skew(3deg) translate(-1px);

-webkit-transform: rotate(12deg) scale(0.994) skew(3deg) translate(-1px);

-moz-transform: rotate(12deg) scale(0.994) skew(3deg) translate(-1px);

-o-transform: rotate(12deg) scale(0.994) skew(3deg) translate(-1px);

-ms-transform: rotate(12deg) scale(0.994) skew(3deg) translate(-1px);

}

.recent_posts_with_thumbs {float:left;width: 100%;min-height: 70px;margin: 5px 5px 5px 5px;padding:0;font-size:12px;}

ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px; transition:All 1s ease; border: 1px solid #8ec1da;

background-color: #ddeef6;

border-radius: 4px;

box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;

-o-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;

-webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;

-moz-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;

color: #3985a8;

text-shadow: 0 1px #fff;

padding: 5px 30px;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;

transform: rotate(0deg) scale(1) skew(1deg) translate(0px);

-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);

-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);

-o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);

-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);}

ul.recent_posts_with_thumbs li:hover {

transform: rotate(0deg) scale(1.033) skew(1deg) translate(0px);

-webkit-transform: rotate(0deg) scale(1.033) skew(1deg) translate(0px);

-moz-transform: rotate(0deg) scale(1.033) skew(1deg) translate(0px);

-o-transform: rotate(0deg) scale(1.033) skew(1deg) translate(0px);

-ms-transform: rotate(0deg) scale(1.033) skew(1deg) translate(0px);

}

.recent_posts_with_thumbs a { text-decoration:none;

transition:All 1s ease;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;

transform: rotate(0deg) scale(1) skew(1deg) translate(0px);

-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);

-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);

-o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);

-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);

}

.recent_posts_with_thumbs a:hover{

transform: rotate(0deg) scale(0.586) skew(1deg) translate(0px);

-webkit-transform: rotate(0deg) scale(0.586) skew(1deg) translate(0px);

-moz-transform: rotate(0deg) scale(0.586) skew(1deg) translate(0px);

-o-transform: rotate(0deg) scale(0.586) skew(1deg) translate(0px);

-ms-transform: rotate(0deg) scale(0.586) skew(1deg) translate(0px);

}

.recent_posts_with_thumbs strong {font-size:10px;}

</style>

var numposts = 4;

var showpostthumbnails = true;

var displaymore = false;

var displayseparator = false;

var showcommentnum = false;

var showpostdate = false;

var showpostsummary = true;

var numchars = 100;</script>

</a>

</span>

Меняем адрес блога на свой http://egepro100.blogspot.ru/ Указываем сколько сообщений будет выводиться var numposts = 4; а также можно поменять картинку Recent Post http://s17.postimage.org/k5qi3xfkb/recent.jpg на свою или же удалить её. Сохраните гаджет. Ну вот и всё. Желаю всем удачи.