Blogger 隨機文章+Youtube縮圖

分享一個結構簡單的隨機文章, 當您的文章以Youtube影片為主並無其他的圖檔可作為縮圖索引時, 可參考試用以下程式碼.
Youtube的嵌入條件需使用 <iframe> 的內嵌碼; Embed的方式則需要透過youtube api抓取縮圖, 我很懶得改這麼複雜的條件碼, 請另尋好心人撰寫. 而且今晚小肥貓一直想踩鍵盤當作磅秤玩, 寫好的內容被一支小腳ㄚ子立即摧毀, 所以省略...


請先加入 HTML/JavaScript 這個小工具. 將以下程式碼複製進去:

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

<ul id="random-list"><script>
var dt_numposts=10;
var dt_snippet_length=100;
var dt_info='true';
var dt_comment='Comment';
var dt_disable='';
var dt_current=[];var dt_total_posts=0;var dt_current=new Array(dt_numposts);function totalposts(json){dt_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/summary?max-results=100&orderby=published&alt=json-in-script&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<dt_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<dt_current.length;j++){if(dt_current[j]==rndValue){found=true;break}};if(found){i--}else{dt_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(dt_total_posts-1));return ranNum};
</script>
<script>
function random_list(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<dt_numposts;i++){var entry=json.feed.entry[i];var dt_posttitle=entry.title.$t;if('content'in entry){var dt_get_snippet=entry.content.$t}else{if('summary'in entry){var dt_get_snippet=entry.summary.$t}else{var dt_get_snippet="";}};dt_get_snippet=dt_get_snippet.replace(/<[^>]*>/g,"");if(dt_get_snippet.length<dt_snippet_length){var dt_snippet=dt_get_snippet}else{dt_get_snippet=dt_get_snippet.substring(0,dt_snippet_length);var space=dt_get_snippet.lastIndexOf(" ");dt_snippet=dt_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var dt_commentsNum=entry.thr$total.$t+' '+dt_comment}else{dt_commentsNum=dt_disable};if(entry.link[j].rel=='alternate'){var dt_posturl=entry.link[j].href;if(y!=-1){dt_posturl=dt_posturl+'?m=0'}var dt_postdate=entry.published.$t;if('media$thumbnail'in entry){var dt_thumb=entry.media$thumbnail.url}else{dt_thumb="default.jpg"}}};document.write('<a href="'+dt_posturl+'" rel="nofollow"><img alt="'+dt_posttitle+'" src="'+dt_thumb+'"/></a>');document.write('<div><a href="'+dt_posturl+'" rel="nofollow" title="'+dt_snippet+'">'+dt_posttitle+'</a></div>');if(dt_info=='true'){document.write('<span>'+dt_postdate.substring(8,10)+'/'+dt_postdate.substring(5,7)+'/'+dt_postdate.substring(0,4)+' - '+dt_commentsNum)+'</span>'}document.write('<div style="clear:both"></div>')}};getvalue();for(var i=0;i<dt_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/summary?alt=json-in-script&start-index='+dt_current[i]+'&max-results=1&callback=random_list\"><\/script>')};
</script> </ul>

幾個數值需要修改
* 1. wigth: 72px; height: 72px - 是縮圖尺寸
* 2. dt_numposts=10; - 隨機文章的顯示篇數
* 3. dt_snippet_length=100; - 摘要的字數
* 4. dt_info='true'; - 不想顯示發文日期與回應數改為: dt_info='false';
* 5. max-results=100 - 搜尋數值請自訂
* 6. default.jpg - 該篇文章沒有任何圖片可當縮圖時, 此圖片網址為預設縮圖, 請準備一張約200px~400px大小的圖片上傳至相簿取得圖片網址置入.

---

Author Summary

Subject : Blogger 隨機文章+Youtube縮圖
Author : Unknown - Dream Talker Updated at: 10:52 AM
Votes : 100% - 5.0 - based on 2015
Blogger隨機文章加縮圖, 可顯示Youtube影片縮圖

Unknown

5 Stars - Reviews