2012年1月31日 星期二

最近的 post、最近的回應、分類改小圖, 圖形設置


喜歡原創 不隨波遂流!

如何輸入語法請參考: 自定欄位輸入語法設定步驟


總覺得側欄有些小圖會漂亮點, 令資料更悅目, 吸引讀者目光去看! 營造不同版面風格!

最近的 post 和 最近的回應小圖採清單語法, 分類小圖則用背景語法:

注解和英文欄稱順序中英對照!


語法 :

<style type="text/css">/*最近的 post、最近的回應改小圖*/
#widget-recentPost .bd ul li, #widget-recentComment .bd ul.force-wrap li{list-style-image:url(小圖網址);}

/*分類改小圖*/
#widget-category li .ico{background:url(小圖網址) no-repeat;height:高度數字px;width:濶度數字px;}</style>

* * *

有些人喜歡淡雅一點, 男士沒這麼愛美, 不用小圖, 又想轉換清單扭的圖形、顏色配襯版面 *最近的 post和最近回應可用以下語法! 又可免失圖! ❤。(◕‿-。)

語法 :
<style type="text/css">/*最近的 post、最近回應清單扭改方形、顏色*/
#widget-recentPost .bd ul li, #widget-recentComment .bd ul.force-wrap li{list-style-type:square;color:#f00000;}</style>

另兩種圖形只須修改以上部份語法:
清單扭改圓圈:  
list-style-type:circle;

清單扭改實心圓:  
list-style-type:disc;

***測試、制作及編寫下過心機, 用了時間,
如要引用語法或文章資料請連同我 blog Logo 一併帶走!

