技研可樂

本篇我們使用 Blogger「HTML/JavaScript」小工具，安裝導引特定 標籤 中的文章標題、作者、日期、描述內容的 jQuery 程式，再配合 Blogger 的頁面判斷式，將「小工具」置於首頁或特定網址頁面的網誌文章上方，即可製作出 Blogger 的 文章置頂 功能。 小工具在安裝 Blogger ( Blogspot ) 文章置頂程式後，較為麻煩的是 CSS 語法的調整。由於 Blogger 網誌版面設計寬度與高度都各有不同，所以這邊設計的文章縮圖置於左側與頂部，實際情況還是須依自己的版型而做 CSS 調整。 這裡先觀察一下「Step2」完成後的文章縮圖置於標題左側的樣張。背景色使用灰階並在邊框的部份使用點線，jQuery 抽取 Feed 導引的標籤為《技研可樂》的開箱文「unboxing」標籤，並取樣一個標籤。 上圖是以《技研可樂》目前的版型而設定的 CSS 數值，實際的縮圖大小還是要以自己的版型為準。好的，接下來就可以開始動工了。 相關連結 版型配色：「 Chrome 擴充：ColorPick Eyedropper 網頁色碼擷取器 」 CSS 調整：「 http://www.1keydata.com/css-tutorial/tw/border.php 」 範例 DEMO 頁面｜電腦版網頁：「 電腦版 」 範例 DEMO 頁面｜行動版網頁：「 行動版 」 設置流程 HTML 範本中部屬 Font Awesome 及 jQuery 函式庫 版面配置頁用「HTML/JavaScript 小工具」安裝程式碼 ( 文章縮圖在左側 ) 讓「HTML/JavaScript 小工具」在首頁或特定頁面顯示 調整 CSS 讓文章縮圖在顯示在標題上方 靈活應用 設置前準備 若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『 備份 Blogger 模板 (範本) 』的動作，以防原始模板資料遺失。 設定教學 Step 1 HTML 範本中部屬 Font Awesome 及 jQuery 函式庫 首先，在 HTML 範本中搜尋『 </head> 』，在「 </head> 」上方加入以下代碼，並『儲存範本』。 <lin...

從接觸 Blogger 到現在，判斷式運用或是 CSS、HTML5 架構、微資料標記設定，範本版型及速度調整都算駕輕就熟了，但對於小工具製作還是頭一遭。 由於未來有構想玩出第一款全自製 Blogger 版型，所以相關的小工具插件如果是自行處理，也較有扎實感。 JavaScript 程式設計，這區塊一直以來是自己較為匱乏的部份，得從零開始。好在 jQuery 的架構在應用時，與自己較為熟悉的 CSS、Blogger 判斷式有依存關係，在學習上也就沒這麼深奧難懂。 這邊依據「 Blogger JSON Feed API 」抽取標題、網址、作者等 Feed 資料，製作出 Blogger 最新文章 jQuery 模組。 這一版的 Blogger 最新文章 小工具 jQuery 外掛 插件 ，縮圖的部份直接調整 CSS 語法 即可放大縮小圖片。作者與日期的部份則引用外部「 Font Awesome 」圖示，可視需求添加或刪除。 下圖是完成的後的樣貌，先在「 </head> 」之前引用外部 Font Awesome 加入 CSS 與放入 jQuery，接著使用版面配置頁的「HTML/JavaScript」小工具安裝程式，即可完成 Blogger 最新文章的部署。 相關連結 Font Awesome icon 列表與 CSS 調整方法「 http://astronautweb.co/snippet/font-awesome/ 」 範例 DEMO 頁面｜電腦版網頁：「 電腦版 」 範例 DEMO 頁面｜行動版網頁：「 行動版 」 設置流程 HTML 範本中引用 Font Awesome 及 jQuery 函式庫 HTML 範本或小工具中加入 CSS 小工具中加入 jQuery 代碼 設置前準備 若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『 備份 Blogger 模板 (範本) 』的動作，以防原始模板資料遺失。 設定教學 Step 1 HTML 範本中引用 Font Awesome 及 jQuery 函式庫 首先，在 HTML 範本中搜尋「 </head> 」，在「 </head> 」上方加入以下代碼。 <link ...

