Гаджет случайные сообщения с миниатюрами.

Всем привет. Не так давно публиковала пост как установить в блоге гаджет случайных постов. Где при каждой новой загрузке страницы выводятся другие сообщения вашего блога в виде списка. Сегодня 2 варианта виджета случайных постов с названием, картинками, датой публикации и количеством комментариев. Информация также будет обновляться рандомно.
Работают они корректно и достаточно красиво вписываются в дизайн. Выбирайте понравившийся вариант, копируйте код и устанавливайте в гаджет HTML/JavaScript. 

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


<style type="text/css">
 #random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:70px;height:70px;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='Comentarios';
    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="http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/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>


Если немного поиграться со стилями, то можно получить такой вариант гаджета случайный пост.


Добавили лишь закругление углов и изменили цвет и толщину рамки. Кстати, в первом коде тоже можно подобрать другие стили на свой вкус и цвет.

#random-posts img{float:left;margin-right:10px;border-radius: 100px; border:3px solid  green; background:#FFF;width:70px;height:70px;padding:3px}

Спасибо за ваше внимание. Всем удачи и до новых встреч.

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

Введите Ваш email


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

  1. Спасибо! Сделала, правда, 10 случайных публикаций. 5 показалось маааало))))
    Просто огромное спасибо, да.

    ОтветитьУдалить
    Ответы
    1. Maryysia M, очень рада, что пригодилось.

      Удалить
  2. Виктория! Если бы видели, как у меня красиво на тестовом блоге получилось! Он как раз у меня сейчас зелененький. Картинка в зеленых кружочках - КРАСОТА! Где картинки нет написано - No Image! На блогах у меня все картинки вставлены по ссылке. Их не будет в гаджете видно? Тогда будет некрасиво!

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

      Удалить
  3. Виктория! Ах, какая красота! Поставила гаджет (7 постов, может оставить 5 как у вас?)на ВФонарике. На Блоге Васьки уже стоит гаджет случайных постов (раньше вы создали). Там,где есть картинки особенно красиво! Посмотрите мой Волшебный фонарик.

    ОтветитьУдалить
    Ответы
    1. Ирина, отписалась на почту Вам.

      Удалить
  4. Ответы
    1. Семён, спасибо, что заглядываете ко мне.

      Удалить
  5. На любой вкус.. Вика, ты, как всегда, придумаешь что-то классное. Хороший гаджет, полезный для блога.

    ОтветитьУдалить
    Ответы
    1. Спасибо, Наташа. Такие случайные сообщения наверное интересней для пользователей. Например самые популярные подолгу висят на странице.

      Удалить
    2. Интересней, однозначно. Каждый раз показываются новые посты, о которых, бывает, и сама позабудешь уже со временем..))

      Удалить
    3. Это точно, Наташа. Что-то задумалась не поставить ли у себя. Тут скрипт поп. сообщений у многих полетел. Надо подумать.

      Удалить
  6. Вика, спасибо. Установила. Согласна, его вполне можно использовать вместо "популярных"

    ОтветитьУдалить
    Ответы
    1. Любовь, сбегала к Вам в гости. Прекрасная альтернатива.

      Удалить
  7. Супер!
    Вика, а можно сделать что-нибудь подобное с самыми популярными постами? Определять их либо по просмотрам, либо по количеству комментариев и выводить подобным образом.

    ОтветитьУдалить
    Ответы
    1. Олли, так популярные посты и выводятся по просмотрам. А случайные вот как то так. Слушай, у кого муж программист?

      Удалить
    2. Ну так муж же :) А я тут пытаюсь сама разобраться :)

      Удалить
    3. Аааа. Вот оно что. Дело хорошее. Но как это на Волдпресс сделать или у тебя, я тоже только могу догадываться. Помочь не могу.

      Удалить
  8. Елена, сбегала к Вам посмотрела. Пользуйтесь. Обратила внимание, что у вас справа в сайдбаре флеш загораживает их немного.

    ОтветитьУдалить
  9. Здравствуйте Вика! Очень благодарна Вам за Ваш блог. Я очень многое узнала и использую в своих блогах. И этот очень красивый гаджет тоже. В кодах я профан, а хотела бы чтобы кроме круглого варианта был ещё и квадратный. Помогите, если можно.

    ОтветитьУдалить
    Ответы
    1. Людмила, так код и дан на квадратные. Прочитайте ещё раз статью внимательно.

      Удалить
    2. Как же так? Я опять проверила. У меня на обеих блогах получаются круглые в белой рамке. Когда меняю код, где вы говорите что рамка зелёная с закругленными краями получаются точно такие же круглые картинки только в зелёной рамке.

      Удалить
  10. Людмила, я не пойму что Вы делаете. Просто скопируйте ничего не меняя код и вставьте в гаджет ничего не меняя . Покак вот специально для вас установила его здесь. Посмотрите, потом удалю. https://dlynaglydnosti.blogspot.ru. Картинки квадратные.
    Не меняйте ничего в коде.

    ОтветитьУдалить
    Ответы
    1. Так в том и дело ,что я ничего не меняю.

      Удалить
    2. Похоже это какой-то сбой. Вот сейчас опять скопировала(даже не вставляла предварительно в блокнот), вставляю в первый блог - круглый с белыми границами(там этот гаджет ещё в трёх местах вставлен), сразу же (повторно не копировала) ставлю в другой блог- круглые с зелёными границами(правда где-то секунду когда они грузились сразу были квадратными,но тут же стали круглыми).Во втором боге этот гаджет тоже в трёх местах и везде круглые с зелёными кнопками.
      Статью я читала. Всё в ней понятно. Я надеялась, что будут квадратные,но увы.
      На блогах ещё стоят блоггеровские популярные сообщения Они квадратные. Я хотела ещё и квадратный вариант, так как у меня на блогах получается много круглых, хотелось разнообразия. А поменять я ничего не могу(просто не умею).

      Удалить
  11. Людмила, вышлите мне именно то, что вы вставляете на почту, через форму связи выше. Я посмотрела 2 Ваших блога. Вот например про Бердянс у вас там именно этих гаджетей 3 штуки. И в одном из них вы добавили строку
    #random-posts img{float:left;margin-right:10px;border-radius: 100px; border:3px solid green; background:#FFF;width:70px;height:70px;padding:3px}
    , а именно border-radius: 100px; вот они и круглые.
    Уберите все и оставьте только один. И в копилке у Вас аж 5 и тоже в одном border-radius: 100px; Такой гаджет только один работает.
    Уберите все и заново установите только с кодом без border-radius: 100px; border:3px solid green;. И где вы хотите квадратные и где круглые?

    ОтветитьУдалить
    Ответы
    1. Оставлять один я не хочу, они мне нравятся))). Тем более что все они одновременно показывают разные сообщения. Раз не получается разнообразить пусть будет как есть.
      Код я послала.
      Извините, если что не так. Учусь)))

      Удалить
  12. Всё в порядке. Ответила Вам на почту.

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

Пользовательский поиск
Foto Saya
My Photo