技研可樂

最近發現除了 Google 搜尋結果中，能夠辨識 Breadcrumb 文章標籤導覽，奇摩搜尋結果中也開始能夠識別，我們為網站設置的導航麵包屑了。 Blogger 網站中設定 Breadcrumb ( 麵包屑 )，藉由 文章 的 標籤 建立麵包屑路徑，能讓訪客經由一層層的目錄結構，來識別瀏覽文章所屬的路徑痕跡。 如果要讓搜尋引擎抓取網站中的麵包屑路徑，就必須建立「 結構化數據標記 」信息，讓搜尋引擎藉由 Microdata 微數據、RDFa 標記、JSON-LD 等標籤，識別層次結構的屬性。 而 Blogger 網誌的範本結構，由於是一次性部署 HTML 資料，所以需藉由判斷式的調用，來設置 Breadcrumb 導航麵包屑結構化數據信息。 Blogger 的網頁結構擁有獨立文章頁面的資料區段，為文章頁面 ( /2015/10/page.html ) 與靜態網址頁面 ( /p/static_page.html )。而靜態網址頁面，由於不俱備標籤的路徑設定，直接從網誌首頁即可連結 ( 只有一層 )。 所以在設置 Breadcrumb 的時候，我們可以藉由文章頁面的標籤建立路徑，當作規劃需求。 實際在 Google 搜尋結果中，Breadcrumb 後方還會有庫存或是轉釋連結，建議麵包屑最多設定三筆。 不過，一篇文章如果分配了大量的標籤，那麵包屑的路徑指向就變得不明確，再加上 Blogger 的標籤排列，我們無法自行設置前後順序，所以在幫文章建立標籤時，建議大類別標籤使用中文，小類別標籤使用英文。 構想這種方法設定文章標籤，是因為 Blogger 文章的預設英文標籤會顯示在中文標籤之前，所以我們可以利用這種前後排列的關係，再運用「 小工具標記 - loop 迴圈 」最大化的，幫文章建立指向路徑。 Blogger 網誌文章中的 Label 標籤，由於無法完全使用「loop 迴圈」指定挑選某一標籤 ( 大量標籤的情形下 )，套用在單篇文章中使用。所以在規劃設定 Breadcrumb 的時候，我們可以運用 loop 迴圈屬性加上標籤的中、英文排列關係幫標籤建立規則。 Yahoo 搜尋結果中也能識別導航麵包屑 「Step1.」的方法是運用 loop 迴圈屬性，挑選文章中的最後一個中文標籤，做為文章的指向

最近收到 Google AdSense 寄來的實體郵件，信件內容為「Google AdSense 個人識別碼 ( PIN 碼 )」。觀察了「 款項起付額度 」，原來 Google AdSense 收益到達 10 美金 USD 時，可以幫 AdSense 帳戶做「 地址驗證 ( PIN 碼 驗證 )」與「提交付款形式」兩個動作。 「地址驗證」的部份需要在 AdSense 帳戶中，加入實體郵件寄送的「個人識別碼」，以用來驗證地址與收款人帳戶是正確對應的。所以，一開始在申請「Google AdSense 廣告聯播網」時，姓名與地址就不能亂填。 在「提交付款形式」中可以設定「電匯至銀行帳戶、支票、西聯匯款」幾種方式，目前 Google AdSense 最低付款限額為 100 美金 (* 依各區域貨幣而不同)，可以依自己的需求做選擇與調整。 這次是第二次收到 Google 寄送的實體信件，第一次收到的 Google 實體信件是，當初在申請 AdSense 時的「歡迎使用 Google AdSense」郵件。雖然收益還不到 100 美金的最低付款額度，但看到實體 Google Logo 物品還是相當興奮。 「地址驗證」與「提交付款形式」的設定部份，這邊做個簡略的記錄。 「地址驗證」與「提交付款形式」設定 首先前往「 AdSense 」在登入帳號後會看到一個「由於您尚未驗證地址，因此我們目前暫緩付款給您」的紅色導覽條。點取『動作片』之後，就可以開始設定「地址驗證」。 在「輸入驗證碼：」的框格中填入 Google 寄來的「AdSense 個人識別碼」。按下『提交驗證碼』，就可以完成「地址驗證」。如果，還沒收到 Google 寄來的「AdSense 個人識別碼」，可以點擊網頁最下方的『申請新的驗證碼』。 (* 地址驗證，只能有三次的容錯率。) 點擊『申請新的驗證碼』後，在「申請新的個人驗證碼明信片」中，網頁會提示只餘兩次收取新的驗證碼機會；點取『是的，產生新的驗證碼並郵寄給我』AdSense 就會寄送新的驗證碼到住所。如果有搬過家，也可以點選畫面中的『不，先變更我的地址』更換 AdSense 帳戶中的地址。 接著，將 Google 寄送的「AdSense 個人識別碼」填入「輸入驗證碼：

