Blogger 隨機文章+Youtube縮圖

5   Comments

blogger random posts
分享一個結構簡單的隨機文章, 當您的文章以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
Blogger 隨機文章+Youtube縮圖
Subject : Blogger 隨機文章+Youtube縮圖
Author : - Dream Talker Updated at: 10:52 AM
Votes : 100% - 5.0 - based on 2015
Blogger隨機文章加縮圖, 可顯示Youtube影片縮圖
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見,歡迎參與留言。
◆ Disqus匿名留言,信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言,可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵,留言須使用『@Mark X』在訊息中,以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. 謝謝您的文章,我安裝好了,也搭配wayne的浮動語法,讓隨機文章可以浮動在側邊。

    不過,有個問題想要請教一下,一開始整齊縮在側欄的標題,開始浮動時就會往右攤開,想請教這是否有改善的方法呢?

    網址:http://www.bigsishead.com/

    謝謝您!

    ReplyDelete
    Replies
    1. 1. 請看浮動程式碼 var id = $("#random-list"), 改成 var id = $("#HTML4"), 我沒有操作過 Wayne 這個效果, 如還是不正常, 要請教他如何改.
      2. 阿冠有使用浮動導覽列, 同時使用工具欄浮動效果時很可能交疊遮蔽. 工具欄浮動高度加點距離才不會打架, topH = 0, 可改成 topH = 50.

      Delete
    2. 改成"HTML4"就解決標題被蓋掉的問題。修改top的數字就不會打架,另外字會攤開的問題我再另外請教wayne,謝謝您!

      Delete
    3. 我找一下以前寫的程式碼給妳參考.

      Delete
    4. wayne修好程式碼給我,現在已經沒問題了^^

      Delete