[美化] Blogger 使用 RWD 版型 自訂 CSS HTML 紀錄

Blogger 去年推出數款新的範本，以響應式網頁為主要特色。
最近打算將網誌大改造，第一步的基礎版型當然就選擇新的來試試。

然而更換主題後，一些自訂的語法會跟著消失，需要再重新加入，這次統整起來免得日後需要重找資料。

內容可能會視個人需要不定期增加。

---

索引

標題背景遮罩
標題文字陰影
搜尋結果外觀
熱門文章外觀 (側欄專用)
不追蹤瀏覽次數
圖片外框效果
加入回到頂端的按鈕

自訂文章封面
插入分隔線
插入程式碼方塊
內部連結

心得

---

目前的網站外觀，使用的版型是 Contempo

---

開始修改範本原始碼，前往 Blogger「主題 → 編輯 HTML」。
右上角「備份 / 還原」下載現有範本避免出錯。

---

網誌標題背景遮罩
搜尋

.bg-photo-overlay

找到如下

.bg-photo-overlay{
background:rgba(0,0,0,.26);
background-size:cover;
height:$(body.background.height);
position:absolute;
width:100%;
z-index:2
}

26 是主題預設的黑色遮罩，等於 26% 透明度。
要呈現圖片原色可以改為 0。

---

網誌標題文字陰影
搜尋

.Header h1, .Header h1

找到下方代碼，插入綠色部分
留意紅色符號分界，請勿更動後面的代碼

.Header h1, .Header h1 a {
text-shadow: 0px 0px 1.2px #555;
}]]></b:skin>

數值可以邊預覽邊調整。

Contempo 版型的標題會和搜尋工具列聯動，陰影太多往下捲動時會糊在一起。
這是目前覺得比較平衡的配置。

---

搜尋和標籤提示
搜尋

.post-filter-message

找到如下

.post-filter-message{
background-color:rgba(255,255,255,.9);
color:#555;
display:table;
margin-bottom:16px;
width:100%
}

這裡的 555 是指文字色彩。
透過專門軟體或網站查詢想要的顏色代碼。

---

官方「熱門文章」小工具樣式調整 (側欄專用)
開啟小工具設定，取消勾選「圖片縮圖」、「片段」。
頁面主體內的則取消勾選「顯示熱門文章」。

回到編輯主題，搜尋

.PopularPosts

找到一系列，綠色是修改後的內容