SnapWidget 是一款 instagram   照片牆 小工具外掛插件，可以讓你快速，方便地在自己的網站或 blog 嵌入 instagram 相片牆。 SnapWidget 除了提供 Wordpress、Tumblr、Blogger 等平台安裝，也支援於一般網頁或響應式網頁 ( RWD ) 裝設。小工具在設定時可以依網站或 blog 主題的外觀和風格，來選擇定義照片牆大小、邊框和背景色而做適當的佈局。 使用時， SnapWidget 會依據填入的 instagram 用戶名或是 #hashtag，讓小插件每 30 分鐘自動刷新照片資料。插件在滑鼠滑入照片時也有淡入淡出效果，額外的，也可以幫照片加入 Facebook 及 Twitter 分享按鈕。 小工具樣式，可以選擇網格 ( RWD )、幻燈片、滑塊 ( 支援觸控：左右滑動 ) 等模式，可以視需求在網頁側邊欄或是底部頁腳安裝。 免費版的用戶，在 Widget 按下照片後，會連結到官方的廣告頁面，如果需求將照片連結至原本的 instagram 圖片展示頁面或是任何網頁頁面，則在「 定價版 」中才有提供。如果要在網站中快速加入 instagram 照片牆，免費版無需綁定帳號即可方便的使用。 相關連結 SnapWidget 插件頁面：「 http://snapwidget.com/ 」 SnapWidget 定價版：「 http://snapwidget.com/pricing 」 使用介紹 前往「SnapWidget 插件頁面」將畫面往下拉，即可自定義小工具的樣式。 按下「Preview」可以先預覽照片牆在網站中的顯示樣式。(* instagram 的帳號中的「不公開帳號」要設定為關閉。) 點取「Get Widget」即可將代碼複製下來於網站中使用。如果你的網站為 HTTPS 型式的網址，將代碼網址前的「http://」更改為「//」，照片牆即可在網頁中順利推送。

