Новое в блоге
Loading...
24 апр. 2013 г.

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

Приветик всем! Только с вами попрощался, а я уже спешу поделиться новым виджетом. Виджет для blogger: последние сообщения с зумом. Это когда наводишь курсором мышки на виджет последних статей, он увеличивается в размерах. Смотрится очень красиво и эффектно.

Как обычно можно работу гаджета, я демонстрирую в демо блоге. Проверяем здесь. Кому подходит прошу следовать моей инструкции.


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

<center><img src="http://s17.postimage.org/k5qi3xfkb/recent.jpg" width="145" height="43" alt="Последние сообщения" /></center>
<style type="text/css">
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>
<script style='text/javascript' src='http://bluekut-widgets.googlecode.com/files/recent-posts-widget-with-images.js'></script>

<script style='text/javascript'>
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>
<script src='http://new-school-blogger.blogspot.ru/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=1251654968934554442&widgetType=HTML&widgetId=HTML1&action=editWidget&sectionId=sidebar-right-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML1"));' target='configHTML1' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>

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

Сергей - блог Школа Blogger(а)

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

4 коммент. :

  1. Сергей, спасибо большое за красивый и необычный виджет!
    Думала ,что установила все необходимые примочки в блоге. Но этот очень кстати!
    Каким-то чудом, сумела даже поменять цветовую гамму под стиль своей страницы.
    Если Вам мнтересно посмотреть, виджет установила в нижней части блога http://lysulka.blogspot.com

    ОтветитьУдалить
    Ответы
    1. Привет,Лариса! Необычное место для установки Вы нашли. Я бы и не догадался.Молодец! (h)

      Удалить
    2. :-) Вообще-то, Юля, но ничего!
      У меня и так боковая панель тянется на километры. Подумала, а вдруг ... и получилось под публикацией.
      Остаюсь в ПЧ, чтоб поискать ещё полезностей и не потерятся! (c)

      Удалить
    3. Да,боковую панель не мешало бы сократить.Не все смогут добраться до футера.Вот мой новый блог,там можно чего нибудь подыскать-http://shkolablogger.ru/ :)

      Удалить

 
Footer