【導讀】

建站這麼久以來，一直沒有弄友情連結。無耐幾個月過去了，泰泰部落格流量還是不怎麼樣，於是決定今天開始部署友情連結。

“友情連結”在wordpress站點中，一般都是通過“小工具”來插入實現的。有的主題自帶“友情連結”小工具，但也有的主題是不帶“友情連結”小工具的，泰泰部落格的主題就是如此。

不帶“友情連線”小工具也沒關係，我們可以位元組造嘛。

wordpress中內建了一個“自定義HTML”的小工具，我們可以通過它來實現“友情連結”的功能。

文章首發：泰泰部落格

操作步驟

這裡主要分成兩部分：

分別是新增：HTML程式碼 和 css樣式控制程式碼

HTML程式碼：新增友情連結的主體資訊。

css程式碼：控制友情連結的顯示樣式和位置。

（1）新增HTML程式碼

首先，先調出wordpress中的“自定義HTML”小工具，將其放置在合適的位置。

（1.1）新增html程式碼

在上圖中的“html程式碼填充區”新增以下程式碼，並根據情況做一定的修改。

<ul style="padding: 12px 13px 10px 0px;" class="wailian">
	<li><a href="http://www.taitaiblog.com" target="_blank">泰泰部落格</a></li>
	<li><a href="http://www.910yhq.com" target="_blank">910優惠券</a></li>
</ul>
 

以上的程式碼，只需要修改<li></li>標籤內容即可，一條<li>標籤表示一條“友情連結”，需要新增或者刪除“友情連結”，只需在<ul></ui>內進行<li>標籤的增減即可！

href=""內的連結為對方要交換的網址。<a>標籤內的文字為對方要新增的關鍵詞。

（2）新增css樣式控制程式碼

在網站主題的css控制樣式檔案中，追加以下程式碼。

wordpress站點的css樣式控制檔案一般為主題下的“style.css”檔案，大家根據自己的情況修改即可。

/******* 友情連結 css 控制  ******/
.wailian li{ float:left}
.wailian li a {
    background: #FAFAFA;
    border: 1px solid #e9e9e9;
    display: block;
    text-align: center;
    margin-left: 15px;
    margin-bottom: 5px;
    padding: 0 4px;
    border-radius: 2px;
    width:120px;
    color: #5e5e5e;
    line-height: 30px;
    white-space:nowrap;
    overflow:hidden;
	}
.wailian li a:hover {
    color: #fff;
    background: #428BCA;
    }
 

至此，“友情連結”新增成功，效果如下：

PS：如果你覺得你的“友情連結”框體過大，或者出現錯位的情況，那麼只需要修改 以上css程式碼中的【width:120px;】引數即可！