2009年11月13日 星期五

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


這小東西是綸太郎在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

11 則留言:

  1. 感謝您的分享,
    這樣不但可以模組化,
    版面也清爽多了!

    回覆刪除
  2. 沒辦法,因為我的文章尾部一團糟,還在想怎麼拯救他。

    回覆刪除
  3. 不好意思,再次請教您...;
    我用Html/JavaScript單元置於頂部,
    但無法如放在底部的左邊對齊,
    看起來就怪怪的,不知如何解決?

    謝謝您!

    回覆刪除
  4. 因為你的.sidebar .widget-content {
    margin: 0 5px;
    小工具裡面有加上5px的寬度,改成0就行了,但是會影響所有邊欄widget左右邊距的寬度,不然就是要另設一個
    .author_info2 的元素來用在小工具單元上。

    回覆刪除
  5. 您好,
    我已設訂為margin: 0 0px;
    但沒有反應...。
    不知何因呢?

    回覆刪除
  6. 您好,我以.author_info2 方法修改好了,
    真的很謝謝您!

    回覆刪除
  7. 不客氣,改好就好。

    回覆刪除
  8. 謝謝,這個方法還不錯,文章頁面看起來比較有條理了呢。

    回覆刪除
  9. 常常感受到你的熱情支持,真的很謝謝你。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能