19 則留言 :

  1. 這个我一直想知的,一早已見你和其他bloggrs 用了便耐心地等教學推出;這週好忙地学你們blog達人出的各種 css 修改版面教學呢!謝謝你。
    [靚blog園回覆02/03/2012 01:12:48]我尼個語法白痴又來偷師了,多謝賜教\(^。^)/
    [Winsome回覆02/03/2012 00:35:18]這樣便ok了,so happy,謝謝雅姬蘭!呀,限和不限 width, height 就有差別了啊!
    [版主回覆02/02/2012 09:36:03]我原本語法裏面是沒有限 width, height 的, 我寫文時多手加了上去添, 你可以試試:
    .
    #widget-recentPost .bd ul li, #widget-recentComment .bd ul.force-wrap li{list-style-image:url(小圖網址);}
    [Winsome回覆02/02/2012 01:24:34]我放了

    <style type="text/css">/*最近的 post、最近的回應、分類改小圖*/
    #widget-recentPost .bd ul li, #widget-recentComment .bd ul.force-wrap li{list-style-image:url(小圖網址);height:高度數字px;width:濶度數字px;}

    #widget-category .bd ul li.clrfix a .ico{background:url(小圖網址) no-repeat;height:高度數字px;width:濶度數字px;}</style>

    只有分類 能正常地出到圖,而最近的 post、最近的回應 有小圖, 所有字卻向下堆在一起,不知什么原因呢?所以我暫時删了上一段, 只放#widget-category ....
    [版主回覆01/31/2012 21:44:16]咁快來到! ^^ 有時間會寫 css 的啦! 適用就好!

    回覆刪除
  2. 謝謝分享啊! 我支持你的原創, 真的辛苦了你喇! 希望人人都懂得尊重啦!
    [版主回覆02/01/2012 07:55:58]多謝支謝! ( ̄▽ ̄)~*

    回覆刪除
  3. 風信子是不是跟水仙一樣,開了花就不能要了?
    [版主回覆02/01/2012 11:39:24]巳到你 blog 回覆了 ^^

    回覆刪除
  4. 多謝妳的付出,謝謝妳無私的分享!
    [火鳳凰自言自語回覆02/01/2012 20:29:56]蘭花草,我的非常多謝雅姬蘭提點! 我現在賬戶設定選擇了「中國、台灣、星架坡都是GMT+8」,原來和香港時間吻合!也多謝你前幾天的關懷和建議!
    [版主回覆02/01/2012 11:40:28]用到就好了! ^^

    回覆刪除
  5. 火鳳凰自言自語2012年2月1日 下午8:26

    非常多謝你提點! 我現在賬戶設定選擇了「中國、台灣、星架坡都是GMT+8」,原來和香港時間吻合!
    [版主回覆02/01/2012 21:31:18]適用就好! ^^ 我自己都不時檢查架!

    回覆刪除
  6. 好開心,又有新語法 ,╮( ̄▽ ̄)╭ 吾客氣Lu,謝謝!!!╮(╯3╰)╭
    [版主回覆02/03/2012 10:19:48]好啊! ^^

    回覆刪除
  7. 謝謝你的分享,many thanks
    [版主回覆02/03/2012 10:22:25]用到就好了! ^^

    回覆刪除
  8. 妳好叻呀, 謝謝分享
    [版主回覆02/03/2012 21:03:23]用到就好 ^^

    回覆刪除
  9. 晚安!祝您有愉快週末!....預祝元宵節快樂!.....妳好叻!....好難學到...
    [版主回覆02/04/2012 14:10:09]元宵快樂! ❤。(◕‿-。) 祝學習途上愉快!

    回覆刪除
  10. 謝分享 =D
    [版主回覆02/05/2012 01:08:00]咁識講笑! 哈哈 ! 晚安 ^^

    回覆刪除
  11. 朋友:多謝分享,你好勁,好叻.....可加小圖....祝你元宵節愉快!週日愉快!
    [版主回覆02/05/2012 10:38:44]謝謝! 祝你元宵快樂 玩得開心D ❤。(◕‿-。)

    回覆刪除
  12. 祝您元宵節愉快呀!會去賞燈嗎?
    [版主回覆02/05/2012 19:49:55]大家都開開開心心啦! 明晚會吃盆菜 ^^

    回覆刪除
  13. Pandora 香傭講法文2012年2月6日 上午4:10

    叻叻
    [版主回覆02/06/2012 12:06:52]Thanks! ^^

    回覆刪除
  14. ೋღ❤ღೋ...祝元宵節團團圓圓, 開開心心啊!ೋღ❤ღೋ...
    ❤ღೋ...ೋღ❤ღೋ...謝謝分享! ....ೋღ❤ღೋ...ೋღ❤
    [版主回覆02/06/2012 16:44:15]元宵快樂 ღ 影多D靚相呀! ❤。(◕‿-。)

    回覆刪除
  15. O.O??? 點解我E家用google見你(最近的POST)出到小圖,又有標題圖既???❤(✿◠‿◠)
    [版主回覆02/27/2012 12:17:56]用 Chrome 睇劃面原來沒有最近的 post 閃扭位置! 是瀏灠器問, 不是語法問題
    [靚blog園回覆02/08/2012 00:18:28]謝謝啊!再努力試試 V(^.~)V
    [版主回覆02/07/2012 11:29:13]如果你限了 height, width 就很易出問題, 不要加限 ... 找小圖不宜過大, 再試試!

    回覆刪除
  16. 雅姬蘭恭喜發財,身體健康
    哈哈
    有心不會遲,十月都是拜年時
    謝謝你
    [版主回覆02/08/2012 11:22:00]謝謝! 情人節快樂 ^^

    回覆刪除
  17. 感冒多天
    未作回應
    雅姬蘭祈諒
    [版主回覆02/08/2012 11:22:54]我也感冒, 大家都要盡早康復呀!

    回覆刪除
  18. 菁 菁 版 形 教 學 二 * WELCOME 已出版, 好友 請來看看, 比意見, 謝謝
    [版主回覆02/18/2012 12:17:28]http://blog.yimg.com/3/GiZlzJZ7s5.4glvQn8dxELM1Nd.u5h_Lv2yecogS7gIj8GPkJUO32Q--/78/l/zoDjhlw4MN_nVeL3UKZeaQ.jpg
    [版主回覆02/18/2012 10:16:20]早晨! 有關清除格線出了新文, 過來看啊! ^^
    [.回覆02/09/2012 16:13:28]如何清除格線呀?
    [版主回覆02/09/2012 15:30:01]看過了! 幾靚 ... 清除格線更好! ^^

    回覆刪除
  19. 謝謝教學.取用了
    [版主回覆03/23/2012 00:37:38]好啊! 晚安 ^^

    回覆刪除