Виджет случайных сообщений Блоггер
Какие бывают гаджеты:
Избранное сообщение — этот гаджет есть в блоге
Популярные сообщения — гаджет имеется в блоге
Далее идут те, которых нет в Блоггере
Похожие статьи — устанавливается под сообщением.
Последние сообщения — виджет показывает последние новые статьи.
Случайные сообщения — показываются статьи, выбранные случайно. При перезагрузке они вновь меняются.
Об оформлении последних и популярных сообщениях я писала. Теперь хочу показать несколько виджетов случайных статей.
Виджет 1
Гаджет показывает дату поста, количество комментариев и короткий анонс статьи. Если в сообщении есть фото, то оно будет показано в уменьшенном виде, если нет - будет стоять картинка нет фото. Добавляем код в Дизайн-Добавить гаджет-HTML/JavaScript.
<style>ul#random-posts img {float: left;margin-right: 10px;margin-bottom: 10px;}ul#random-posts li {border-bottom: 1px solid #d2d2d2;padding-bottom: 10px;margin-bottom: 10px;}.rp-info {font-style: italic;color: #000000;}.rp-snippet {font-style: normal;color: #000000;}ul#random-posts a {font-weight: bold;color: #000000;}</style><ul id='random-posts'><script type='text/javaScript'>var rdp_numposts=5;var rdp_snippet_length=80;var rdp_info='yes';var rdp_comment='Comments';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)+"…";};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/AVvXsEjyRreBttAljeN765W6qbtTFcn3mPDCFXhwD8JAj9G9Rqzu07rYvK70Zi6D1ksZ21O2suAj6Pram0yYe7s0l8gtnf_RJ9p5meAZkmoFPm6a5zqTPolXxJV9fGotLfVWTHxuFmxzRThuuzGb/s77/no+image.jpg"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><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>
Жёлтым выделила ссылку на картинку Нет фото. Установить можно свою.
Оранжевым — сколько показывать сообщений
Красным — количество символов в анонс
Зелёным выделила в коде слово yes, если его поменять на no, то дата и количество комментариев не будут показаны.
Виджет 2
Простой виджет без картинок. Перечислены только списком названия статей, да перед каждым названием стоит маленькая картинка, которую можно поменять на свою. Устанавливаем виджет, как и первый.
Код:
<style>#bo-rp-box{float:left;margin-bottom:10px;margin-top:0px;}#bo-rp-box ul{margin:0px;float:left;margin-left:20px;padding:0px;}#bo-rp-box li{vertical-align:middle;list-style:disc outside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJp8XKvONtr2VbG348jAqH7pTckXEe6MWW39S5uynYxgyypWTvp6WPhlbn5MPTegxbzajupUZsJb-heY2Nk6exiWnlWf2m75vgGJfZMi19oH9PNimwfSoNxUUZohZYUtn5ZmV4iKRlRPNA/s15/4197650224.png"); margin-bottom:0;width:auto;margin-top:0;padding:10px 0;}#bo-rp-box a{color:#0F0F0F;text-decoration:none;font-size:14px}#bo-rp-box a:visited {text-decoration: none;color:blue;}#bo-rp-box a:hover{color:blue}</style><script>function rp_results_label(r){for(var e=0;e<r.feed.entry.length;e++){var l=r.feed.entry[e];rpTitles[rpTitlesNumb]=l.title.$t;for(var t=0;t<l.link.length;t++)if("alternate"==l.link[t].rel){rpUrls[rpTitlesNumb]=l.link[t].href,rpTitlesNumb++;break}}}function removeRandomDuplicate(){for(var r=new Array(0),e=new Array(0),l=0;l<rpUrls.length;l++)contains(r,rpUrls[l])||(r.length+=1,r[r.length-1]=rpUrls[l],e.length+=1,e[e.length-1]=rpTitles[l]);rpTitles=e,rpUrls=r}function contains(r,e){for(var l=0;l<r.length;l++)if(r[l]==e)return!0;return!1}function showRandomLabels(){for(e=0;e<rpUrls.length;e++)rpUrls[e]==currentposturl&&(rpUrls.splice(e,1),rpTitles.splice(e,1));var r=Math.floor((rpTitles.length-1)*Math.random()),e=0;for(rpTitles.length>1&&document.write("<ul>");e<rpTitles.length&&e<20&&e<maxresults;)document.write('<li><a href="'+rpUrls[r]+'">'+rpTitles[r]+"</a></li>"),r<rpTitles.length-1?r++:r=0,e++;document.write("</ul>")}var rpTitles=new Array,rpTitlesNumb=0,rpUrls=new Array;</script><div id="bo-rp-box"><script src="/feeds/posts/default?alt=json-in-script&callback=rp_results_label&max-results=10"></script><script>var currentposturl="";var maxresults=10;removeRandomDuplicate(); showRandomLabels();</script></div>
Оранжевым выделила ссылку на картинку. Она должна быть 15х15 px. На прозрачном фоне.
Красным отметила количество постов в виджете.
Виджет 3
С картинками, количеством комментариев, датой выхода сообщения, но с круглыми картинками.
<style>#bo-random-posts img{background:#fff;height:50px;float:left;width:50px;margin:5px 5px 0px 0px;-webkit-border-radius:50%;border-radius:50%;-moz-border-radius:50%;padding:3px;}#bo-random-posts img:hover{opacity: 0.5;filter: alpha(opacity=50);}ul#bo-random-posts {list-style-type: none;background-image: url("");background-repeat: no-repeat;}#bo-random-posts li {margin: 10px 0;}#bo-random-posts li a{padding: 5px 0;text-decoration: none;}.bo-random-summary {display: block;}</style><ul id='bo-random-posts'><script>var borp_number = 5;var borp_details = 'yes';var borp_chars = 60;var borp_details2 = 'yes';var borp_comments = 'Comments';var borp_commentsd = 'Comments Disabled';var borp_current = [];var total_randomposts = 0;var borp_current = new Array(borp_number);function randomposts(json) { total_randomposts = json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');function getvalue(){for(var r=0;r<borp_number;r++){for(var n=!1,o=get_random(),t=0;t<borp_current.length;t++)if(borp_current[t]==o){n=!0;break}n?r--:borp_current[r]=o}}function get_random(){return 1+Math.round(Math.random()*(total_randomposts-1))}</script><script>function random_posts(t){for(var e=0;e<borp_number;e++){var r=t.feed.entry[e],s=r.title.$t;if("content"in r)i=r.content.$t;else if("summary"in r)i=r.summary.$t;else var i="";if((i=i.replace(/<[^>]*>/g,"")).length<borp_chars)var a=i;else{var n=(i=i.substring(0,borp_chars)).lastIndexOf(" ");a=i.substring(0,n)+"…"}for(var o=0;o<r.link.length;o++){if("thr$total"in r)var l=r.thr$total.$t+" "+borp_comments;else l=borp_commentsd;if("alternate"==r.link[o].rel){var m=r.link[o].href,c=r.published.$t;if("media$thumbnail"in r)var u=r.media$thumbnail.url;else u="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Traey4EKD6PRrx7MwRGZGjosDMDiGcbZF8MSv-iJCoVGnUYr1ckHFl8ug9yH2mfSzLTwCA1XNbRfUJWV6UbD49M4MA44Tu7ovodo91prZ57c0ztTFDUpwW3cKnXh83Zx17Zj-A3WPKT7/s0/%25D1%2584%25D0%25BE%25D1%2582%25D0%25BE.jpg"}}document.write("<li>"),document.write('<img alt="'+s+'" src="'+u+'"/>'),document.write('<div><a href="'+m+'" rel="nofollow">'+s+"</a></div>"),"yes"==borp_details&&document.write("<span>"+c.substring(8,10)+"."+c.substring(5,7)+"."+c.substring(0,4)+" - "+l),"yes"==borp_details2&&document.write('<span class="random-summary">'+a),document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<borp_number;i++)document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+borp_current[i]+'&max-results=1&callback=random_posts"><\/script>');</script></ul>
Зелёным выделила в коде ссылку на картинку Нет фото. Она нужна, если в статье нет картинки.
Красным — сколько статей отмечено в виджете.
Жёлтым — количество символов в описании статьи.
Оранжевым выделила первое слово yes , если заменить его на no, то количество комментариев и дата не будут показаны.
Синим выделено второе yes - если его поменять на no, то не будет показан текст анонса статьи. Останутся только картинки и названия сообщений.
Комментарии со спамом удаляются.