接下來點選「修改HTML」，點選後會有一行警告文字提醒你，按「繼續」直接進入到編輯器中。
編輯器出現了如下結構的文件，在這個文件中，我們可以透過修改其中的某段文字達到網誌外觀的修改，及功能的增減。下面方框中的紅色文字，大致介紹了模版中各個區塊所專責的功能。
<?xml version="1.0" encoding="UTF-8" ?>
------------↑這裏是文件宣告↑------------
<head>
--↓這裏開始定義了字型的顏色及大小↓--
/* Variable definitions
-------↓這裏開始定義CSS的外觀↓-------
body {</head>
----↓這裏開始是HTML的內容以及結構↓----
<body></body> </html> |
無法透過後台調整的部分，我們試著修改HTML文件的的內容來改變部落格的外觀，記的要勾選「展開小裝置範本」。
我們利用修改HTML範本的工作大概就是這三樣，其餘只要進後台調整小工具就可以了。 |
| 改裝圖 |
- 原本模版中對於內文文字的字級設定過小（上圖的綠色區塊），並不適合閱讀，讓我們試著把字改大看看。
利用瀏覽器本身的搜尋功能（Ctrl+F）尋找這個字串：post-body{ 或是 post-body { （有時侯模版的作者會在中間留個空隔），找到以下視窗中的程式碼。
.post-body {
background:url(http://1.bp.blogspot.com/-KXQMBiCn9PQ/Tn7dKkDADWI/AAAAAAAAAoU/oNsyL44OYz0/s000/bk_header_separator.png) 50% 100% no-repeat;
padding-bottom:10px;
margin-bottom:20px;
line-height:20px;}
上面的程式碼中並沒有字級大小的敘述，我們自行加入 font-size:11pt; 到下面所列出程式碼中紅字的位置，更改pt前的數值，可以更改字體的大小。line-height:20px; 行高，表示行與行間的距離，你可更改px前的數值來控制行高。
.post-body {
background:url(http://1.bp.blogspot.com/-KXQMBiCn9PQ/Tn7dKkDADWI/AAAAAAAAAoU/oNsyL44OYz0/s000/bk_header_separator.png) 50% 100% no-repeat;
padding-bottom:10px;
margin-bottom:20px;
font-size:11pt;
line-height:20px;}
加入後，別急著存檔，先按「預覽」的功能，看看字的大小是不是改變了。如果大小滿意了，再按下「儲存範本」。
- 我們接著把藍色框中搜尋網址的位址更改，讓搜尋指向這個部落格作自己的站內搜尋。一樣，我們以（Ctrl+F）來找尋 type your search and hit enter 在程式碼中的所在。相信你應該很快的找到了
<div id="topSearch">
<form action="http://diary-notebook-template.blogspot.com/search" id="searchform" method="get">
<code><input id="b-query" name="q" onfocus="this.value=''" type="text" value="type your search and hit enter" />
</form>
</div>
將其中藍色字的網址改成你自己部落格的網址，紅色字的英文改成中文的"站內搜尋"或者任何相關的字詞。改完之後，先預覽，沒問題之後再存檔。 - 在模版上有一些我不需要的圖案，像是改裝圖中黃色框的圖示，這些也需要透過修改HTML範本來達成。
我們先利用一些圖示的關鍵字來搜尋這些圖在範本中的位置，例如twitter Facebook RSS CONTACT 等，一共可以找到三處位置，我們只要刪除圖片連結及網址連結就行了。請將下面三個視窗中出現的程式碼全數刪除。並且存檔。檢查畫面後，你會發現圖案已經消失了，但是下方的小工具會往上跑，這個之後我們再來處理。
#socialIcons{
height: 90px;
margin-bottom: 40px;
margin-top: -22px;
text-align: center;
}
#socialIcons ul{
padding: 0px 0px 0px 6px;
margin-bottom:8px;
overflow:hidden;
text-align:center;
}
#socialIcons li {display:inline;}
#socialIcons li a{
display:block;
width:67px;
height:46px;
text-indent:-9999px;
border:none;
float:left;
}
#socialIcons li a.twitter{
background:url(http://2.bp.blogspot.com/-x1p5ij3JhiU/Tn7dMJvLcrI/AAAAAAAAAos/7rmquWn5-ls/s000/ico_social_twitter.png) 0 0 no-repeat;}
#socialIcons li a.facebook{
background:url(http://4.bp.blogspot.com/-rRy8A9piOfk/Tn7dMSpCxAI/AAAAAAAAAow/4vAVqFGU3Wk/s000/ico_social_facebook.png) 0 0 no-repeat;}
#socialIcons li a.rss {
background:url(http://3.bp.blogspot.com/-MLlhQ8LXBKc/Tn7dMvEguZI/AAAAAAAAAo0/xFHSluRiJz0/s000/ico_social_rss.png) 0 0 no-repeat;}
#socialIcons li a:hover {background-position:0 -46px;}
#socialIcons #butContact {
display:block;
background:url(http://4.bp.blogspot.com/-2y8ZzqEz8AQ/Tn7dM4NDDjI/AAAAAAAAAo4/Fd5z01rnBXU/s000/ico_contact.png) 50% 0 no-repeat;
text-indent:-9999px;
border:none;
height:29px;
}
/*#socialIcons #butContact:hover {
background:url(http://4.bp.blogspot.com/-2y8ZzqEz8AQ/Tn7dM4NDDjI/AAAAAAAAAo4/Fd5z01rnBXU/s000/ico_contact.png) 50% -29px no-repeat;
}*/
<div id='socialIcons'>
<ul>
<li><a class='twitter tip' href='http://twitter.com/YOUR_USERNAME' title='Follow Us on Twitter!'>Follow Us on Twitter!</a></li>
<li><a class='facebook' href='https://www.facebook.com/YOUR_USERNAME' title='Join Us on Facebook!'>"Join Us on Facebook!</a></li>
<li><a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='RSS'>RSS</a></li>
</ul>
<a href='#' id='butContact'>Contact</a>
</div>
<div id='twitter'>
<h3>Latest Tweets</h3>
<script>
$(function(){
$("#twitter").tweet({
avatar_size: 24,
count: 3,
username: "btemplates",
loading_text: "<span style='color:#999;font-size:11px;'>...searching twitter...</span>",
//refresh_interval: 10,
template: "{avatar}{text} <br/>{time}"
});
});
</script>
</div>
「Blogger的美化」系列筆記：
0 意見:
Post a Comment