iPlay99玩樂誌

「連結提示圖示」這個功能，與回到最上層的功能差不多，只是提高網站的親和力，其實就只是加上一個圖片，讓人家知道這是個連向外部網站的超連結，有點雞肋的功能，可是因為有在上面花了點時間，所以還是po一下好了，也許以後懂更多了，能有改善的空間。

如果你在閱讀底下文章過程中，有些疑問，你可以參閱底下文章，或許會有所幫助：

Blogger改造 - 入門介紹+前置動作(更新中) by iPlay99
Blogger - 版面配置的網頁元素標記widget說明 by iPlay99

作法其實很簡單，有用到一些 CSS 語法，首先進到「範本」>>「修改html」>>「展開小裝置範本」，Ctrl + F 查找 a img，應該會找到像下面的語法段落，如果沒有的話，請自行新增，將這段語法新增在 </b:skin> 之前即可：

a img {
border-width:0;
}

接著在上面這一段語法的後面，再加上下面這一段紅色字體語法，像底下這樣，你也可以自行將圖片網址置換成你自己的，而如果有其它格式的通訊協議，例如，mms、https 你也可以再自行加入。

a img {
border-width:0;
}
a[href^="http:"] { background: url("http://sandnfish.googlepages.com/outlink.gif") no-repeat right top;
padding-right: 9px;
}

預覽一下，是不是超連結的旁邊都多了一個 圖示

2、當然，如果有些超連結，例如：引用自己的文章之類的…不想有這個圖示，也可以將它排除掉。只要在剛才加進去的代碼後面，再加下面這一段語法：

a[href^="http://iplay99.blogspot.com/"] {
background-image: none;
padding-right: 0;
}

其中，將 a[href^=http://iplay99.blogspot.com] 中的網址換成那些不要指示的鏈接即可。

這樣子的話，就可以過濾掉一下連結了。不過，這樣子的話，你會發現整個站到處都是箭頭，實在醜得可以。

一開始我也在想css 的語法要如何將其它的連結給取消掉，要一個個把網域給過濾掉嗎？可是那涵蓋的區塊太廣，且連結種類太多了，不好做。

結果，文章擱下了兩三天，在撰寫其它文章草稿時忽然想到， 直接用套用樣式就可以了，簡單又輕鬆，幹嘛想得那麼複雜呢 XD

所以呢？像我自己是將它使用在文章區塊裡，一般來說你可以直接 Ctrl+F 查找 <div class='post-header-line 通常會在其底下不遠處找到 <div class='post-body'> 或類似 <div class='post 開頭的。

底下是以我自己的樣版為例：

<div class='post-header-line-1'/>
<b:if cond='data:post.dateHeader'>
<h3><span class='date-header'><data:post.dateHeader/></span></h3>
</b:if>
<b:if cond='data:post.title'>
<h2>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<div class='posts'>

當你找到之後，知道了「文章主體」這個區塊的命名後，像我的是叫 posts

這時請回到剛剛我們剛新增的 CSS 語法上，將 .posts 加在最前面，像底下這樣：

a img {
border-width:0;
}
.posts a[href^="http:"] { background: url("http://sandnfish.googlepages.com/outlink.gif") no-repeat right top;
padding-right: 9px;
}

.posts a[href^="http://iplay99.blogspot.com/"] {
background-image: none;
padding-right: 0;
}

接著再預覽看看，應該只剩下文章區塊有連結提示圖示而已。

以上！

註：如果有人知道這個功能的英文稱呼叫什麼，希望能告訴小弟，非常感謝。

HEMiDEMi 的標籤：blogger hack,連結提示圖示,icon,css