幫自己設計個版權所有的小方塊單元

這小東西是綸太郎在Jacky的部落格上看到的，覺得不錯用，跟大家介紹，在你的文章後面放上一個版權所有或是作者的簡介，提醒閱讀者或是加強讀者印象的一個單元，如果有需要的朋友，也可以自己練習設計看看。

原始模板的語法來源：
Download WooThemes “The Gazette Edition” Converted for Blogger Free---Bloganol

我要利用的是裡面 .author_info，作者資訊的單元，
原始模板記得備份，進入後台，版面配置→修改Html→勾選"展開小裝置範本"
【第一步驟】
先在CSS程式區，新增author_info這區(只要放在]]></b:skin>之前即可)，加入下列定義：
/* Author_info
----------------------------------------------- */
.author_info {
float: left;
width: 90%;
margin: 10px;
padding: 10px;
font-size: 12px;
background: #eee;
border: 1px solid #ccc;
}
.author_info h3 {
margin-bottom: 10px;
}
.author_info p {
line-height:1.5em;
}
.author_photo {
float: left;
margin: 0 10px 0 10px;
background: #fff;
}
.author_photo img {
border: 1px solid #939393;
}
細項説明如下圖，


定義好外觀，接著就是要把他放到單篇文章裡面，這個可能就要比較深的技巧，因為每個人的版面不太一樣，要想放在哪裡，就要找到該位置。

由於我們不要在首頁出現，而是要出現在單篇文章最後面，所以前後一定要用
<b:if cond='data:blog.pageType == "item"'>
及
</b:if>
把語法包圍起來，這樣就不會顯示在首頁，而是在單篇文章呈現時才會跑出來。
所以找到該放的位置，通常是在
<div class='post-footer-line post-footer-line-3'/>之前，
有的模板是在post-footer-line-2或是post-footer-line-1，就看你頁尾單元的配置，自己找看看。

【第二步驟】
加入以下語法
<b:if cond='data:blog.pageType == "item"'>
<div class='author_info'>
<h3>本文作者:XXX</h3>
<p><span class='author_photo'><img src='大頭圖片網址'/></span>版權所有，請勿複製。</p>
</div>
<div style='clear: both;'/>
</b:if>
大頭的圖片，最好以60px*60px大小為宜，像我文章上這樣的大小。

當然如果你覺得每篇文章都加入的方式不喜歡，你也可以用新增小工具來加入，第二步驟就改為，在後台新增一個Html/JavaScript單元，然後放入
<div class="author_info">
<h3>本文作者:XXX</h3>
<p><span class="author_photo"><img src="圖片網址"/></span>版權所有，請勿任意轉載。</p>
</div>
顯示大概下圖這樣，


其實官方的小工具，裡面也有一個"簡介"，也是類似的功能，但是限於官方所提供的資料，而我介紹的這個是可以自定你想要告訴讀者的訊息，既然Blogger這麼自由好用，當然就自己來設計看看，也是不錯的。

當然背景也可以用圖案設計，就看個人的巧思了，以下是不同顏色的配置，可以參考看看。




這裡面的敘述文字完全你可以自己來寫，看想要告訴你的讀者什麼話，版權宣告或是歡迎訂閱，甚至來信加上email地址都可以，就看格主自己的需要了。

參考來源：
Empty - Jacky.C.J.Yeh