發表文章

目前顯示的是 十月, 2015的文章

Blogger 製作 Breadcrumb 文章標籤導航麵包屑

圖片
最近發現除了 Google 搜尋結果中,能夠辨識 Breadcrumb 文章標籤導覽,奇摩搜尋結果中也開始能夠識別,我們為網站設置的導航麵包屑了。

Blogger 網站中設定 Breadcrumb ( 麵包屑 ),藉由文章標籤建立麵包屑路徑,能讓訪客經由一層層的目錄結構,來識別瀏覽文章所屬的路徑痕跡。

如果要讓搜尋引擎抓取網站中的麵包屑路徑,就必須建立「結構化數據標記」信息,讓搜尋引擎藉由 Microdata 微數據、RDFa 標記、JSON-LD 等標籤,識別層次結構的屬性。



而 Blogger 網誌的範本結構,由於是一次性部署 HTML 資料,所以需藉由判斷式的調用,來設置 Breadcrumb 導航麵包屑結構化數據信息。

Blogger 的網頁結構擁有獨立文章頁面的資料區段,為文章頁面 ( /2015/10/page.html ) 與靜態網址頁面 ( /p/static_page.html )。而靜態網址頁面,由於不俱備標籤的路徑設定,直接從網誌首頁即可連結 ( 只有一層 )。

所以在設置 Breadcrumb 的時候,我們可以藉由文章頁面的標籤建立路徑,當作規劃需求。



不過,一篇文章如果分配了大量的標籤,那麵包屑的路徑指向就變得不明確,再加上 Blogger 的標籤排列,我們無法自行設置前後順序,所以在幫文章建立標籤時,建議大類別標籤使用中文,小類別標籤使用英文。

構想這種方法設定文章標籤,是因為 Blogger 文章的預設英文標籤會顯示在中文標籤之前,所以我們可以利用這種前後排列的關係,再運用「小工具標記 - loop 迴圈」最大化的,幫文章建立指向路徑。

Blogger 網誌文章中的 Label 標籤,由於無法完全使用「loop 迴圈」指定挑選某一標籤 ( 大量標籤的情形下 ),套用在單篇文章中使用。所以在規劃設定 Breadcrumb 的時候,我們可以運用 loop 迴圈屬性加上標籤的中、英文排列關係幫標籤建立規則。



「Step1.」的方法是運用 loop 迴圈屬性,挑選文章中的最後一個中文標籤,做為文章的指向路徑。「Step2.」的範例則是運用「Step1.」再加上 loop 迴圈的數值屬性,挑選出英文標籤中的前兩個標籤製作出三層式的麵包屑。

以下是「Step1」實際設置完成的 Breadcrumb 標籤導航。除了麵包屑製作,也增加了除了網誌首頁以…

[開箱] Google AdSense 10 USD 款項起付額度,地址驗證 PIN 碼

圖片
最近收到 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 照片牆

圖片
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 HTTPS 之後問題總整理 ( 持續更新 )

圖片
Blogger自訂網址,在使用 CloudFlareFlexibleHTTPS 後,有幾個 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 對應資料;所以,內部 data URL 我們必須自行處理。在網誌中,應用到很多頁面的「data:blog.url…

Picasa 網頁版建立變更相簿資料夾名稱權限,取得圖片外連網址

圖片
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 相簿資料夾權限 變更相簿資料夾權限時,可以選擇其中一個相簿,接著在相簿右側的權限編輯頁框中,按下畫面中的『編輯』。




在彈出式視窗的「編輯相簿資訊」中,即可變更 Picasa 相簿資料夾權限了。




Step 4 變更 Picasa G+ 相片即時上傳「自動備份」資料…

如何幫 Blogger Feed 建立 RSS 訂閱的首選版本

圖片
使用閱讀器訂閱 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 與 RSS 兩種閱讀器的規範,又能在訂閱時只出現一筆資源,那是最為理…

[教學] Blogger 文章頁面製作分類與標籤

圖片
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 系統更改了標籤排序,預設標籤改為中文在前英文在後的方式呈現。所以,如果要使用本篇的設定方式,幫網站部署「分類、標籤」,需使用以下設定值。

前往 Blo…

繼續閱讀: