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 :