v 文章內自定一個重點筆記的區塊 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


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

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

Related Posts Plugin for WordPress, Blogger...