Анонсы и навигация-два в одном.

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

Возможности гаджета последних сообщений.

Идея гаджета не моя,взята в интернете.Изначально идея показалась похожей на все пред идущие и не интересной.Но при тестировании в онлайн редакторе и дальнейшем рассмотрении и подгонки необходимых параметров и настроек под себя,оказалось что первое мнение было несколько ошибочным,тем более,что использовать его можно по разному.Можно добавить на страницу как отдельный раздел (можно посмотреть у меня на главной) или создать что-то типа анимированной карты блога или же просто добавить на страницы в качестве виджета совмещающего в себе функцию постраничной навигации и вывода анимированный анонсов последних
сообщений для блога.

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

Установка идентичная,как и во всех аналогичных случаях.Первое это необходимо добавить стили для нашего блока вывода анонсов и нумерации страниц. Копируем приведённый ниже код CSS и устанавливаем или в шаблон или же в гаджет HTML и JavaScript

<style scoped="" type="text/css">
#toc-outer { color:black; font:normal 11px/14pxArial,Sans-Serif; height:auto; margin:0 auto; overflow:hidden;padding:0;
  text-align:left;}#loadingscript {padding:0px 0px;height:37px;text-indent:-9999px;color:transparent;
  background:white  url('') no-repeat 50% 50%;}
.itemposts { float: left;height: 180px;overflow: hidden;width: 47%;box-shadow: 2px 15px 15px #C3C3C3;
    background: none repeat scroll 0% 0% #F9F9F9;
    border: 1px solid #ссс; margin: 3px 5px 8px;
    padding: 0px 3px;
}.itemposts h6 { border-bottom: 1px solid #CCC;
    color: #333; font: bold 12px Arial; height: 15px;
    overflow: hidden;text-transform: none;margin: 0px 0px 5px;padding: 3px 6px !important;
}.itemposts h6 a:hover {color:#38f;text-decoration:none;
}.itemposts img { background-color:#fff;border:1px solid#ccc;
  -moz-border-radius:43px;-webkit-border-radius:43px;
  border-radius:43px;float:left; height:65px;margin:0 7px 5px 0;padding:3px;width:65px;z-indent:99999px;
}.itemposts .iteminside {}.itemposts .itemfoot {
    border-top: 1px solid #CCC;clear: both;
    overflow: hidden; padding: 4px 5px;}
.itemposts .itemfoot a.itemrmore {color:#335; float:right;
  font-weight:bold;text-decoration:none;
}.itemposts .itemfoot a.itemrmore:hover {text-decoration:underline}#itempager {clear:both;
  padding:10px 0;
}#pagination,#totalposts {color:#fff;display:block;
  font:bold 10px Verdana,Arial,Sans-Serif;
  margin-bottom:10px;text-align:center; padding:0;
}#pagination span, #pagination a { color: #FFF;display: inline; margin: 0px 1px;padding: 2px 5px;text-indent: 0px;
    background-color: #068BC9;
    background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%);border: 1px solid #3161C2; text-decoration: none;border-radius: 10px;
}#pagination a:hover {background-color:#333}
#pagination span.actual {background-color:black}
#pagination span.hidden {display:none}</style>

Вторая часть: скрипт с настройками количества вывода сообщений на страницу.
Если вы уже определились с выбором места использования данного гаджета то следует добавить расположенный ниже код в то место,где соответственно планируется вывод анонсов постов блога.Или на страницу,как отдельный элемент
дизайна, или же в гаджет HTML и JavaScript который будет использоваться на
постоянной основе для всех страниц. При использовании нескольких вариантов
следует запомнить,что приоритетное значение будет иметь код вставленный в гаджет HTML и JavaScript и при наличии двух различных кодов стоит изменить значения или же запретить показ гаджета для данной страницы.

<script src="http://yourjavascript.com/16094131351/sitemaps.js"></script> <script> var showPostDate   =true ,     showComments   =true ,     idMode         = true,     sortByLabel    = false,     labelSorter    = "JQuery",     loadingText    = "Loading...",     totalPostLabel = "Number of posts:",     jumpPageLabel  = "page",    commentsLabel  = "",     rmoreText      = "Читать дальше&#9658;",     prevText       = "вперёд",     nextText       = "назад",     siteUrl        = "http://v-gol.ru",   /* адрес блога изменить на свой */     postPerPage   = 2,   /* количество сообщений */     numChars       = 150,   /* длина анонса */     imgBlank       = ""; </script>

Смотреть ещё Слайдер- ротатор для блогаРотатор для баннеровЭффекты для фото на CSS.Как добавить форум на блогОформление блоков для кода

Настройки кода

Настроек конечно тут масса и все описывать не буду назову только основные.Стили CSS,если вас устраивают,можно оставить если же требуются изменения в соответствии с дизайном, то вставьте весь код CSS и JavaScript в онлайн редактор и произведите настройки в соответствии со своим дизайном.Основные настройки внесены непосредственно в сам код скрипта и подписаны,так что разобраться не составит труда.Пример использования гаджета на странице V-G-блог.