電腦滑鼠(或手指)點在Blogger文章中的照片(圖片)上，照片會放大(Zoom)的方法

---

電腦滑鼠(或手指)點在Blogger文章中的照片(圖片)上，照片(圖片)會放大(Zoom)的方法:

》本功能的效果參考：請您
• 使用電腦：將電腦滑鼠(鼠標)放在如下的測試照片(圖片)上，照片(圖片)將會自動放大。
• 使用手機：將手指點壓在如下的測試照片(圖片)上，該照片(圖片)將會自動放大。

1. 登入您的 Blogger；

2. 點選 Blogger 控制台版面的「主題」項目，並再點選主題的 " 編輯HTML "；

3. 將電腦滑鼠點擊所開啟的 HTML 頁面內(任何位置皆可)；

4. 按壓電腦鍵盤上的 CTL + F 兩按鍵，此時 HTML 版面區域內的右上角將出現一個搜尋欄框；

5. 使用電腦鍵盤在此搜尋欄框內輸入 ]]></b:skin>，再按電腦鍵盤上的 Enter 按鍵，之後，HTML 版區將顯現出黃色襯底的 ]]></b:skin> 內容段；

6. 將如下的程式碼拷貝張貼到 ]]></b:skin> 的上方(或前方)：

zoomeffect img{ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; margin: 0 10px 5px 0; } .zoomeffect img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; }

7. 點按 HTML 版區左上角位的 儲存主題，將您的附加程式碼儲存；

8. 如後，當你在你的 Blogger 新增文章 > 文章編輯版區 ⇒上傳照片(圖片)之後，將文章編輯版區切換至 HTML 模式，並找到照片(圖片)的相關程式碼，例如

<div class="seperator" href="照片聯結網址" target="_blank">

9. 將照片(圖片)相關程式碼中的 seperator 文字，修改成為 zoomeffect 文字 (注意：不是 zoom effect 喔！)；

10. 並點按編輯文章的儲存文字按鈕。

11. 當你完成文章編輯並發佈文章之後，打開該文章檢視照片(圖片) zoom effect 的效果：

• 使用電腦：將電腦滑鼠(鼠標)放在照片(圖片)上的時候，該照片(圖片)將會自動放大。
• 使用手機：將手指點壓在照片(圖片)上的時候，該照片(圖片)將會自動放大。

有了這樣的結果，表示你成功完成了。

---