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

2 варианта виджета случайные сообщения

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

Ну и перейду к теме данного сообщения. Покажу 2 варианта, как отобразить случайные посты блога. 

Будет показан заголовок поста
Оформленная в рамочку миниатюра к сообщению
Дата публикации
 Количество комментариев к сообщению

Установка абсолютно простая - копируем код без всяких изменений, как есть,
 и  устанавливаем его в гаджет HTML/JS в любом месте макета.


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


Ниже для наглядности скриншоты. 

Вариант 1.

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


Код

<style>
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}</style>

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Комментариев';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring (0,rdp_snippet_length) ;var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj122OBgr4CpqhZ2jfwfd-WO0Hcu4SMqx3RsHGMfSk7ZHpOXhHDP6oacyCcRSgBGAySfJpHFBXrie9Q7OAW3Uu9YlTd_CK0-_b2vmSdCRRBLH-M4JVNztsTH0aroJdJ7zdgsB1Ms4tbeRQ/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>


Вариант 2. Картинки круглой формы

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

Измените немного первый код CSS на такой

<style>
#random-posts img{float:left;margin-right:10px;border-radius: 100%;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}</style>


Здесь же можно поиграться и поменять

Толщину и цвет рамки - border:1px solid #999;

Общий фон - background:#FFF;

Размеры картинки - width:36px;height:36px;

Измените цифру 5; на желаемое число выводимых постов.

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

Всем добра и до встречи. 

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

введите пожалуйста свой email :

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

  1. У меня как-то был подобный виджет (тоже его брала у тебя), но я его убрала. Уже нет места на сайдбаре.

    ОтветитьУдалить
    Ответы
    1. Ирина, да я помню. Этот интересней - с картинками и количеством комментариев. Мне случайные статьи нравится даже больше, чем рекомендуемые и самые популярные.

      Удалить
  2. Очень интересно, хотя опять же не для моих познаний.

    ОтветитьУдалить
    Ответы
    1. Семён. А вот тут ничего и думать не нужно. берёшь любой из кодов, копируешь, идёшь в админпанель, раздел дизайн, добавить гаджет. Из всех предложенных в списке нужно выбрать HTML/JavaScript(он так и называется) и вставить в него скопированный код. И сохранить. Всё.

      Удалить

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