想要把Blogger的Post內的圖片都變成像下面這樣好像是一個縮圖相簿的感覺的話。
按照以下步驟就可以囉！
搭配上Blogger的"在燈箱中展示圖片功能"，
就可以讓Blogger Post看起來像是縮圖相簿了！
1. Blogger的"範本"-->自訂。就會出現Blogger範本設計工具。
2. 在Blogger範本設計工具當中，選擇"進階"-->新增CSS。
Add the following CSS code to Blogger Template Designer.
在"新增自訂CSS"的空白處貼上以下程式碼
.SquareThumbnail img{
width: 200px; /*圖片的寬度, 可以自己改看看*/
height: 200px; /*圖片的高度, 可以自己改看看*/
object-fit: cover; /*讓圖片可以center crop於上面的長寬當中*/
padding: 0px; /*圖片的留邊, 目前為0, 可以自己改看看*/
border: 0px; /*圖片的邊框, 目前為0, 可以自己改看看*/
}
.SquareThumbnail .separator{
display: inline;
font-size: 0px;
}
4. 建立一篇新的文章。Create a new post.
5. 編輯模式要選"HTML"。Choose "HTML" as Editor mode.
6. 插入要顯示的圖片。Insert images to this post.
點"加入所選圖片之後"，會出現以下對話筐。
圖片對齊方式選"無"，
圖片大小隨便都可以。
然後按"確定"。
此時的html看起來像這樣
可以看到這個時候圖片顯示方式還不是我們要的。
7. 用下面兩行code把所有的html code 包起來。
Wrap all html code by the following two lines.
<div class="SquareThumbnail">
...
</div>
點擊預覽就可以看到圖片變成下面這樣方形的縮圖了！
8. Blogger-->設定-->文章和留言-->在燈箱中展示圖片，要選擇為"是"。
不過預設應該就是這樣了，所以應該不需要改。
Turn on the lightbox of Blogger.
這樣點圖片的時候就會出現燈箱囉！