Here is the search url to list all articals in you blogger
http://xxx.blogspot.com/search?q=+
2017-08-05
[Blogger] [Responsive theme "Soho"] 在網頁上方的bar加上social media icon
這篇要寫的是如何在google blogger的Responsive theme "Soho"網頁上方的會伸縮的bar
加上social media icon
1. 首先到blogger的版面配置
把Follow by email打開
如果follow by email原本沒打開會是長這樣
點"Follow by Email"旁邊的鉛筆
會跳出另一個視窗如下圖
點選"顯示 透過電子郵件追蹤"
然後儲存設定。
這樣就成功打開Follow by Email了。
完成後，網頁右上角的"搜尋"旁邊會出現"訂閱"
如果你不想要這個"訂閱功能"沒關係，等一下我們會把它隱藏掉。
但在這個步驟中我們還是要先把它打開
因為我們需要這個區塊來放social media icon。
如果不把social media icon放在這個區塊，
而是直接放在外面的話，
因為"搜尋"那個區塊會伸縮，會變得比較麻煩。
所以還是把要增加的social media icon直接放在訂閱區塊裡面會比較好看。
2. 要放在網頁上的icon
在他們的網頁上調整好自己想要的icon和效果之後
就可以下載icon
就可以下載icon
然後得到css和html
下載下來的icon檔案，解壓縮之後有四個檔案
這四個檔案你要放到另外的網頁空間
例如：google drive, 或是github, 或是其他網頁空間
然後把CSS裡面的url換成這四個檔案的網址路徑
HTML裡面的#號，則要記得改成你點下icon之後要連結的網址。
這邊的css和html等一下我們會貼到blogger。
3. 這個步驟，我們要把在perfecticons.com得到的html code貼到blogger。
首先
在blogger後台，選"主題"-->"編輯html"
按"Ctrl+F"搜尋"<section class='subscribe-section-container'>"
然後把在perfecticons.com得到的html code
貼到<section class='subscribe-section-container'>的下面
！！！記得要把在perfecticons.com得到的html裡面的#號換成你點下social media icon之後想要連結到的網址
4. 這個步驟，我們要把在perfecticons.com得到的CSS貼到blogger裡面。
在blogger後台
選"主題"-->"自訂"-->"進階"-->"新增CSS"
把在perfecticons.com得到的CSS貼上
然後點右上角的"套用至網誌"
5. 接下來，我們要把一開始跑出來的"訂閱"功能隱藏起來。
但如果你想要留著這個功能的話，那就可以跳過這個步驟～
在跟上一個步驟一樣的地方
blogger後台
選"主題"-->"自訂"-->"進階"-->"新增CSS"
貼上下面這四行
/* 隱藏'訂閱'按鈕 */
.subscribe-button{
display: none;
}
然後點右上角的"套用至網誌"
這樣就大功告成囉～
訂閱：
文章 (Atom)