從上次改過 Blogger 後，就整整一年一個月沒有再有任何動作了～
自從看到某 Blog 的樣式，就有想要改了～本來打算暑假中的時間來動手，不過忙於打工又拖了不少時間，倒頭來還是沒有動手做～
嘛～說來說去除了忙以外，懶跟混大概就是最大的因素了～
這次趁著剛寫完文章的熱血繼續埋頭苦幹，繼續把未完的計畫給實施吧～XD
裝潢時間
裝潢前最重要的是就把面板給備份一次，免得改失敗再來煩惱，先進到設定頁面，然後「面版配置」→「修改 HTML」，選擇備份還原範本中的下載完整範本，到此完成備份工作。
另一個小技巧，進到 Blog 頁面後，按 ctrl+s 將頁面存下來，選擇只存儲單一頁面後儲存，由於 Blogger 的頁面需要的圖示都以絕對路徑標示為主，所以不會有缺少東西而使頁面顯示出問題狀況，因此可以利用這方式來做修改練習，減少使用網路修改需要儲存、等待頁面顯示的時間。
在更動面版時，個人比較建議將面版樣式碼複製到文字編輯器上修改，以有標色能力的編輯器較佳，個人是用 Notepad++ 來操作，可自行選用熟悉的編輯器做修改。另外每更動完成一項，覺得樣式滿意的話，也請再執行一次備份，省去後面做錯要再從來的麻煩。
以下所有「裝潢」都不會更動到小裝置，請以不展開小裝置範本將程式碼複製至編輯器上。
尋找
/* Page Structure在這下面會看到 CSS 樣式的開頭，此區為 Blog 的框架配置，Blog 頁面的寬度，文章區的寬度以及側邊欄的寬度，寬度的調整上要符合「文章區的寬度」+「側邊欄的寬度」+「兩區邊界寬度」=「Blog 頁面的寬度」。
可以個人圖中所選的部分做修改，基本上總加在 1024 左右就差不多了～
目前大部分的人螢幕至少都會調到 1024 左右的解析度，為求不出現下方的捲軸，在這個值以下會比較好～
裝潢二、「圓角」計畫
此步驟更動範圍不到小裝置，以不展開小裝置範本將程式碼複製至編輯器上。
圓角是一種方框修飾方式，不過由於以已往 CSS 不支援這個樣式，所以圓角的呈現方式都是用複數個的 div 帶著圓角的背景圖置於方框的四個角，來解決 CSS 無法達成的效果，不過這在 CSS 3 草案中已得到支援，但支援的瀏覽器僅有 Firefox、Safari、Chrome，IE 8 和 Opera 皆不支援。不過由於這個樣式是以兩個固定長度的圓角圖來呈現，在上一步驟中改過寬度就會造成失效，所以個人還是打算才取此一方式。
大致上，預設的樣式都不會有太大的改變，框架與樣式 ID 的對應大致上是這樣，不過實際上圓角圖所用的地方並非每個區塊都放在相似的名稱區塊中，查看 body 部分的程式碼，找找看有沒有 Div 中的 ID 幾乎是相似的，純追加了數字的樣式，
修改前
#sidebarbottom-wrap1 {
background: $bottomSidebarBgColor url("http://www.blogblog.com/rounders4/corners_side_top.gif") no-repeat $startSide top;
margin:0 0 15px;
padding:10px 0 0;
color: $bottomSidebarTextColor;
}
#sidebarbottom-wrap2 {
background:url("http://www1.blogblog.com/rounders4/corners_side_bot.gif") no-repeat $startSide bottom;
padding:0 0 8px;
}
修改後
#sidebarbottom-wrap1 {
background: $bottomSidebarBgColor;/* url("http://www.blogblog.com/rounders4/corners_side_top.gif") no-repeat $startSide top;*/
margin:0 0 15px;
padding:10px 0 8px;
color: $bottomSidebarTextColor;
-moz-border-radius: 8px; /* 適用 Firefox 的圓角框指令 */
-webkit-border-radius: 8px; /* 適用 Safari, Chrome 的圓角框指令 */
}
/*#sidebarbottom-wrap2 {
background:url("http://www1.blogblog.com/rounders4/corners_side_bot.gif") no-repeat $startSide bottom;
padding:0 0 8px;
}*/
修改前
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}
#footer-wrap2 {
background:#447766 url("http://sites.google.com/a/pcnickq.co.cc/pcnickq/pic/corners_cap_top4_800.gif") no-repeat $startSide top;
color:$titleTextColor;
}
#footer {
background:url(http://sites.google.com/a/pcnickq.co.cc/pcnickq/pic/corners_cap_bot4_800.gif") no-repeat $startSide bottom;
padding:8px 15px;
}
#footer-wrap1 { 做完以上修改後，帶有被註解掉 ID 的 DIV 也沒有作用了，可以視情況去掉這些標籤。
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}
/*#footer-wrap2 {
background:#447766 url("http://sites.google.com/a/pcnickq.co.cc/pcnickq/pic/corners_cap_top4_800.gif") no-repeat $startSide top;
color:$titleTextColor;
}*/
#footer {
background:#447766;
color:$titleTextColor;
/* background:url("http://sites.google.com/a/pcnickq.co.cc/pcnickq/pic/corners_cap_bot4_800.gif") no-repeat $startSide bottom;*/
padding:8px 15px;
-moz-border-radius: 8px; /* 適用 Firefox 的圓角框指令 */
-webkit-border-radius: 8px; /* 適用 Safari, Chrome 的圓角框指令 */
}
PS. 本篇部分資料來自工作熊的Blog語法研究室--為側邊欄的標題框加上圓角
裝潢三、新增側邊欄
此步驟更動範圍不到小裝置，以不展開小裝置範本將程式碼複製至編輯器上。
這邊要設置可新增小裝置的「區段」，因此需要新增一些東西，其一是側邊欄框架，其二是側邊欄的內部框架，最後是 CSS 樣式，以下是個人初始側邊樣式：
<div id='sidebar-wrap'> ←側邊欄框架
<div id='sidebartop-wrap1'> ←頂部側邊欄框架
</b:section id="sidebartop" class="sidebar" showaddelement="yes"> ←側邊欄小裝置
...
</b:section>
</div>
<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'> ←底部側邊欄框架
<b:section id="sidebar" class="sidebar" showaddelement="yes">
...
</b:section>
</div></div>
</div>
<div id='sidebar-wrap2'>
<div id='sidebartop-wrap2'>
</b:section id="sidebartop2" class="sidebar" showaddelement="yes">
...
</b:section>
</div>
</div>
#sidebar-wrap { 修改成
#sidebar-wrap, #sidebar-wrap2 { 如果是這個樣式，
#sidebartop a { 修改成
#sidebartop a, #sidebartop2 a {皆以此類推，將對應到的都修改成這樣的型式，到這邊已經快完成了。(咦～不是這樣就好了，還漏了哪裡？)上一個主題中有提到對齊的事情，由於一開始只有文章區和一個側邊欄，一個對齊右邊一個對齊左邊，自然就不用去顧慮留邊的事，只要頁面夠寬就會留下來，而現在是兩個側邊欄，如果不做留邊，不管靠哪邊都對直接貼上去，如此一來就變得不美觀，因此要做留邊的動作，參照 #sidebar-wrap 中的 margin 項(如果沒有，改看 padding)，然後改成下面的型式：
#sidebar-wrap, #sidebar-wrap2 {
...
margin:15px 0 0; 原始值
...
}
#sidebar-wrap2 {
margin:15px 10px 0;
}
這節就這麼結束了嗎？不...還沒，以上的做法，只能將側邊欄都擺在左邊或是右邊，如果要擺兩側勒？在回答這麼問題之前我們先來看一下現在樣版的呈現順序，依照原先和後面的追加的程式碼來看，呈現的順序會是文章區、側邊欄一、側邊欄二，不過你會在畫面上看到這樣的位置，文章區、側邊欄二、側邊欄一，這是因為先出現先對齊的關係，欄一設右邊，就會先到對到右邊去，欄二則會卡在中間，由於文章區最早出現，所以一定優先對齊，你想說對中間？不好意思，float 沒這屬性，所以能想到的辦法是移動側邊欄一或側邊欄二的程式碼到文章區前面，然後 float 設為 left，將欄二的留邊取消掉，改在文章區上面留邊，如此就可以達成左右側邊欄。
完成後的網頁元素頁面
其實這才是主要改變面板配置的目的，由於側邊欄擺的東西太多，變的太長，所以才想到要改變面板，以符合需求。
改造四、新增最新留言
為什麼是四嗎？這是接續上一篇改造的號碼繼續寫下去的。
Blogger 基本功能上沒有這個東西，所以個人也相當困擾，平時只會進 Blogger 頁面，寫文章大多都使用本機端程式做撰寫，所以很容易忽略掉新的回覆，發現時，至少過了兩、三個月，這實在太糟糕了，剛好發現網路上 LVCHEN 大大以小裝置寫了給 Blogger 用的最新留言，因此就弄來用用了，感覺還不錯的說。
1. 連到 http://sites.google.com/site/lvchenbloggerhack/rc20cht
2. 上方兩個連結皆可以使用，將部落格網址貼上按「取得預覽」後，按「修改版面」。
3. 請將 rc_0609_f.gif、rc_0609_uf.gif、2-0.gif、external.png 四個檔案另存新檔並傳到自己的空間去，將修改版面欄位中對應名稱修改成自己空間的圖檔位置。
4. 調整到自己滿意的型式後，按 Add to Blogger 裝到自己的 Blogger 上，完成後請記得到自己的部落格調整放置位置。
到此完成新增最新留言功能。
PS. 這應該是整篇文章中最簡單的了～
Blogger 總算是弄出這個功能給大家用了，不過靜悄悄的弄出這功能，應該有很多人都還不知道吧？一般來說，這功能都會加到各位的 Blogger 裡面去(有沒有加我其實也不確定)，不過先有依照改造一手續改過的人可能會有會想要合併使用，畢竟每篇文章中都加入了隱藏用的代碼，要全部都改也很累，那就先當過度期把兩者合併，找時間再把文章一篇篇給改過再說了～不過個人的觀點是建議多花點時間把文章全部改成「原生」的功能會比較好，因為改造一的方法只是運用 CSS 屬性將文章給藏起來，並非完全不見，因此網頁在讀取時，還是會把整篇文章通通讀下來，並沒有加速顯示的效果，再者當文章沒用有到隱藏標籤時，他並不會判斷有沒有，依舊會把「繼續閱讀」給顯示出來，所以建議改完後，勤勞點把全部文章改過一遍吧～不然也可動用匯出匯入網誌的方式，以取代全部修改。
這裡會改到小裝置，請勾取展開小裝置範本，然後將整篇程式碼都複製到編輯器上，也請記得要做備份。
尋找
<data:post.body /> 找到上面的程式碼後，尋找下列的程式碼：
<b:if cond='data:blog.pageType == "item"'>
...中間省略...
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<data:post.body/>
<b:else/>
<style>.fullpost{display:none;}</style>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.jumpText/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
改造六、換行自動空一行
基本上這個修改並沒有什麼，只是增加換行行距而已，會想要這樣做，是因為過去要空一行換行都必須手動換行，但手動換行又會讓文章變得很長，想要讓文章自動換行，又會緊黏在一起，密密麻麻的看起來也很不舒服，於是改變行距就變成了很好的做法，基本上實施的方式有兩種，一種是加在樣式裡，新寫文章時就不用每次都要加，不過這樣的做法會讓之前的文章排版變亂，所以現階段建議加在文章中就好，等全部統一再做修改。將以下的標籤新增到新撰寫的文章，並把文章寫在裡面就可以了。 裡面的數字請調整到適合的寬度大小。
<div style="line-height: 36px"></div>有時候在文章不想要一倍行距，可以用同樣的方式，把數字調到 16、17 就可以了。如果打算加到樣式裡面去，將 <data:post.body/> 引進去就好了，有上一改造的東西的話，也將取代的部分或是新增的部分，都加到標籤範圍內。
不知不覺又寫了一篇「落落長」的文章，改一改樣式變得感覺挺新鮮的，不過到現在其實還沒有改好，因為兩邊側邊欄的內容物要怎麼擺也都還沒確認，自然也就不知道要怎麼做修改，嘛～就這樣子好了，過幾天再來研究要怎麼放會比較好。
沒有留言:
張貼留言