2012年7月31日

[小工具]Blogger 最新文章+任意尺寸縮圖﹍Json 縮圖資料解析

A+

(Pic from: designdownloader.com, tubaba.com)
2015.10.21 公告:此工具目前已更新到 V2 版,請前往新版安裝頁面:「Blogger 最新文章 V2﹍任意尺寸縮圖 + HTTPS」。


改完「熱門文章縮圖」功能後,下一個要動手的便是「最新文章」加任意尺寸的縮圖功能。找了一些資料後發現:

1. 「不連續x思考斷x面解構」、「0 與 1 謎詭世界」 介紹的 hack 需要「網誌文章資訊提供」設定為 "完整":我個人的考量是,如此一來訂閱者不需上我們的網站就能看到全文內容,且文章內容很輕易地就被複製走,無法設防盜機制。(這個設定位於後台 → 設定 → 其他 → 允許網誌資訊提供)

2. Blogger 提供的最新文章小工具有縮圖功能:但這個小工具在「Blogger 轉址事件」後會受到影響,有的部落格可能會失效,且其縮圖雖能改變尺寸,但實為假象,只是按比例放大縮小而已。

所以花了點時間研究,是否一定要「網誌文章資訊提供」設定為 "完整",才能讓最新文章有縮圖功能?以下為找答案的經過,想直接安裝本文的 hack 請跳「二、修改 Abin 最新文章模組」。


一、從 Json 資料找縮圖

根據「ABIN'S TECH NOTE」,Blogger 的後台資料可以使用以下的網址轉換成 json 格式(更多 json 知識:「Blogger 知識 (筆記)」 → JSON 相關):

http://你的Blog網址/feeds/posts/類型?alt=json-in-script
當「網誌文章資訊提供」設定為 "完整"時,代表以上網址的 "類型" 參數使用 full 可讀取完整文章資料;當未提供完整文章資訊時,讀出來的資料最多到「繼續閱讀」的地方為止。於是我便測試了 summary 參數(只讀取文章摘要)能讀出什麼資料,拿 WFU BLOG 為例,在瀏覽器網址列輸入了以下網址後──

http://wayne-fu.blogspot.com/feeds/posts/summary?alt=json-in-script
我讀到了以下資料(只擷取「熱門文章縮圖」這篇文章的部分):