這幾天收到 AdSense 「 Contributor 捐助計劃 」的 Email 信件， Google 推出新的網站收益來源。網站的訪客可以透過每個月捐贈小額款項，讓訪客經由贊助來換取較少的廣告於網站中顯示。 捐助的訪客可以自行選擇每月的貢獻等級，「$2 ( 減少 5-15% 廣告 )、$5 ( 15-25% ) 或 $10 ( 25-50% ) 美元」減少網站裡的廣告的出現量。而網站中擺放廣告的站長 ( AdSense 發佈商 ) 也能因為訪客的贊助，收取一部分的獲利款項。 目前「 捐助計劃 」還沒開始支援台灣地區，不過 AdSense 發佈商已經可以先行投放 Contributor 樣板廣告於網站中，這邊將設定過程簡略整理做個記錄。 設定方式 網站的站長設定「 Contributor 」有幾種方式，擺放「Contributor Badge」、建立內部廣告或是透過站內宣傳公告的方式，讓訪客贊助網站。訪客經由我們提供的 Contributor 樣板連結，即可前往「捐助計劃」網頁進行贊助的動作。 Contributor Badge 網站中擺放「Contributor Badge」可使用「light、dark、white」三種顏色，預設寬高為「88px、31px」。要顯示 Contributor 徽章時使用以下外連的 js 檔案，即可完成設定。 <script src="https://www.gstatic.com/xads/publisher_badge/contributor_badge.js" data-width="88" data-height="31" data-theme="light" data-pub-name="網站名稱" data-pub-id="ca-pub-1234567890"></script> 代碼說明 data-width // 寬度 ( size in pixels ) data-height // 高度 ( size in pixels ) data-theme // 外觀顏色 ( "light" or ...

