2010年1月12日 星期二

文章內自定一個重點筆記的區塊


很多時候我們寫文章時可以利用不同的CSS格式,幫自己的文章作點不同變化,常見的就是引用(blockquote)程式碼區的(Code)設計,另外很多人也有使用在文章下方加註重點畫記,今天綸太郎則是要分享自己用筆記本或是大型圖示,標記文章重點的方式,當然粗體及下橫線及顏色標記也是最基本的一種。

這個方式很簡單,你也可以試著自己做看看,利用不同的背景圖來當作重點標記的變化。

應該有些人在上篇文章就有看到這個效果了,原理也和以前談過的一樣,先下一個css定義,然後將要使用的文字用div或是span將他圈起來即可。

div和span的不同在哪裡?
div是針對整個區塊的設定,而span則是針對一段文字的設定,兩者是不同的,大家可以試看看,就知道效果是怎樣。

首先當然要先給的定義名稱,例如.post-note,我們把它放到後台版面配置的修改Html裡,放在 ]]></b:skin>之前適當的位置即可。

.post-note {
width: 500px; /*重點筆記的寬度*/
border-right:1px solid #D1D3FF;
margin-left: 30px; /*文字距離左邊的寬度*/
padding: 5px 0px 5px 30px;
background: url(背景圖網址) repeat-y;
}


這裡的圖案我是用長條圖,如下


所以repeat-y要垂直重複,你的文章有多長,背景就會帶到多長,如果想要用固定的長度,加上height: 300px;長度可自定,及overflow: auto;的敘述即可。
然後在編輯文章時,將要顯示在重點筆記區的文字,使用修改Html模式,然後在內容前後用div或是span圍起來即可,如下顯示
<div class="post-note">
重點筆記內容....
</div>


這樣顯示的樣子,就如下面這樣子,我要推薦去年的精選文章,
2009年推薦文章精選:
喚回童心的日本超可愛卡通桌布
新增Plurk、Twitter及Facebook推文按鈕
一分鐘讓你的部落格也有數字分頁效果
加強blogger作者留言和一般留言的區分
在部落格名稱下方放個水平連結導覽列
兩欄式簡潔的模板Flashyweb ---改版分享
Blogger Templates│2009年最新模板資源
如何利用捲軸讓邊欄(Sidebar)元件縮短
將繼續閱讀(Readmore)更改位置或外觀
設定留言回應編號,讓部落格互動更活潑


另外一種如果你是要使用一大片的圖案當做重點筆記的背景圖,那相對的寬度及長度就要設定出來,還有捲軸也要設定,所以再來一個新的定義

.post-note2 {
display : block;
padding-top: 50px;
padding-left: 70px;
width: 500px; /*重點筆記的寬度*/
height: 351px; /*重點筆記的高度*/
background: url(http://sites.google.com/site/lunfiles/box/flower.jpg) no-repeat;
overflow: auto:
}


這裡不同的是,要用display:block;的敘述,這樣才能夠設定padding與左右上下的距離。

要顯示的文字內容,一樣
<div class="post-note2">
重點筆記內容....
</div>


顯示如下,

0與1謎詭世界的Facebook粉絲專頁

剛踏入Google Blogger部落格的朋友否有很多的不確定,
來到這裡可以提供你最新關於Google Blogger的訊息
加入這個園地讓你對blogger的操作更快進入狀況
提供修改模版(Blogger templates)教學與小技巧
也歡迎大家分享討論關於blogger的一切


其他的文章區的變化,可以參考以下的文章,
[筆記]在文章裡顯示優質的程式碼區
就是要不一樣! 幫文字段落加上獨樹一格的底線 underline
都是類似的作法,大家可以參考看看。

21 則留言:

  1. 好文章推一下,現在我還用不太到,不過以後應該很有機會用到~

    回覆刪除
  2. 謝謝,土法煉鋼,喜歡亂試。

    回覆刪除
  3. 你現在用的版模是什麼啊?好像滿不錯的!

    回覆刪除
  4. 這個,不過我自己也改了很多地方。
    http://btemplates.com/2009/08/06/hybrid-news/

    回覆刪除
  5. 你好,你現在的模版那些廣告都是自己放代碼而不是用小工具嗎?我覺得你的廣告這樣放很不錯啊!

    回覆刪除
  6. 是啊,都是自己放,我沒有用過後台的廣告工具,因為好像沒法追蹤成效。

    回覆刪除
  7. 你好,如果我想自設廣告欄位,可以參考哪篇文章?例如放在標題上,文章下方。謝謝

    回覆刪除
  8. 期待你再次寫篇類似“兩欄式簡潔的模板Flashyweb ---改版分享 來分享你改版模的一些點點滴滴

    回覆刪除
  9. 廣告配置可以參考這篇http://01mistery.blogspot.com/2008/03/google-adsense_14.html或是用小工具html/java放入程式碼,推曳到你想展示的位置都可以。

    回覆刪除
  10. To kevin,blogger版面系列文章都是我改版的經驗分享歐,如果寫一篇類似的,大概也是相同的相關連結吧。

    回覆刪除
  11. 你好,我想問一下,如果要輪播網誌應用哪種方法?用google reader 只顯示全部,並不是隨機播放,用網誌清單也是不會隨機播放,該怎做呢?謝謝你呀

    回覆刪除
  12. 我不會隨機播放的網誌輪播,如果你只要輪播你自己的隨機文章,可以參考這篇http://01mistery.blogspot.com/2009/10/random-posts.html。

    回覆刪除
  13. http://btemplates.com/2009/08/06/hybrid-news/

    首頁的文章上面的那個要怎麼改成自己的文章啊?

    回覆刪除
  14. 頁面下方有個 Template Settings 按下就有說明了,我是照著做而已。

    回覆刪除
  15. 奇怪怎麼找不到呢?
    如果想隱藏以來要怎麼弄呢?
    謝謝!!

    回覆刪除
  16. http://www.freebloggertemplate.info/2009/07/hybrid-news-blogger-template.html
    隱藏?? 這我就不會了。

    回覆刪除
  17. 請問那個版模上面的黑色導覽怎麼隱藏或換成blogger本來的Navbar?我試了好多次都出問題,不知你有沒有辦法解決!謝謝!

    回覆刪除
  18. 把#navbar-iframe {
    height : 0;
    visibility : hidden;
    display : none;}
    這個語法刪除,navbar就會出現

    #navigation {
    把這裡的語法換成上面的語法就會隱藏

    但是牽涉到背景圖,你要自己調整。

    回覆刪除
  19. 你好!我修改了一下好像出現很多問題,就像你说的牽涉到背景圖 Second Navigations
    一直调整不好!帮我看看到底是那出问题了!谢谢!http://hskj123.blogspot.com/

    回覆刪除
  20. 背景圖刪掉,背景用顏色代替。

    回覆刪除
  21. 不錯的 idea, 將來應該用得到,先記入筆記~~

    回覆刪除

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