{"$t":"141"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"25"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-1035379297949976554.post-4683953127496686390"},"published":{"$t":"2012-07-25T12:00:00.000+08:00"},"updated":{"$t":"2012-07-25T15:59:49.326+08:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"電腦- Blogger Hack-小技巧"},{"scheme":"http://www.blogger.com/atom/ns#","term":"電腦- 部落格相關-網頁技巧"}],"title":{"type":"text","$t":"隨心所欲更改 Blogger 熱門文章縮圖的尺寸──兼談圖示製作技巧"},"summary":{"type":"text","$t":"\n(Pic from: psdgraphics.com, dreamstime.com, tubaba.com)Blogger 內建的熱門文章小工具,附帶了一個美觀的顯示縮圖功能,只要文章中有插入任何圖片的話,Blogger 會抓取第一張圖片轉換為縮圖。不過這個小工具的縮圖功能還是有一些限制,例如──\n\n1. 從 Blogger 上傳或是 Picasa 圖床的縮圖可以正常顯示,以外的圖床則無法 100% 保證全部顯示。\n2. 縮圖的尺寸固定為寬 72px,長方形的圖通常會被裁切成正方形,導致圖案不完整。\n3. 文章中沒有任何圖片時就無法顯示縮圖,且無法使用替代圖片當成預設縮圖。\n\n關於第 1 點,自家產品的相容性當然較佳,想避免意外只能盡量不外連其他圖床;而本文的內容就是針對第 2、3 點來 hack。想直接修改程式碼可跳到「三、修改有縮圖、無文章摘要的程式碼」,"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://wayne-fu.blogspot.com/feeds/4683953127496686390/comments/default","title":"張貼意見"},{"rel":"replies","type":"text/html","href":"http://wayne-fu.blogspot.com/2012/07/popular-post-thumbnail.html#comment-form","title":"0 個意見"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1035379297949976554/posts/default/4683953127496686390"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/1035379297949976554/posts/default/4683953127496686390"},{"rel":"alternate","type":"text/html","href":"http://wayne-fu.blogspot.com/2012/07/popular-post-thumbnail.html","title":"隨心所欲更改 Blogger 熱門文章縮圖的尺寸──兼談圖示製作技巧"}],"author":[{"name":{"$t":"WFU"},"uri":{"$t":"http://www.blogger.com/profile/12708224105348267539"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http://1.bp.blogspot.com/-bWA6RXEV2u0/T6CPPhg8q7I/AAAAAAAACh4/XKSxjkXsnRE/s220/wfu-2s.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/-W2pGpR3JY5c/UA99IsJnUkI/AAAAAAAADfE/IzADoe2Kbyk/s72-c/popular-post.jpg","height":"72","width":"72"},"thr$total":{"$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-1035379297949976554.post-7088028120120333461"},"published":{"$t":"2012-
簡單說明一下,json 資料裡面紅字的 entry 陣列,裡面儲存了所有文章資料,每篇文章的第一筆資料都是以綠字的 id 為開頭。

我想找看看在 summary 參數之下,json 會不會儲存文章裏的圖檔,於是搜尋 popular-post.jpg 這張圖檔,結果發現了藍字的部分正是該篇文章的縮圖網址──網址內有 s72-c 這個參數,如果有看過「熱門文章縮圖」的話應該對這個參數不陌生,這正是 Blogger 儲存縮圖的參數;但在以上的資料區段無法找到該篇文章的正常圖片網址。所以答案出來了──

1.「不連續x思考斷x面解構」的原理是利用 full 的模式 json 能讀取全文的圖片資料,當抓不到縮圖資料時,依序搜尋文章中的第一張圖片網址,自行轉換成縮圖。

2. 雖然summary 的模式之下,json 不會儲存任何文章內的圖片資料,但會儲存縮圖資料,只要我們依照「熱門文章縮圖」的開頭所提,文章內的圖片是從 Blogger 上傳、或是連結 Picasa 的圖床,那麼 Blogger 便會自動將文章內第一張圖轉為 72px 的正方形縮圖,就算我們沒有將「網誌文章資訊提供」設定為 "完整",也能在 json 資料裡面讀取縮圖資料。

3. 從以上的 json 資料可以看出,縮圖網址儲存的位置為:json 資料 → entry 陣列 → media$thumbnail 物件 → url 字串,瞭解這一點後就可以使用 javascript 來讀取資料了。



二、修改 Abin 最新文章模組

我的最新文章模組是使用「Abin 版本」,雖然介面陽春但程式碼簡潔、執行效率高,要自行擴充功能很容易,「不連續x思考斷x面解構」便是從 Abin 版修改的,不過他是針對自己的圖床 flickr 來優化、且要求「網誌文章資訊提供」設定為 "完整",所以我就自己來改 Abin 版本,結果發現這個修改還滿簡單的,其實並沒增加多少程式碼,只要你文章內的圖片也是從 Blogger 上傳或是 Picasa 圖床,就能用這個 hack 來更改實際的縮圖尺寸,其他圖床只能依比例放大縮小而已。請依以下步驟──

1. 如果已經安裝過 Abin 版最新文章,請用以下程式碼將原程式碼覆蓋;如果沒有安裝過的話,請先到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼:


存檔後即可,想先看效果可參考右邊的側邊欄,選擇熱門文章旁的最新文章。


三、程式碼及參數說明

以上程式碼黑字及綠字部分為原本 Abin 版本,紅字及藍字部分為新增縮圖功能的程式碼。

F:設定最新文章起始的編號,Abin 預設為 6,代表從第 6 篇文章開始顯示;而我是設定為 1,從第 1 篇最新的文章開始顯示。

G:設定一次顯示的文章篇數,Abin 預設為 10,代表每跳一頁讀取 10 篇文章;而我自己是設定為 5,每頁顯示 5 篇文章。

N:Abin 原文有提到,Loading <blink>...</blink> 是資料載入前的讀取緩衝畫面,可改為自己想要的動畫。

AI~AN:這裡就是讀取縮圖資料的位置了,如果瞭解「一、從 Json 資料找縮圖」第 3 點的話,這裡就看得懂了。

AL:這裏的概念跟「熱門文章縮圖」一模一樣,把縮圖的 72px 寬度改成自己想要的圖片尺寸,並且乘上兩倍(讓圖片放大後不失真),由於我想要的縮圖寬度是 108px,因此藍字部分的參數我填入 s216,請把 s216 改成你要的圖片寬度的兩倍

AN:本行讓文章沒有縮圖時,仍然能顯示預設圖片的網址,請把藍字的圖片網址改成自己的預設圖片網址

AU:本行為 Abin 預設的文章顯示格式,裡面有顯示文章日期的參數,但為了不影響美觀我沒有使用日期的參數。由於本行我標示為註解以供參考,如不需要可刪除此行。

AW:我把文章顯示格式改為此行,左半部為圖片、加上虛線框及陰影(IE8含以下看不到此效果),可自行更改此效果的參數。必需要自訂的參數為藍字 110108,其中 108 請改為自訂的圖片寬度;而 110 為整個圖片區的寬度,因為圖片的左右各加了 1px 的框線,總寬度成了 110。原本 110 這參數算是畫蛇添足根本不需要設定,但發現在 IE 下沒設 110 的話圖片會被擠成一根棒子,為了 IE 只好多此一舉;如果圖片需要加框線的話,請將 110 改為自訂的圖片寬度 + 2


四、Json 縮圖資料其他應用

瞭解 Json 的縮圖資料讀取方式後其實非常的好用,因為文章縮圖能做的應用很多,諸如首頁文章輪播相關文章隨機文章等等。因此,下一篇的主題將介紹如何進行「相關文章縮圖」功能的 hack,而不必求助於 LinkWithin 等外掛程式。


更多實用工具:


最新文章模組「終極版」

58 則留言:

  1. 您真是好作者! 寫得很詳細. 大推~

    回覆刪除
  2. <1420538303747746246>(以上內容請勿刪除,從括號之後開始留言)
    謝謝鼓勵,還好您看得懂~~ XD

    回覆刪除
  3. 大大你好,
    因我這邊還用了個網頁播放器語法 (SCM Music Player),有些怪現象出現了,
    但本人對語法一竅不通,研究很久也毫無頭緒,
    希望大大有時間的話能幫忙看看。。。

    怪現象如下:
    1. 沒加網頁播放器語法時,「最新文章」中任何連結也會在原頁面開啟連結,
    2. 但有加網頁播放器語法時,唯獨按「最新文章」中「第一頁」的任何連結也會以「新分頁」的方式開啟連結。。。

    我的問題是:有方法把「第一頁」的連結開啟方式修改嗎?
    每次也以「新分頁」的方式開啟實在很困擾QQ

    回覆刪除
  4. <1617697481387599959>(以上內容請勿刪除,從括號之後開始留言)
    測試了你的網頁,的確「最新文章」的第一頁程式碼被其他程式竄改了,也許如你所說的,是因為 SCM Music Player 的關係,因此依照你網頁的狀況,我這裡怎麼改程式碼都是沒有用的,因為 SCM Music Player 似乎綁定了某些區域 "按下滑鼠" 的這個動作,才會造成「最新文章」的問題。

    如果你不介意「最新文章」很晚才顯示出來的話,我目前想到一個辦法,是讓「最新文章」等頁面全部讀取完之後,再顯示出來,讓 SCM Music Player 無法綁定較慢執行的區域。

    請把 BQ 行的 showRecentPosts(); 用下面字串取代:

    window.onload = showRecentPosts();

    這一行的意思就是網頁所有資料讀取完了,才執行「最新文章」。因為我也不知道結果會如何,請再回報這個方法能否成功。

    BTW,你的全展開、全開合的圖案,是不是顛倒了?

    回覆刪除
  5. 呃。。。
    真的顛倒了,謝提醒 囧
    ===============
    現在正在用那句字串,
    情況好像還是一樣哩。。。

    想不到這個SCM影響會這麼大,
    之前試了改AJAX LOADING也因它而有不少問題出現。

    而那邊的作者好像很忙的樣子,我一直聯絡不上,
    看來只能繼續等待了。

    不管怎樣,感謝幫忙 : )

    回覆刪除
  6. <916988939488631670>(以上內容請勿刪除,從括號之後開始留言)
    我觀察了你修改後 SCM 的載入速度,沒想到「最新文章」已經延遲載入了,結果 SCM 還是顯示 loading 中,SCM 的載入速度更慢,那麼「最新文章」的區塊還是會被 SCM 給綁住。

    所以,只能去修改 SCM 的程式碼了(如果你有辦法讓 SCM 提早載入的話,或許就能解決了。)

    只是,SCM 的程式碼有點奇怪,它的 mousedown 事件(按下滑鼠)綁定了 div 區域(全網頁的div),照理說應該只能綁定 SCM 自己的區塊;這樣子的話,如果你網頁將來裝的工具越來越多時,或許還有其他工具也會被影響喔!

    回覆刪除
  7. 請問該如何加入文章摘要?
    爬了"不連續x思考斷x面解構",才知道日期調整是改timestamp,摘要功能似乎是從"summary"著手,不過用關鍵字snippet、summary、data:post.snippet,查不出個所以然...
    只知道是從AW這段去修改,參數不清楚亂改一直失敗,想弄出出右側"最新回應"那樣部分段落,請問能不能做個簡單的教學,感謝!

    回覆刪除
  8. <3308755294002647335>(以上內容請勿刪除,從括號之後開始留言)
    "文章摘要"正是我下一版要加入的功能,只是還沒想出讓"文章摘要"顯現的滿意方法。既然剛好你有這個需求,我作個問卷調查好了,請問可以接受「游標停留在標題約0.5秒後,自動跳出文章摘要的泡泡框」這個方式嗎?你可以用我側邊欄的最新文章來測試,就是這個效果(但摘要內容目前還沒優化)。

    另外,如果你看得懂本文的 JSON 資料範例的話,"文章摘要"的內容就儲存在 json.feed.entry.summary.$t 這兒。

    回覆刪除
  9. 這教學太棒了,簡單又易懂,第一次不用發問就搞成功了(大心)

    回覆刪除
  10. <4931382112270714711>(以上內容請勿刪除,從括號之後開始留言)
    呵呵,樹狀分類的步驟比較麻煩一點,這個小工具相較之下裝起來比較簡單。

    BTW,我看你也有裝我的最新回應小工具,而前天剛發佈了更新版,可以展開留言喔!

    回覆刪除
  11. 是這裡嗎?我又來發問 >///<

    「最新文章」分頁的圖文乍看ok,但因為圖片背景為透明,所以會看到項目符號「●」,如何改善比較好?謝謝!

    回覆刪除
  12. <6455477586192987197>(以上內容請勿刪除,從括號之後開始留言)
    先複製貼上(給其他人參考)──

    [quote]會出現項目符號「●」表示你範本裡 ul 標籤的預設顯示disc,你的所有側邊欄工具只要有使用 ul 都會出現「●」;
    [/quote]

    要讓最新文章的「●」消失,可將 Z 行的

    var sHTML = '<ul>';

    改成:

    var sHTML = '<ul style="disc: none;">';

    試試看!

    回覆刪除
  13. 報告!替換後「●」依然健在~

    回覆刪除
  14. <5663527788351040837>(以上內容請勿刪除,從括號之後開始留言)
    看來每個範本的設定不一定都一樣,針對你的範本,改成這樣看看:

    var sHTML = '<ul style="list-style-type: none;">';

    回覆刪除
  15. ya!消失了~ ^^ (來個慶祝的後空翻(折腰...))

    回覆刪除
  16. 圖片不能出,請問出了什麼問題?

    回覆刪除
  17. <5902745832557403902>(以上內容請勿刪除,從括號之後開始留言)我看了你的圖片網址,是放在 google drive,再檢查你的 feed,的確是沒有縮圖資料。

    請見本文「二、修改 Abin 最新文章模組」-->「只要你文章內的圖片也是從 Blogger 上傳或是 Picasa 圖床,就能用這個 hack 來更改實際的縮圖尺寸」

    看來 blogger 無法處理 google drive 的圖檔,不會將其轉為縮圖。目前有兩種選擇:

    1. 將你的圖片全部改用 blogger 或 picasa 上傳

    2. 找其他的最新文章外掛,但就無法像本文的工具,能夠自訂縮圖大小了,其他外掛一律會將縮圖裁成正方形。

    回覆刪除
  18. <2290593731695484089>(以上內容請勿刪除,從括號之後開始留言)謝謝你。

    回覆刪除
  19. <5164437588846234980>(以上內容請勿刪除,從括號之後開始留言)不客氣~

    回覆刪除
  20. <5759405754553049596>(以上內容請勿刪除,從括號之後開始留言)請問可不可以提供外掛,而且又可有縮圖呢?

    回覆刪除
  21. 請問如何將網誌分類加入現有的分頁處呢?麻煩解答,感謝。

    回覆刪除
  22. <2848786113173453516>(以上內容請勿刪除,從括號之後開始留言)不太瞭解你的意思...

    回覆刪除
  23. <2378318010607932219>(以上內容請勿刪除,從括號之後開始留言)想把標籤放在分頁裡的其中一頁,即你網誌右邊三11的位置。

    回覆刪除
  24. <151452534069527255>(以上內容請勿刪除,從括號之後開始留言)標籤是很重要的網站導覽工具,不適合放在分頁中藏起來。過去曾詢問如何把標籤放在分頁的讀者,我都是建議把標籤獨立放一個區塊,對部落格而言是比較有幫助的。

    回覆刪除
    回覆
    1. 那如何將熱門文章連縮圖放置在分頁上呢?謝謝。

      刪除
  25. <5049671948861930971>(以上內容請勿刪除,從括號之後開始留言)你的問題都跟文章無關喔, 請到相關文章留言,且你的問題在相關文章或留言爬文可以找得到。

    回覆刪除
  26. AL那行還是不太懂要怎麼改,如果我想要縮圖呈現效果是50px,那是改成pic = pic.replace("s25-c","s50")這樣嗎?因為我怎麼改,大小好像都沒變...btw我是用picasa。謝謝。

    回覆刪除
  27. <3899865950660954216>(以上內容請勿刪除,從括號之後開始留言)請見 AL 行的說明,需要修改的只有藍色字串,其他請不要更動,所以你的 case 需要改成 pic = pic.replace("s72-c","s50");

    回覆刪除
  28. 版大,我安裝好了,但是我的文章標題跟圖片搭在一起就是沒您版上的看起來順眼
    請問怎麼調整才能像你版上的最新文章這麼好看?謝謝

    回覆刪除
  29. <357634713315800941>(以上內容請勿刪除,從括號之後開始留言)這個...叔叔是有練過的,不是那麼簡單的~~XD

    因為每篇文章的第一張圖,比例必須都一模一樣,縮圖才能有同比例的效果,所以你會發現我第一張圖的尺寸都是一模一樣的。

    如果你每篇文章第一張圖的尺寸都不一樣,又想版面一致,可以將圖片設定為 "強制裁切成正方形"。請將程式碼 AL 行的藍色參數,後面加上 "-c" 即可。

    例如你目前應該是設定成 "s100",改成 "s100-c" 就會強制切成正方形了。試試看吧!

    回覆刪除
  30. <1617673986090145197>(以上內容請勿刪除,從括號之後開始留言)謝謝叔叔捏~我改好了
    (都把你叫老了,哈哈哈),不過我不是在意圖片啦,
    我只是覺得文章的標題都縮在一起,那是不是應該要修改版面的寬度阿?
    謝謝

    回覆刪除
  31. <6251748995833896872>(以上內容請勿刪除,從括號之後開始留言)哈哈,我不會不服老的~看了你的版面,是範本預設的 CSS 問題,可作以下動作修改:

    1. 左邊界空白太多:程式碼 Z 行改成 var sHTML = '<ul style="padding: 0px">';

    2. 標題字體太大:請將 AW 行的 <b> 改成 <b style="font-size: 80%">

    80% 可自行調整到想要的字體大小

    回覆刪除
  32. <2647612893840477060>(以上內容請勿刪除,從括號之後開始留言)大哥,謝謝你,再請問那個討厭的"●"黑點怎麼消掉,雖然第7樓有回答,但是剛好改的是同一行"Z",不知道怎麼把語法湊在一起><"
    感謝~週末愉快

    回覆刪除
  33. <7013614040501812699>(以上內容請勿刪除,從括號之後開始留言)不客氣~那麼 Z 行改成:

    var sHTML = '<ul style="padding: 0px; list-style-type: none;">';

    這樣應該沒問題了。

    回覆刪除
  34. <2652947951370960654>(以上內容請勿刪除,從括號之後開始留言)大哥,感謝你,我修改完成了^^

    回覆刪除
  35. <1088874314345315865>(以上內容請勿刪除,從括號之後開始留言)不客氣~ ^^

    回覆刪除
  36. 版大您好:想麻煩你幫我看一下為什麼我安裝以後,文章標題會變成直的?

    回覆刪除
  37. 不好意思我忘了留網址了 http://niketeng.blogspot.tw/

    回覆刪除
  38. <2527554020911598982>(以上內容請勿刪除,從括號之後開始留言)原因跟你在「最新回應」的留言一樣,已經回覆再那裡了。

    回覆刪除
  39. <851407824048855965>(以上內容請勿刪除,從括號之後開始留言)
    板大~~感謝...終於調整好了

    回覆刪除
  40. 感謝大大的熱心分享造福我們這些笨笨的使用者
    但還是不好意思想請教一個可能有點困難的問題
    就是這個文章列表的功能是否可加入限定想要的標籤使用呢?
    就是想要跑出限定文章標籤的東西

    不好意思 但自己研究很久了 土法煉鋼套用了一堆程式碼都沒成功過...(
    遜...)

    忘了勾通知啦︿︿

    回覆刪除
  41. <4416237696404719031>(以上內容請勿刪除,從括號之後開始留言)不曉得這樣的功能可以做哪方面的應用?還想不到什麽情境需要這麽做~@@"

    回覆刪除
  42. Wayne大,想向您請教:
    1.如果我的最新文章欄位想把顯現的「Recent」 「Total」換成「最新」 「共」的話,應該加入什麼字串呢?
    2.如果我的縮圖不想出現邊框和陰影(單純顯示該圖片就好),應該刪掉哪一段字串呢?
    在此先感謝您!

    回覆刪除
  43. <1675707770635529553>(以上內容請勿刪除,從括號之後開始留言)1. 修改 BG 行,「Recent」改成「最新」、「total:」改成「共:」,這樣就行了。

    2. 修改 AW 行,去除「border: 1px dotted lavender; box-shadow: 2px 2px 2px #d6d6d6;」即可。

    回覆刪除
  44. Wayne大:我成功了!謝謝你!

    回覆刪除
  45. <2683371645435358355>(以上內容請勿刪除,從括號之後開始留言)不客氣 ^^

    回覆刪除
  46. 不知道能不能借用這篇來問

    我忘記我裝的是哪個版本的最新文章了,裡面有用 css 修改外觀的屬性,因為我想配合自適應面板熱門文章的部分,過長的標題文字會自動隱藏,所以我也把

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    這三段文字加到最新文章的標題屬性裡面,但我發現 white-space: nowrap 會變成讓他跑掉,而不是把他隱藏起來,請問問題是出在哪裡呢?

    回覆刪除
  47. <2751991474659799263>(以上內容請勿刪除,從括號之後開始留言)我沒寫過這功能的教學啊~你可以 google "ellipsis" 的用法。

    回覆刪除
  48. <8422737146712581533>(以上內容請勿刪除,以下引言請自行刪減) [quote]我沒寫過這功能的教學啊~你可以google"ellipsis"的用法。[/quote]

    嗯,我知道那個的用法,我也是測試了很久,但就是一邊是正常隱藏的,一邊會跑掉,只好出此下策來請教你...

    那不打擾了,我自己在研究看看好了

    回覆刪除
  49. 請問我要關閉縮圖是要輸入什麼語法?

    回覆刪除
  50. <5891156226440959674>(以上內容請勿刪除,從括號之後開始留言)這一篇就是用沒有圖片的版本改的啊~不要縮圖就用原本的版本吧!

    回覆刪除
  51. Wayne您好
    我使用#24發問的將「Recent」及「Total」換成「最新」和「共」
    我的還是顯示「Recent」及「Total」,是不是我有哪裡改錯了?謝謝你
    我的網頁 http://www.hairblog.tw/

    回覆刪除
  52. <4100479550691836524>(以上內容請勿刪除,從括號之後開始留言)我看你裝了兩組一模一樣的程式碼喔~找出多餘的然後刪了吧~

    回覆刪除
  53. <800740423072280584>(以上內容請勿刪除,從括號之後開始留言)哦~~原來這個有影響!!感謝你!我後來是把兩個(一個用於行動版)都改了就順利出現,謝謝您。
    另外想請教一下,我可以如何把這組工具內的文章標題不要顯示粗體字呢??又或者說像您的一樣把熱門文章改粗體字??(希望兩者一樣)謝謝您

    回覆刪除
  54. <5319904945033226752>(以上內容請勿刪除,從括號之後開始留言)原來你一個用在行動版,那表示其中一個沒改到。

    要去除粗體,搜尋程式碼中 <b> 以及 </b> 的字串,刪除就行了。

    回覆刪除
  55. <1062278038090894807>(以上內容請勿刪除,從括號之後開始留言)剛剛把行動版改了就正常顯示了。粗體問題也解決了!!原來兩邊組一樣的就要完全一樣才行。再次感謝您

    回覆刪除

  56. Wayne大你好

    不好意思,想請問一下,如果是用內建的最新文章小工具,有辦法讓每篇文章的前方都出現像留言6裡提到的●或者其他圖示嗎?

    自己想說那應該就是加進[ul]就可以了吧??但事情不是自己想的那麼簡單@@

    回覆刪除
  57. <6595083442461520530>(以上內容請勿刪除,從括號之後開始留言)呵呵,多數人想移除圓點,你反而想顯示圓點 ^^

    這個需要改 CSS 樣式,把原本這一行 var sHTML = '<ul>';

    改成這樣 var sHTML = '<ul style="list-style-type:disc;">';

    應該就可以了。

    BTW, 如果對語法不熟的話,自己摸索要花很多時間,可以在相關文章提問,並附上網址。也可多看看 HTML/CSS 語法或教學文章,加快理解速度。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。