這次的需求，是想在 Blogger 文章 中的「 h2、h3、h4 」小 標題 前方，加入個人風格的 icon 圖示 。小標題前方加入圖示，相較於文字更好的區別了各段落章節，所以能讓訪客在瀏覽整篇文章時，獲得較為分明的文章結構層次。 寫文章時，只要將文章中的小標題依「h2 標題、h3 子標題、h4 小標題」的方式做設定，即可自動完成標題圖示的部署。 好的，接下來要開始動工了！主要更動到的 Blogger 模板 HTML 範本區塊為「 </head> 」中的 CSS 資料。我們會在文章 class「 .post-body 」的「h2、h3、h4」中添加圖示的相關 CSS 代碼。 相關連結 範例 DEMO 頁面｜電腦版網頁：「 電腦版 」 範例 DEMO 頁面｜行動版網頁：「 行動版 」 設置流程 Blogger 文章小標題「h2、h3、h4」加入 icon 圖示 Blogger 行動範本小標題加入圖示 Blogger 自適應版型小標題加入圖示 準備材料 兩張正方形半透明用於小標題圖示的 png 圖片 設置前準備 若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『 備份 Blogger 模板 (範本) 』的動作，以防原始模板資料遺失。 設定教學 Step 1 Blogger 文章小標題「h2、h3、h4」加入 icon 圖示 搜尋 HTML 範本中的「 </head> 」，在「 </head> 」上方加入以下代碼，即可完成設定。(* 圖片更換，請見代碼說明。) <style type='text/css'> .post-body h2 { font-size: 180%; /* 文字大小 */ background-color: #F7F7F7; /* 背景顏色 */ border-left: 8px solid #999999; /* 邊框左側線條：實線寬度 8px */ border-radius: 2px; /* 邊框圓角值 */ padding: 0 5px 0px 12px; /* 留白：上、右、下、左 */ } .post-body h...

TinyPNG 為一款 免費 網路線上 JPG 、 PNG 圖片壓縮 工具 ，採用智能有損壓縮技術，通過選擇性地降低在 PNG 圖片中的顏色數，將同樣顏色的圖像數據進行合成，以用較少的字節來存儲圖像信息，來減少 PNG 檔案的文件大小。 通過 TinyPNG 壓縮的 PNG 圖片保留了 100% 的 alpha 透明度，能在肉眼無法覺察的情形下，優化圖檔的文件大小。很適合將網站的 PNG 圖檔交由 TinyPNG 處理，以節省網路頻寬和加載時間，來加速網站的訪問。 官網範例的貓熊圖片能觀察到， Photoshop 的原始 PNG 圖片經由 TinyPNG 處理過後，圖像文件的大小能夠減少 70％ 以上。另外，姊妹站「 TinyJPG 」在 JPG 圖片的壓縮率也同樣能到達 70% 的水平。(* 壓縮比依點陣圖特性而不同。) 目前在 TinyPNG 網站上，即可同時處理壓縮 PNG 與 JPG 這兩種圖檔，而且可以直接免費使用。額外的，若習慣使用 Photoshop 修編圖片，也可支付 $50 獲取 Photoshop 外掛插件，Plugin 支援在 MAC 與 Windows 上使用。 對於 WordPress.ORG 自架網站的使用者， TinyPNG 則提供「 JPG、PNG 圖像壓縮外掛 」，取得「 API 密鑰 」之後，就能夠方便地對網站圖片自動的優化壓縮。API 調用圖片上傳 ，每個月前 500 張圖片皆為免費，超過 500 張則按每張 $0.009 收費。 由於 TinyPNG 提供的 API 能夠智能調整圖片的像素大小，所以能方便的產生縮圖。目前 API 支援在 Amazon S3 上使用，若是自架網站在 Amazon S3 上頭有圖片bucket 儲存桶，也能方便地製作手機版網站的文章縮圖。 相關連結 TinyJPG：「 https://tinyjpg.com/ 」 Photoshop 插件：「 https://tinypng.com/photoshop 」 WordPress.ORG 插件：「 https://wordpress.org/plugins/tiny-compress-images/ 」 Magento 插件：...

HTML5 Outliner 為一款免費 Chrome 擴充外掛 工具套件。使用時它會依據 HTML 5 的「 <article> 、 <section> 、 <aside> 、 <nav> . . .」幾個 大綱標籤 及「 <h1> ~ <h6> 」標籤，為目前瀏覽的網頁生成 樹狀結構 ，方便設計人員調試網站整體的 HTML 5 語意標籤 架構。 Chrome 安裝完 HTML5 Outliner 擴充後，在瀏覽器的工具列可以看到 HTML5 Outliner 圖示。預設擴充的圖示為綠色及數個條目加上一個 5，點擊它即可觀察目前瀏覽網頁的 HTML 5 語意標籤結構。 擴充資訊 擴充名稱： HTML5 Outliner 擴充性質：Chrome 免費 功能特性：生成一個大綱導航的頁面，標題和節元素樹狀結構導覽。這種擴充是使用 HTML5 的大綱演算法來創建一個目錄。 需要權限： 讀取及變更您造訪過的網站上的所有資料。 操作介紹 使用時，點取工具列的「HTML5 Outliner」圖示，即可生成當前網頁的 HTML5 樹狀結構條目。 按下條目中的超連結，可以快速的將畫面拉取至連結的位置，觀察並調整 HTML 5 語意標籤。 外掛下方的 Report bugs 與 outliner source code，則是擴充作者更新的相關資料，可點擊觀察擴充的更新情形。 小結 在使用 HTML5 Outliner 時，可以搭配「 結構化資料測試工具 」一起調試。另外，如果是在 Blogger 架設網站，由於「 <section> 」標籤已經被「版面配置」中的小工具底座「b:section」所佔用；實測時，發現 Blogger 若要設置「 <section> 」標籤，HTML 範本會無法儲存，這部份要稍做留意。 相關文章 [外掛] Chrome 擴充：META SEO inspector 網站 META SEO 分析工具 [外掛] Chrome 擴充：Open SEO Stats 網站 SEO 工具 ...