我相信與部落格來訪的訪客互動可以增進訪客對部落格的好感，也可以進一步增加訪客的忠誠度。我的作法是在部落格的版面上擺放Email與RSS的圖示，或是FeedBurner的訂閱人數，這樣可以讓訪客方便聯絡我們，以及方面訪客訂閱我們的部落格最新文章。不過這些圖示擺放在哪裡可就是一門學問了…

我原本把這些圖示擺放在側邊欄的位置，但因為種種原因，我沒有把他們擺放在最上邊的側邊欄，而是跟部落格的計數器以及一些統計資料放在一起，後來看到有些部落格巧妙的利用部落格標題右邊的空白區來擺放這些圖示，但可以達到節省側邊欄版面的目的，還可以讓這些圖示有畫龍點「睛」的效果。

請注意：這裡所示範的方法使用WordPress的Twenty Ten版型。

Step 1.
如果你有輸入部落格的描述文字，建議你先移動它從原本在部落格名稱右邊到部落格名稱下面；如果你沒有輸入部落格的描述文字，不改也沒關係。

請先開啟WordPress的styless.css樣式表，用搜尋找到【#site-description】關鍵字如下的程式碼，然後將【float】改成【left】；將【width】改成【700px】，這裡的數字可以隨實際的需求調整。當然你也可以稍微調整一下【margin】的數字讓部落格描述的位置更符合你的需要。

#site-description {
    clear: right;
    float: right;
    font-style: italic;
    margin: 15px 0 18px 0;
    width: 260px;
}

更改成下面的程式碼：

#site-description {
    clear: both;
    float: left;
    font-style: italic;
    font-size: 12px;
    margin: 5px 0 5px 0;
    width: 700px;
}

Step 2.
在styless.css新增下面的程式碼。其中【position: absolute;】是關鍵，它定義圖示出現的位置為絕對位置，也就是說我們可以自行定義其在螢幕上的上下左右位置，而不受其他區塊的影響，但它還是受其母區塊的限制，所以下面我們也定義其【top】為【-15px】，以及【right】為【-20 px】，表示它的位置會出現在其母區塊外邊上面15個像素以及右邊20個像素的位置。
另外，這裡也定義了圖示外的周圍邊界為3個像素【margin: 3px;】，這樣才不至於讓每個圖示連在一起；而【border: 0px;】則是為了消除一些先前曾經定義過得黑色的邊框，如果你確信之前沒有設定過邊框的寬度，你也可以不加這行指令。

/*************************************
    RSS Feed
**************************************/
.blogfuntw-feeds {
    position: absolute;
    top: -15px;
    right: -20px;
    display: block;
    width: 150px;
    float: right;
}
#branding .blogfuntw-rss img {
    margin: 3px;
    border: 0px;
}

Step 3. 添加程式碼到head.php
開啟head.php當按，用搜尋找到【site-description】關鍵字，然後將以下的程式碼加到這段程式碼【<div id=”site-description”><?php bloginfo( ‘description’ ); ?></div>】的下面，然後按「更新檔案」。
我這裡置示範了Email與RSS的兩個圖示，分別放在【<span class=”blogfuntw-rss”>…</span>】之間，其中紫色字的地方是兩個圖示的位址；而紅色字的地方你應該更改成自己的電子郵件與說明。

<!– === 擺放RSS、email於螢幕右上角 start === –>
<div class=”blogfuntw-feeds”>
<span class=”blogfuntw-rss”><a href=”mailto:blogfuntw@gmail.com“><img src=”<?php bloginfo(‘template_url’); ?>/images/email-icon1.png” title=”電子郵件，聯絡【工作熊】“></a></span>
<span class=”blogfuntw-rss”><a href=”<?php if($db_feedburner_address) { echo $db_feedburner_address; } else { bloginfo(‘rss2_url’); }?>”><img src=”<?php bloginfo(‘template_url’); ?>/images/rss-icon.png” title=”RSS訂閱”></img></a></span>
</div>
<!– === 擺放RSS、email於螢幕右上角 end === –>

結果出來囉！不過這圖示的位置怎麼怪怪的，Email與RSS的圖示好像會隨著螢幕解析度或是瀏覽器的大小的變化而跟著改變位置？是不是有哪邊沒有設定好？下面的圖示跑到白底框的外面了。

Step 4.
找了老半天終於發現原來這裡少加了一條程式碼，在其母區塊的地方加入【position: relative;】的指令就可以了，這樣這兩個圖示就會跟著視窗的大小及螢幕解析度而調整位置，但還是保留在右上的位置。Twenty Ten的版型要找到【#wrapper {…}】的字串，然後新增一條如下的程式碼。

Step 5.
下面就是完成品，圖示總顯示在白底框之內，而且隨著視窗大小改變也是固定在原來的位置。

回到》用Wordpress架設部落格網站教學 首頁

延伸閱讀：
添加日曆圖示到WordPress部落格
如何申請Histats網站計數器
如何將Google Search移動到水平導覽列