Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

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

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

случайный пост


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

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

<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 ...:


5 комментариев:

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

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

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

    ОтветитьУдалить
  3. Здравствуйте. Мне очень нравится этот виджет. Он(вариант круглый) стоит на обеих моих блогах и хорошо работает. Хотела добавить вариант квадратный, но он всё равно становиться круглым. Я очень слабо разбираюсь в кодах и переделать, чтобы были квадратные фото не умею. Помогите, если можно)))

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Людмила. Значение border-radius: 2em; уберите в двух местах и всё. Тут нужно понимать. Посмотрите вот здесь http://www.internet-technologies.ru/articles/article_3115.html более понятно написано.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML