Виджет “Последние сообщения”

Рассмотрим 2 варианта виджетов "Последние сообщения" в сайдбаре блога, найденных на блоге Help Blogger. Tricks And Tutorials For You Blog (Помощь Blogger. Советы и учебники для вашего блога).

Вариант 1.
В виде простого списка.
Источник: Simple Recent Posts Widget For Blogger/Blogspot

Виджет "Последние сообщения". Вариант 1.

Код-1 (вставляется в гаджет "HTML/JavaScript")

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://exp13blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>
Пояснения к коду:
numposts = 10 - количество отображаемых последних сообщений (можно изменить)
numchars = 100 - количество символов, отображаемых в названии сообщений
http://exp13blog.blogspot.com - адрес вашего блога

Вариант 2.
Более интересный виджет с миниатюрами изображений, первыми строчками сообщений и полосой прокрутки.
Источник: Recent Posts Widget With Thumbnails For Blogger/Blogspot

Виджет "Последние сообщения". Вариант 2.

Код-2 (вставляется в гаджет "HTML/JavaScript")

<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"http://exp13blog.blogspot.com/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://helplogger.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://helplogger.blogspot.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(http://3.bp.blogspot.com/-oxTuqVj1ziA/T6P6wtxqsgI/AAAAAAAACBE/wWR0bb2gfuE/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>
Пояснения к коду:
http://exp13blog.blogspot.com - адрес вашего блога
"height":"500" - высота виджета в px (можно изменить)
"count": 8 - количество отображаемых в виджете последних сообщений (можно изменить)


Поделиться в соц. сетях:


3 комментария :

  1. Виджет "Последние сообщения" можно, видимо, также оформить при помощи RSS-ленты (см. "Последние комментарии")
    :)

    ОтветитьУдалить
    Ответы
    1. [img]https://dl.dropboxusercontent.com/u/54357058/posled-soob.png[/img]

      Удалить
  2. Этот комментарий был удален администратором блога.

    ОтветитьУдалить

В комментариях есть возможность вставлять картинку:
[img]URL на картинку[/img]
а также использовать смайлы и HTML-теги:
<b>жирный шрифт</b>
<i>курсив</i>
<a href="URL">текст ссылки</a>