Анонсы в миниатюрах для Blogger

Гаджет анонсов последних сообщений в картинках с выпадающим описанием при наведении курсора на миниатюру для блогов blogspot на платформе Blogger.com.Просто изящно и со вкусом.Без излишеств и наворотов,работает на jQuery,занимает мало места,легко настраиваемый и удобный в обращении.Использование такого блока показа анонсов последних сообщений не только добавит информативности вашему блогу,но  и украсит его.

Установка гаджета анонсов в картинках.

Сначала проверяем есть на блоге jQuery.Если потребуется устанавливаем любой стандартный вариант типа этого.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Дальше небольшой скрипт с настройками который также после изменений следует  добавить там,где планируется показ анонсов,как правило это боковая панель блога.Просто добавляем гаджет НТМЛ и копируем туда скрипт.Хотя если манипуляции с установкой в шаблон вызывают затруднения,можно весь код полностью добавить в гаджет.

<script> var widgetTitle = "Популярные сообщения",     numPosts = 9, // количество миниатюр     numChars = 300, // высота блока     tooltipFadeSpeed = 200, // ширина блока     pictureBlank = "",     blogUrl = "http://v-gol.ru"; // урл блога </script> <script src="http://dte-project.googlecode.com/svn/trunk/rp-mini-gallery.js"></script>

<style type="text/css"> #mini-gallery {   width:240px; /*ширина блока*/   margin:0 auto;   font:normal normal 12px/normal Verdana,Arial,Sans-Serif;   color:#000;  /*цвет текста,размер*/   padding:3px;   background-color:#fff;   -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);   -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);   box-shadow:0 1px 3px rgba(0,0,0,.4);   -webkit-border-radius:30px;   -moz-border-radius:30px;   border-radius:30px; /*скос*/ } #mini-gallery h2 {   font: 12px/normal Arial,Sans-Serif;   color:#fff;/*цвет текста заголовка*/   text-shadow:0 1px 0 black;   text-transform:uppercase;   margin:2px;   padding:7px 14px;   background-color:#044;border-radius:20px;/*цвет фона*/ } #mini-gallery .rp-item {   float:left;   display:inline;   position:relative;   margin:2px;   padding:0;   background:white url('') no-repeat 50% 50%;   width:75px;/*размер миниатюр*/   height:72px; } #mini-gallery .rp-item img {   width:75px;   height:72px;   border:none !important;   margin:0 !important;   padding:0 !important;   background:none !important;   display:none;border-radius:30px;/*скос миниатюр*/ } #mini-gallery .rp-item .rp-child {/*настройки блока выпадающего*/   position:absolute;   top:95%;   left:95%;   z-index:1000;   width:200px;   background-color:white;   border-top:4px solid #044;   -webkit-box-shadow:0 0 3px rgba(0,0,0,.7);   -moz-box-shadow:0 0 3px rgba(0,0,0,.7);   box-shadow:0 0 3px rgba(0,0,0,.7);   padding:10px 15px;   overflow:hidden;   word-wrap:break-word;   display:none; } #mini-gallery .rp-item .rp-child h4 {   font-size:12px;   margin:0 0 5px;   color:#044; } #mini-gallery .rp-item:hover .hidden {display:block} </style>

Смотреть ещё Оформление блоков для кодаСлайдер- ротатор для блога Ротатор для баннеров Гаджет показа анонсов по категориям. Вертикальные вкладки-табы

Ну и CSS с настройками добавляем или в шаблон или же в любой гаджет НТМЛ. Если всё было сделано правильно,то на блоге должен появиться такой симпатичный блок для показа миниатюр анонсов последних сообщений.Основные настройки внесены для удобства в код и при желании можно поэкспериментировать и подобрать более приемлемую цветовую гамму.Не могу продемонстрировать работу гаджета на этой странице (только скрин,как будет выглядеть на странице),так как уже стоят похожие скрипты и происходит конфликт между ними. Воспользуйтесь визуальным онлайн-редактором  скопируйте весь код и проверьте и настройте под свою цветовую гамму.Базовая версия источник.