Blogger 自訂網址 ，在使用 CloudFlare Flexible HTTPS 後，有幾個 Blogger 系統中無法自行變更設定的事項，與已經解決的問題，這邊做個總整理。日後如果發現新的問題，也一併在這裡補充說明，以便利記錄與往後的查閱。 Blogger 啟用 Cloudflare HTTPS 資料總整理 一、Blogger 處理 HTTPS 網頁的「混合性內容」 首先，在「 Blogger 自訂網址 CloudFlare Flexible SSL 設定 HTTPS 」中已經解決的「 混合性內容 」問題，有「icon、導覽列、範本與小工具外連網址、 留言板、文章圖片 與 js 導縮圖」。 不好處理的 js 導文章縮圖、導覽列、留言板 文章圖片與 js 導縮圖的部份在上方「 連結 」已做說明。導覽列部份則會因自動生出 http 的 icon 檔，而須將它註釋掉。 目前比較麻煩的是使用 Blogger 簡介留言者的留言板問題。 (16/07/22)文章更新： 寫文章時，頁面切回「撰寫」模式時圖片「https」的『s』會被吃掉，以及 Blogger 原生留言板「Blogger 簡介」作者頭像的 https 連線問題。這個兩個問題 Blogger 系統已解決。(* 文章圖片、留言板作者頭像，系統已自動幫圖片改為 HTTPS 連線。) 導覽列 - ico 檔 ( 混合性內容 ) 導覽列的部份在註釋掉之後，在網誌的源代碼中，發現系統會將「http」網址的「ico」網誌 icon 也註釋掉。由於 Blogger 系統網址走向的問題，無法自行變更「導覽列的部份」，目前只能註釋掉，將「混合性內容」的部份除去。 留言板 - 使用 Blogger 簡介的作者 ( 混合性內容 ) 留言板的部份，如果不是在 Blogger 直接使用或安裝 G+、FB、Disqus 留言板系統，在 Blogger 預設的留言板上，若有使用 Blogger 簡介的訪客留言，留言者的頭像輸出網址預設 Url 為「http」，會有「混合性內容」的問題。 二、應對 HTTPS 的 Blogger 範本調整事項 由於 Blogger 目前對「自訂網址」網誌，還沒開放 data code 相關網址的 HTTPS URL 對應

Picasa 為 Google 服務旗下的網路相簿服務，除了網頁版官方也提供「 電腦安裝版  ( Windows XP/Vista/7 )」，方便的整理、編輯、分享電腦中的圖片。 將圖片上傳到網路相簿，除了節省電腦、行動裝置的內存空間，若你有寫 Blog 網誌或經營社群習慣，也能藉由圖片的連結而傳播到網路世界。 從電腦裝置整理規劃 Blog 網誌圖片的角度來觀察。Picasa 的網路版，在使用時提供了方便建立資料夾與圖片連結的操作方式。 若你在使用 Picasa 電腦安裝版，在整理圖片使用直覺上一直有格格不入的情況，不如試試 Picasa 網路版。以下介紹的 Picasa 網頁版 ，圖片建立 資料夾 、取得 圖片 「 外連網址 」與 相簿 「 權限 」修改，不妨可以當做圖片在整理規劃時的操作參考。 訊息更新： Picasa 網路相簿服務，已於 2016 年 5 月 1 日開始陸續關閉所屬相關服務。 相關連結 Picasa 網頁版：「 https://picasaweb.google.com/ 」 Picasa 電腦安裝版：「 https://www.google.com/intl/zh-TW/picasa/ 」 操作流程 Picasa 建立相簿資料夾 Picasa 取得圖片外連網址 修改 Picasa 相簿資料夾權限 變更 Picasa G+ 相片即時上傳「自動備份」資料夾權限 操作介紹 Step 1 Picasa 建立相簿資料夾 建立相簿資料夾時，可以前往「 Picasa 」網頁版首頁，接著點取『上傳』。 在畫面中的「相簿名稱」中輸入名稱，將電腦圖片拖曳到畫面中央或是點擊「選取電腦中的相片」，即可新增相片，按下藍色背景的『確定』鈕，即可建立相簿資料夾。 Step 2 Picasa 取得圖片外連網址 取得圖片連結時，可以選取畫面中的其中一個相簿。 接著，挑一張想取得連結的相片，並點擊圖片。 畫面跳轉後，在圖片上按下滑鼠右鍵，接著用滑鼠左鍵選擇『在新分頁中開啟影像』。 於瀏覽器的新分頁中，就能取得圖片的連結網址了。 Step 3 修改 Picasa 相簿資料夾權限 變更相簿資料