.PopularPosts{
background-color:$(popularposts.background.color);
padding:30px 40px
}
.PopularPosts .item-content{
color:$(popularposts.text.color);
margin-top:0px;
display: none
}
.PopularPosts a,.PopularPosts a:hover,.PopularPosts a:visited{
color:$(popularposts.link.color);
font-style:normal
}
.PopularPosts .post-title,.PopularPosts .post-title a,.PopularPosts .post-title a:hover,.PopularPosts .post-title a:visited{
color:$(popularposts.title.color);
font-size:15px;
font-weight:500;
line-height:24px
display: inline-block;
vertical-align: middle;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
.PopularPosts,.PopularPosts h3.title a{
color:$(posts.text.color);
font:$(posts.text.font)
}
.main .PopularPosts{
padding:16px 40px
}
.PopularPosts h3.title{
font-size:14px;
margin:0
}
.PopularPosts h3.post-title{
margin-bottom:0
}
.PopularPosts .byline{
color:$(popularposts.byline.color)
}
.PopularPosts .jump-link{
float:$(endSide);
display: none;
margin-top:16px
}
.PopularPosts .post-header .byline{
font-size:.9em;
margin-top:6px
}
.PopularPosts ul{
list-style:none;
padding:0;
margin:0
}
.PopularPosts .post{
padding:20px 0
}
.PopularPosts .post+.post{
border-top:1px dashed $(sidebar.separator.color)
}
.PopularPosts .item-thumbnail{
float:$(startSide);
margin-$endSide:32px
}
.PopularPosts .item-thumbnail img{
height:88px;
padding:0;
width:88px
}

不知為何安裝第三方元件幾乎都無效，只好換回官方版再嘗試修改版面。
單純針對側邊選單的排版美化，啟用小工具的其他選項應該會看到亂成一團的樣子。

---

不追蹤自己的瀏覽次數
搜尋

</head>

在上方插入

<script type="text/javascript">
//<![CDATA[
(function(){
var x=0; /* 向右位置設定 */
var y=0; /* 向下位置設定 */

function f(){var a,c,d,b=document.cookie.split(";");for(a=0;a<b.length;a++)if(c=b[a].substr(0,b[a].indexOf("=")),d=b[a].substr(b[a].indexOf("=")+1),c=c.replace(/^\s+|\s+$/g,""),"_ns"==c)return unescape(d)}function g(a,c){var d=2,b=new Date;b.setDate(b.getDate()+a);d=escape(d)+(null==a?"":"; expires="+b.toUTCString())+"; path=/"+(null==c?"":"; domain="+c);document.cookie="_ns="+d}function e(a,c,d){a.addEventListener?a.addEventListener(c,d,!1):a.attachEvent&&a.attachEvent("on"+c,d)}e(window, "load",function(){function a(){var a=document.getElementById("xyz14030918con"),b="2"!=f()?"\u8ffd\u8e64":"\u4e0d\u8ffd\u8e64";a.innerHTML="\u76ee\u524d\u8a2d\u5b9a\uff1a"+b+' <a href="javascript:void(0);" id="xyz14030918edit">\u4fee\u6539</a><br>(\u672c\u5340\u584a\u53ea\u6709\u7db2\u7ad9\u7ba1\u7406\u8005\u770b\u5f97\u5230)';e(document.getElementById("xyz14030918edit"),"click",c)}function c(){var b=document.getElementById("xyz14030918con"),c;c='<label><input type="radio" name="xyz" id="xyz14030918radioY" value="radio" />\u8ffd\u8e64</label><label><input type="radio" name="xyz" id="xyz14030918radioN" value="radio" />\u4e0d\u8ffd\u8e64</label><br><input type="button" name="xyzBtn" id="xyz14030918sto" value="\u5132\u5b58" /> <input type="button" name="xyzBtn" id="xyz14030918back" value="\u8fd4\u56de" />'; b.innerHTML=c;"2"!=f()?document.getElementById("xyz14030918radioY").checked=!0:document.getElementById("xyz14030918radioN").checked=!0;e(document.getElementById("xyz14030918sto"),"click",d);e(document.getElementById("xyz14030918back"),"click",a)}function d(){var b=window.location.host;document.getElementById("xyz14030918radioY").checked?g(-10,b):document.getElementById("xyz14030918radioN").checked&&g(365,b);a()}var b=document.createElement("div");b.style.cssText="width:0px;height:0px";b.innerHTML= '<span id="xyz14030918adm" class="item-control blog-admin"></span>';document.body.appendChild(b);var h=document.getElementById("xyz14030918adm");"none"!=(window.getComputedStyle?window.getComputedStyle(h).display:h.currentStyle.display)&&(b.innerHTML='<div style="padding:10px;font-size:12px;line-height:18px;width:175px;height:70px;position:absolute;left:'+x+"px;top:"+y+'px;z-index:99999;border:1px solid red;background-color:#FFFFFF;border-radius:5px;box-shadow: 5px 5px 5px #CCCCCC;">\u662f\u5426\u8ffd\u8e64\u6b64\u700f\u89bd\u5668\u7684\u700f\u89bd\u91cf ?<div id="xyz14030918con"></div></div>', a())})})();
//]]>
</script>

在登入管理者帳戶的狀態下開啟網誌，就會常駐這個選項。

常會編修、預覽網誌的話非常推薦這個元件，初次設定好就不會再無腦計入自己的瀏覽人次，比起 Blogger 經常莫名其妙跑掉的不追蹤選項可靠很多。
小問題是 RWD 版型似乎要進入文章後才會出現選項，所以第一次可能還是會被計入 1，但能換取日後安心瀏覽自己的網誌。
參考資料：XYZ的筆記本

---

文章內圖片陰影效果
搜尋

.post-body img

找到如下，插入綠色部分

.post-body img{
max-width:100%
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0 15px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
padding: 8px;
background: #fff;
border: none;
}

參考資料：WFU BLOG

---

加入回到頂端的按鈕
搜尋

</head>

在上方插入這整段，第一行是用來安裝 Jquery 資料庫，已經有的話可以省略

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
<script type='text/javascript'>
$(function(){
    $(&quot;#gotop&quot;).click(function(){
        jQuery(&quot;html,body&quot;).animate({
            scrollTop:0
        },0);
    });
    $(window).scroll(function() {
        if ( $(this).scrollTop() &gt; 500){
            $(&#39;#gotop&#39;).fadeIn(&quot;fast&quot;);
        } else {
            $(&#39;#gotop&#39;).stop().fadeOut(&quot;fast&quot;);
        }
    });
});
</script>
<style type='text/css'>
<!--
#gotop {
    z-index: 999;
    top: 1;
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px; 
    padding: 5px 12px;   
    font-size: 15px;
    background: rgba(242,242,242,.80);
    color: #222;
    cursor: pointer;
    border: 1px #bbb solid
}

-->
</style>

一開始發現按鈕不能用…剛好看到初始設定的位置會被文章區塊遮住，推測是物件前後順序的問題，修改紅色部分就正常了。
藍色同樣是自訂外觀的數值，最上方的 0 是回到頂端的轉場速度 (最快)。

再來搜尋

<body>

在下方插入，完成

<div id='gotop'><center><b>↑</b></center>Top</div>

第一行的符號讓按鈕看起來比較生動。可以在 Windows 輸入法整合器或專門網站尋找想要的符號。

在運用內部連結製作索引的時候又開始想試試頂部按鈕，照着教學完成後瀏覽的方便性也提升了點。
參考資料：青椒的家

---

後段是一些裝飾文章內容的玩意。
將文章編輯模式切換為 HTML。

---

自訂封面
在任意位置插入

<img style="display: none; width: 0px;" src="圖片網址"/>

有些範本會顯示文章封面，通常是直接使用內文第一張圖，若覺得不太合適可以自行更換。
參考資料：WFU BLOG

---

分隔線
在適當位置插入

<HR color="#dddddd" size="2px" width="100%" align="center">

寬度使用 % 能自動依據文章版面寬度填充，配合 center 由中間向兩方延展。

---

程式碼專用外框
前往 Blogger「版面配置 → 新增小工具 → HTML / JavaScript」(Contempo 版型只能放在側欄)
在「內容」貼上下列代碼後儲存

<style>
.post .codeblock {
display: block; /* fixes a strange ie margin bug */
font-family: Roboto;
font-size: 12pt;
overflow:auto;
background: #f0f0f0 url(背景圖片網址) left top repeat;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:1000px;
line-height: 1.6em;
}
</style>

藍色分別是字型、大小、行距。

這個元件平時只會顯示一行空白，幾乎不影響網誌外觀，隱藏的話外框效果會消失，只有預覽時看得見。
將它置於不起眼的地方即可。

接下來運用在文章內，插入代碼

<pre class="codeblock">
想要呈現的內容
這個區域內同樣能使用色彩、粗體等效果來標記重點
但會增加編輯時的複雜性
</pre>

如果內容含有 < > 符號，需要透過 HTML Encoder、Unicode 等網站轉換。
參考資料：PJCHENder

---

網頁內部連結

先在想要跳轉的位置插入

<a name="設定一個標籤名稱"></a>

接著建立連結

<a href="#設定好的標籤名稱">說明 (可留空)</a>

如果需要跳轉到另一篇文章

<a href="網址#設定好的標籤名稱" target="_blank">說明 (可留空)</a>

可以快速移動到文章內的某個部分，內容太多的時候也能用來編列簡單的索引。

範例 1
範例 2 (移至其它文章)

---

心得

對比舊版型，整體變得相當亮麗，還能選擇和 Android Material Design 相近的範本。
行動裝置畫面自動轉換得很好，並不再有滑動稍微偏左 / 右就會跳頁的問題。
和主體共用樣式，修改也比較方便。


缺點和一些使用狀況：

-頂部搜尋列
向下捲動時仍會常駐，對手機而言有點浪費畫面空間。

-側邊欄
只有電腦或畫面夠大時才會直接顯示 (詳見文首圖例)，而行動裝置在進入文章後側邊欄暫時無法使用，需要返回文章列表。

-文章日期格式
版面設定內這個選項無法勾選，似乎是版型本身設計和時間戳記聯動，其中比較接近的選項就只有 月 / 日 / 年。
自己看過去還是覺得有點不順眼，但還沒找到修改的方法。

-可用的官方小工具減少
或是外觀沒有跟上新版，直接擺出來不太協調。

-曾經發生官方背景圖片變成空白
當時剛好在瀏覽自己的網誌，可能是在維護吧？還好之前有把用過的圖抓下來

---

回到索引