v 幫自己設計個版權所有的小方塊單元 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...