BS | 扩展式查看の随机帖子

 

上次写了最新评论的教程，现在是随机帖子:3

如上图显示了，有标题、标题图片、日期和留言。

❤________________________

  模 板 >> 修改 H T M L 
 把以下框内の代码，复制到</html>的上面。完成。

<style> #tab1 { background-color:#ffffff; border-bottom:1px solid #999999; border-top:0px solid #999999; border-left:1px solid #999999; border-right:1px solid #999999; width:15px; /* width before hovering */ height:7px; /* height before hovering */ font-size:11px; /* font size */ font-family: '微軟正黑體'; /* font */ color: #808080; border-radius:0px 0px 0px 0px; -moz-border-radius:0px 0px 0px 0px; position:fixed; overflow:hidden; top:0px; right:10px; z-index:999999999; padding:9px; -webkit-transition: opacity 0.7s linear; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out;} #tab1icon{ font-size:16px; /* size of text icon */ color:#808080; /* colour of text icon */ margin-top:-6px; margin-right:0px; text-align:left; -webkit-transition: opacity 0.7s linear; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out;} #tab1:hover{ width:270px; /* width after hovering */ height:380px; /* height after hovering */ border-radius:0px 0px 3px 3px; -moz-border-radius:0px 0px 3px 3px; opacity:0.95} </style> <div id="tab1"> <center> <div id="tab1icon"> ✎</div> <br /> <style> #random-posts img{border-radius: 70px;float:left;margin-right:5px; width:40px;height:40px;background-color: #F5F5F5;padding: 3px;transition: all 0.2s linear 0s;} #random-posts img:hover{opacity: 0.6;} ul#random-posts {list-style-type: none;padding: 0px;} #random-posts a {font-size: 12px;text-transform:uppercase; padding: 0px auto 5px;} #random-posts a:hover {text-decoration: none;} .rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;} #random-posts span {} #random-posts li {margin-bottom: -10px;border-bottom: 0px solid #000000; padding: 4px 4px -5px;} </style> <ul id='random-posts'> <script type='text/javaScript'> var rdp_numposts=7; var rdp_snippet_length=0; 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/AVvXsEhyIfy9HHDHyV4jqKQ1GGxEOt7G2k41PlelrMdJFnbiUvNj9ZzzSu-2jmVIhyfIK4F4sgHKvYDCyrUC-9U05nWWV8IN4w3sVxzLx3qaRbAFziRxMTTFbMopHiLWD7CIoMEWvqdpfeS1e8o/s1600/no_thumb.png"}}};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> </div> </a> </span> </div>

有任何疑问可留言/.\