Оригинальный виджет случайных сообщений

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



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

А это код для него. Настройки разберём ниже, чтобы подогнать их  под ваш дизайн.

<style>.random-post-rounded-list ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);}
.random-post-rounded-list a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
margin: .5em 0;
background: #CC9999 ;
color: #EDE2E2;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;}
.random-post-rounded-list a:hover{background: #eee;}
.random-post-rounded-list a:hover:before{ transform: rotate(360deg);}
.random-post-rounded-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -0.8em;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
border: .2em solid  #FFCCCC;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
background-color: #9999CC;
color: #F5F3F3;}</style>

<div class="random-post-rounded-list"><ol>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write();
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item ="<li>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></li>";
document.write(item);}}
}document.write();}</script>
<script src="http://www.shpargalochki.ru//feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script></ol></div>

Красным цветом в первом случая я выделила фон анонса сообщения и синим цвет шрифта. В конце кода -красным фон кружочка с номером . Зелёным-размер и цвет его рамки. Значение left: -0.8em;-возможно, придётся немного его уменьшить или увеличить. Это расстояние от границы виджета. 

Готовый код устанавливаем в гаджет HTML/JavaScript, даём название виджету и перемещаем в нужное место шаблона. 

Сегодня у меня всё. Ставлю точку в очередной шпаргалке. Спасибо, что читаете мой блог. 

Удачи нам всем.



оформите подписку на новые шпаргалки

Введите Ваш email ...:


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

  1. Здравствуйте. Классный виджет. Установил, но название статей не отображается. Вроде все работает, но названий нет. При наведении на строку всплывает только подсказка ссылки. Может поможете.

    ОтветитьУдалить
    Ответы
    1. Вячеслав , если Вы имеете ввиду свой блог http://www.sokmen.in.ua/ то даётся мне , что конфликт идёт из-за кнопки случайный пост. Которая у Вас уже установлена. Или с другим. Такое бывает.У Вас достаточно много там скриптов установлено. А зачем 2 одинаковых практически.

      Удалить
  2. Понял я. Была примерно такая мысль. Спасибо.

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

Пользовательский поиск