網頁

2014年10月25日

Blogspot 圖片自動空間調整

當貼上圖片時, 有沒有試過, 圖片超大而超越範圍呢.


原來標準的 blogger 範本, "網誌文章"寬度是 650px,
但是, 在編輯圖片大小時, 可選擇的幾個參數, 不是過小, 就是過大.

小 width="200"
中 width="320"
大 width="400"
較大 width="640" (因為範本裡, img 都會被 CSS 加上一定的四邊空間, 結果是超越範圍)
原大 ~ (沒有設定 width, 即是 img 的寬度是多少, 就是多少)

其實有 2 個方法可以解決這個問題,
方法1~ [設計]> [範本]> [自訂]> [調整寬度]> (把"寬度"加大)
方法2~ 個人推薦的方法

只需加入一句 CSS 語法, img 便會完全的自動調整, 不會過大的超越範圍.
[設計]> [範本]> [自訂]> [進階]> [新增 CSS]>

.post-body img {max-width: 98%; height: auto}


2014年10月24日

WIDGET 展開/隱藏 按鈕 再度加強 V3版

Widget 展開/隱藏 後掛入方式, 之前設計了 2 個版本,
當中有一個問題, 一直沒有好好的解決,
把一些"小工具"展開或是隱藏之後, 一旦跳到其他位置, e.g. 首頁; 內文; 標籤 ...
Widget 展開模式又會回到預設值. 又以"網誌封存"最不方便.

這次設計的第 3 版, 可以保留最後的 展開/隱藏 狀態,
而且把用戶自行設定的部分, 用比較簡單的方法設定.
介面上設計成 radio (單選), 或是 checkbox (多選)的共存模式, 簡單方便.


Widget 的位置安排





建議把本程式放在, 需要控制的其他小工具之上.
當操控的時候, 不會因為 widget 隱藏的同時, 本程式跳到另一個位置.




  (簡易安裝方式, 按圖了解 )






程式碼用簡易方式安裝, 不用修改後台範本. 

<!-- /* Widget 展開隱藏 按鈕 V3.0 */ -->
<script>
  var Widget_ID = ["BlogArchive1", "HTML2", "HTML1", "Followers1"];
  var Widget_name = ["<網誌封存>", "<最近留言>", "<各路來賓>", "<追蹤者>"];
  var start_state = "false|true|true|true|"
  var delay_time = 0
</script> 
<script src="https://googledrive.com/host/0B9w7kASMsnuxVk1KZE5mMUh3NlE/widget_onoff_V3.js"/></script>

介紹中用了 4 個 widget 控制, 當然這個跟你的網誌一定不相同,
所以, 你需要決定及設計, 你所需要的.

程式的第 3 行,
widget_ID 就是後台裡, widget 的唯一名稱, 只要跟程式碼的方式寫上, 2 個; 3 個或是 4 個都不是問題. 基本把名稱放在 " " 裡頭便可以. 程式結構不要修改. (往下有找出 ID 的方法)

第 4 行, 是 widget_name, 對應上一行的 ID, 一對一的顯示名字.
第 5 行, 是顯示/隱藏 的預設值, 對應 ID 一對一的, false= 隱藏, true=顯示. 分格號是 | .
第 6 行, (22-Nov-2014 更新) 看似 0 秒都可以, 快速地馬上執行.
是延遲執行參數, 因為程式比其他 widget 更早載入, 所以需要時間等待其他widget載入後, 才作出處理. 1000 即是 1 秒鐘時間, 如果你的網誌比較複雜, 可能需要更長時間延遲, e.g. 1500

最簡單的方法, 找出 Widget ID
利用 Chorm 瀏覽器內置的 Developer Tools,
簡單的標示選擇了 widget 名稱, 用滑鼠右鍵點下 "檢查元素",
它會彈出 Developer Tools, 在 widget 名字上列 id, 就是 Widget ID 名稱.

獅子山下

圖片來源: http://www.ntdtv.com/xtr/b5/2014/10/23/a1148381.html