October 16, 2011

Blogger的美化─模版的介紹與修改

請先利用Blogger後台「 範本」中「備份／還原」的功能，先將你的模版備份起來，避免改錯了，還有還原的機會。

接下來點選「修改HTML」，點選後會有一行警告文字提醒你，按「繼續」直接進入到編輯器中。

編輯器出現了如下結構的文件，在這個文件中，我們可以透過修改其中的某段文字達到網誌外觀的修改，及功能的增減。下面方框中的紅色文字，大致介紹了模版中各個區塊所專責的功能。


<?xml version="1.0" encoding="UTF-8" ?>

------------↑這裏是文件宣告↑------------
<head>

--↓這裏開始定義了字型的顏色及大小↓--
   /* Variable definitions


-------↓這裏開始定義CSS的外觀↓-------
   body {


</head>


----↓這裏開始是HTML的內容以及結構↓----
<body>


</body>
</html>

無法透過後台調整的部分，我們試著修改HTML文件的的內容來改變部落格的外觀，記的要勾選「展開小裝置範本」。

改裝圖

  1. 原本模版中對於內文文字的字級設定過小（上圖的綠色區塊），並不適合閱讀，讓我們試著把字改大看看。

    利用瀏覽器本身的搜尋功能（Ctrl+F）尋找這個字串：post-body{ 或是 post-body {  （有時侯模版的作者會在中間留個空隔），找到以下視窗中的程式碼。

    .post-body {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5pFccO80F_E97h7OLBnXKQ9jQowAui-gkz4uUR1QW6-stFu_dUXn35v9Q2jKmTOo8n2R4zDUAPLWrpfTo0wNXPSNgA7SAcsimOXXY61b2pMaYl5vxxRaOCgG5xh2WtKHZ0P9pbGOTLev1/s0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5pFccO80F_E97h7OLBnXKQ9jQowAui-gkz4uUR1QW6-stFu_dUXn35v9Q2jKmTOo8n2R4zDUAPLWrpfTo0wNXPSNgA7SAcsimOXXY61b2pMaYl5vxxRaOCgG5xh2WtKHZ0P9pbGOTLev1/s0/bk_header_separator.png) 50% 100% no-repeat;
    padding-bottom:10px;
    margin-bottom:20px;
    font-size:11pt;
    line-height:20px;}
    加入後，別急著存檔，先按「預覽」的功能，看看字的大小是不是改變了。如果大小滿意了，再按下「儲存範本」。

  2. 我們接著把藍色框中搜尋網址的位址更改，讓搜尋指向這個部落格作自己的站內搜尋。一樣，我們以（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>
    將其中藍色字的網址改成你自己部落格的網址，紅色字的英文改成中文的"站內搜尋"或者任何相關的字詞。改完之後，先預覽，沒問題之後再存檔。

  3. 在模版上有一些我不需要的圖案，像是改裝圖中黃色框的圖示，這些也需要透過修改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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-0uzi5gP3pXst4uddzdAIJLmHTm5FDJETCZ-qg4yYbgYySa0Aqaq1MGFkMusZV5ooSlu1NeQcuXPKga9gPjN8LX_y_VAmpy547sFfg5eEP2hHc45tY-Hcf3qw8XTukxzjWJVwn1BJOHWW/s0/ico_social_twitter.png) 0 0 no-repeat;}

    #socialIcons li a.facebook{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCHYwuU350H49GII9Z1urVT0bpd5wjvfuxyojgwvvcB6YN7xRWlFkttRYp96MekXIdLBA5y3tKbueJhoiHhXrcvAOpHEsv8HET14QiIBRTCtKysFZ5zgP-5ek9QAEC6zKzhsYddCaYFbpF/s0/ico_social_facebook.png) 0 0 no-repeat;}

    #socialIcons li a.rss {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAkHuNFWgxQDXAGiawkV5Asam8Zp_rIorT1WUgh53Y6MLpsPWP-jd_9ZPXLePzF2cjSSEgzOK3Vp965FA-UWKgj5EvmFPLG97Zhc1VyEaeGtUXP-kqStYt5qT_YTi_O-A8QRhbhm3yVeR/s0/ico_social_rss.png) 0 0 no-repeat;}

    #socialIcons li a:hover {background-position:0 -46px;}

    #socialIcons #butContact {
    display:block;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH3xcmRbm1qaQefj7FTNwgwDci33r0aSqwXhqsuslrg_bY-h_YHcsDaW212pDQXB5JuC2uyiNhpDdAcP8uF_0PJdGZGPr6dPfTFv0d4fTwvt2mohZQ02q1XUzo11FOjkHYtRZb5RdrMVew/s0/ico_contact.png) 50% 0 no-repeat;
    text-indent:-9999px;
    border:none;
    height:29px;
    }

    /*#socialIcons #butContact:hover {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH3xcmRbm1qaQefj7FTNwgwDci33r0aSqwXhqsuslrg_bY-h_YHcsDaW212pDQXB5JuC2uyiNhpDdAcP8uF_0PJdGZGPr6dPfTFv0d4fTwvt2mohZQ02q1XUzo11FOjkHYtRZb5RdrMVew/s0/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!'>&quot;Join Us on Facebook!</a></li>
    <li><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='RSS'>RSS</a></li>
    </ul>
    <a href='#' id='butContact'>Contact</a>
    </div>


    <div id='twitter'>
    <h3>Latest Tweets</h3>
    <script>
    $(function(){
    $(&quot;#twitter&quot;).tweet({
    avatar_size: 24,
    count: 3,
    username: &quot;btemplates&quot;,
    loading_text: &quot;<span style='color:#999;font-size:11px;'>...searching twitter...</span>&quot;,
    //refresh_interval: 10,
    template: &quot;{avatar}{text} <br/>{time}&quot;
    });
    });
    </script>
    </div>
我們利用修改HTML範本的工作大概就是這三樣，其餘只要進後台調整小工具就可以了。

「Blogger的美化」系列筆記：

有閒也可以看看這些:
張貼者： 歡哥 於 11:59

0 意見:

Post a Comment

Subscribe to: Post Comments (Atom)

STAY WITH US

 
;
Expand
next previous
Close

Previous

0/0

Next