使用閱讀器訂閱 Blogger  ( Blogspot ) 網誌時，可能會看到同一個網址的 feed ，有好幾筆 RSS  及 Atom 資源供訪客 訂閱 。那是因為，在預設的 Bloggger 範本中系統幫網誌建立的 feed 資源共有四種。 四種資源，共有兩個類別。第一個類別是文章 feed「Atom ( /feeds/posts/default )、RSS ( /feeds/posts/default?alt=rss )、Atom ( /feeds/blogger ID/posts/default )」，第二個類別是留言 feed「Atom ( /feeds/blogger 留言 ID/comments/default )」。 試著從 Feedly 訂閱戶的角度來觀察，Feedly 系統在預設的情形下，在搜尋框輸入網址，會抓取 Blogger 的前三筆文章 feed 資源，第四筆留言 Atom 在前三筆 feed 缺少的情況下，才會出現。 若是在 Blogger 前三筆的 feed 資源中，已有大量的使用者訂閱其中一筆 feed 資源，Feedly 則會直接推送該筆資源，供 Feedly 用戶訂閱。而 Blogger 系統預設從上數下來的第一筆 feed 則為「Atom ( /feeds/posts/default )」。 所以如果在 Feedly 上搜尋，使用 Blogger 建立的人氣網誌網址，大致 Feedly 都只會推送一筆「Atom ( /feeds/posts/default )」。有使用 Feedburner 燒製過 feed，若 Feedburner 訂閱戶高過網站的 Atom，Feedly 則在搜尋網址訂閱時，會將 feed 網址選擇至「Feedburner feed」。 而在 feed 訂閱數量不高的情形下，如果在 Feedly 搜尋框中輸入網站名稱，則會如下圖一樣空空如也。若有一定的 feed 訂閱數量，但在 Feedly 搜尋中找不到網站，那則有可能是 feed 在「HTML」的「 type='application/rss+xml' title 」中沒有加入網站名稱。 會觀注這個現象，是因為發覺三筆 feed 在訂閱時難免過於混亂。若 feed 能符合 Atom

Blogger 網誌範本模版應用 教學 ： Blogger  ( Blogspot ) 在做 文章分類 時，只有單項的「label」 標籤 能使用，在需要有層次的分類時就沒這麼方便。這篇 Label 判斷式與 loop 用法，就是在看到這種侷限性而因應而生的點子，目的是讓訪客在網站的文章頁面能夠依分類與標籤，找查相關項目文章。 分類與標籤在製作時，概念上，是利用 Blogger 標籤 (  Label  ) 英文與中文前後排列的關係，運用 loop 迴圈調用「data:post.labels」，再使用「data:label.isLast」抽取「Label」，而排列出前 ( 標籤 ) 與最後 ( 分類 ) ，並分別列出分類與標籤。 這也是，每次在 Blogger 後台撰稿發佈文章後，觀察在「發表文章」所列出的全部文章，英、中文標籤前後排列關係，而轉個彎製作出來的「分類」與「標籤」。 所以，如果依照本篇的設置方式，佈置文章的「分類」與「標籤」。文章在設定「標籤」類別時，須使用英文標籤；文章在設定「分類」類別時，就須使用中文標籤。 這裡我們觀察下圖，在分類與標籤中，也設置了 a 連結的「rel='tag'」 ，並設定了Facebook「article:section」與「article:tag」data Meta。 雖然，Facebook Meta 資料放置在網頁的「 <head> 」以外，在做 FB Debug URL 除錯時會顯示錯誤。但經由「 SEO 工具 」還是能夠檢測出我們為文章設定的「分類」與「標籤」類別資訊。(* 這部份，「article:section」與「article:tag」Meta，可視需求而刪除。) 另外，本篇在設置時，可與「 Blogger 標籤頁面加入分類小標籤 」一起做佈署。兩者一起做設置，可以讓訪客在網誌中找文章時，方便很多。 設定佈署的過程中，我們會將「分類」與「標籤」放置於文章的最下方。另外，「標籤」的部份也用 CSS 添加了「#」，類似 Twitter 主題標籤「#hashtag」的樣式。好的，接下來就可以開始動工了！ 文章更新 ( 2017/01/07 )： 由於 Blogger 系統更改了標籤排序，預設標籤改為中文在前英文在後的方式呈現。所以