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


Отправить комментарий