[Blogger] 如何允許訪客在 Blogger 留言板中插入圖片及 Youtube 影片?

image

   一直以來,Blogger 留言板只允許純文字 (Plain text) 及少數 HTML 標記存在。最近忽發奇想,想試試打破 Blogger 留言板的局限,看看能否在留言裡插入圖片。

   於是我 Google 了一下,發現有外國 Blogger 成功透過 Javascript 實現插入圖片及短片。然而,許多編碼早已失效,在新式留言板上無法使用。正當要打消念頭之際,無意間看到一篇有關在 Blogger 留言版插入表情圖案的教學文章,自己試過有效的。故此我馬上參考那篇文章提供的編碼,並且把重要部份修改,結果成功在 Blogger 留言上顯示圖片及 Youtube 影片

   分享出來希望對 Blogger 們有用吧微笑

PS: 因小弟專長不再於 JavaScript,若有編程熟手對此 script 有意見,非常歡迎您們提出

 

在 Blogger 留言板加入插圖及 Youtube 影片功能教學

  • 首先,到 Blogger 後台 –> 範本,按右上角的 “備份/還原
  • 點 ”下載完整範本”來進行備份,以防萬一

image

  • 然後點 ”編輯 HTML

image

  • 在程式碼框中按 Ctrl+F,搜尋 <b:loop values='data:post.comments' var='comment'>

image

  • 在這句編碼上面加入<div id='multimediacm'>

image

  • 然後慢慢往下滾動,找出 </b:loop>

image

  • </b:loop> 下面加入 </div>

image

  • 最後,再按Ctrl+F找出 </body>,在上面加入 <script charset='utf-8' src='http://googledrive.com/host/0B97kwv3iQTFybzlqT0pSbnBnX2s' type='text/javascript'/>

image

  • 這樣就大功告成,但怎樣用呢?

 

如何插入圖片及 Youtube 影片?

  • 插入圖片 –>  :img:圖片網址:eimg:
  • 插入 Youtube 影片-> :youtube:影片ID:eyoutube:

           範例影片:http://www.youtube.com/watch?v=c8w5WUY70WI

            編碼–> :youtube:c8w5WUY70WI:eyoutube:

image

觀看示範

   此 Blog 現在也啓用了插圖/影片功能,有興趣的網友不妨在下面留言板試試喔

PS: 小弟剛為看海的龜開設了新 Google+ 專頁,希望網友們支持一下眨眼睛

https://plus.google.com/b/100075614728440664147

如果各位對以上方法有甚麼問題或意見,歡迎留言與看討論一下喔:-)

Simon Tsang

用心記錄所見所聞、所思所想

18 則留言:

  1. 範例

    :img:http://2.bp.blogspot.com/-OmsEdlpIuWE/UQTox478GRI/AAAAAAAAM48/r_ZSemP3sLQ/s1600/logo.png:eimg:

    :youtube:iuZ2l_GzUek:eyoutube:

    回覆刪除
    回覆
    1. 手機版本看不到...

      刪除
    2. @匿名
      只要在手機版範本中做類似的設定就可以,但為了減輕手機版網頁的負荷,我在手機範本沒加入上面的編碼

      刪除
    3. 作者已經移除這則留言。

      刪除
  2. 回覆
    1. @L.S.K.
      入夜娛樂最佳之選 :img:http://www.iconsdb.com/icons/preview/black/facebook-like-xxl.png:eimg:

      刪除
  3. 作者已經移除這則留言。

    回覆刪除
  4. :img:http://2.bp.blogspot.com/-OmsEdlpIuWE/UQTox478GRI/AAAAAAAAM48/r_ZSemP3sLQ/s1600/logo.png:eimg:

    回覆刪除
  5. <img src='http://2.bp.blogspot.com/-OmsEdlpIuWE/UQTox478GRI/AAAAAAAAM48/r_ZSemP3sLQ/s1600/logo.png">

    回覆刪除
  6. :img:http://www.freeartwallpapers.com/wp-content/uploads/2014/07/1470000-1024x640.jpg:img:
    img:http://www.freeartwallpapers.com/wp-content/uploads/2014/07/1470000-1024x640.jpg

    回覆刪除
    回覆
    1. @匿名
      我暫時停用了這個script喔

      刪除
  7. Hello!
    Working, but can you tell us how to resize inserted image?

    回覆刪除
    回覆
    1. @Renata A Król
      thats easy :), just download the script from (http://googledrive.com/host/0B97kwv3iQTFybzlqT0pSbnBnX2s') then customize the width and height in img tag. Save the js file, grab its public URL, edit the js link in the code and it is done. Hope it helps :D

      刪除
  8. @Simon Tsang, thanks for your help :)

    回覆刪除
  9. :img:http://i.imgur.com/aTAExDR.gif:eimg:
    看上面的圖片好像都失效了??

    回覆刪除
  10. :img:http://i.imgur.com/aTAExDR.gif:eimg:
    看上面的圖片好像都失效了??

    回覆刪除
  11. 作者已經移除這則留言。

    回覆刪除

歡迎各位留言