2012年2月26日 星期日

回應箱背景加圖, 字體變大 D! 私人回應及 smiley 語法


喜歡原創 不隨波遂流!

如有引用請用原文! 

一直用 FF 看 blog, 覺得字體大小還可以, 一天用 IE 去看, 覺得字體比較相對的細小 ! 因此造了這篇文! 想快些美化用上!

今次說的是回應箱, 就是個別回應第一位發言的人所用範圍!分有底部的灰色部份, 和輸入文字的白色部份!

1.現有兩欄式和三欄式型版, 在灰色部份用了 比例 percentage (%) 的語法配合兩者位置, 向右移 85%, 設定適合高度, 添上透明背景的漂亮花朵! 加了框線!

2.在白色部份放了一對活潑的小鳥, 真係有少少鐘意咗佢 ! 字體大小為 18px




語法:

<style>/*回應箱灰色部份*/
#comment-form-wrapper #comment-form{background:url(http://dl4.glitter-graphics.net/pub/1061/1061544ukscav2st2.gif) 85% top no-repeat;height:155px;border:1px dashed hotpink;}

/*回應箱白色輸入部份*/
#ygubcmt .fields .textarea{background:url(http://dl4.glitter-graphics.net/pub/667/667564dbjv00mrz0.gif) center bottom no-repeat;color:purple;font-size:18px;border-width:0px;}</style>
*      *      *

3.私人回應可改變字色配襯版面, 有時某些原因不想有私人回應將之關上:

語法:  


<style>/*私人回應字色*/
.set-private label{color:purple;}</style>


<style>/*關上私人回應*/
.set-private{display:none;}</style>

*      *      *

4.新增的心情圖項目 smiley 令人階大歡喜, 又可換上悅目的小圖:

語法:  

<style>/*心情圖 smiley 換小圖*/
.emoticon{background:url(http://i84.photobucket.com/albums/k24/Ksnaz/BumbleBee.gif) center no-repeat;}

/*指着心情圖 smiley 換小圖*/
.emoticon:hover{background:url(http://dl10.glitter-graphics.net/pub/1399/1399290k3ph8mwn9x.gif) center no-repeat;}</style>

*      *      *

有沒發覺要選心情圖時按 smiley 又得, 按下箭咀又得呢!? 好像有點混淆! 想將之珊去呢!

語法:

<style>/*刪除 smiley 旁箭咀*/
.emoticon-toggle{display:none;}</style>

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


示範動圖引用自網絡, 為免失鏈 請上傳到你個人上載空間!

21 則留言 :

  1. 好靚!謝謝分享!要慢慢試,,,,我不會...
    [版主回覆02/26/2012 19:04:53]一定要試呀

    回覆刪除
  2. 謝分享!
    [版主回覆02/26/2012 19:05:48]客氣了! 你篇透視也很好

    回覆刪除
  3. Pandora 香傭講法文2012年2月26日 下午5:38

    嘩, 好靚呀個回應位^^
    [版主回覆02/26/2012 19:06:54]你都將D字放大D啦! 易看些

    回覆刪除
  4. 謝謝分享!我把它存檔了,有空再做,晚安啦!
    [版主回覆02/27/2012 10:37:21]好啊! 慢慢試!

    回覆刪除
  5. 好可愛ge回應欄...謝謝分享...怕洩露內文唯有好似我咁....千篇一律放一段廢話在文章前囉!....哈!哈!...好多人都問我做咩有段廢話的...
    [版主回覆02/27/2012 10:40:51]回應美化一下活潑多了 前言可保障自己做得好!

    回覆刪除
  6. 晚安Akina!
    [版主回覆02/28/2012 08:50:36]早晨, 天氣涼, 記得保暖 ^^

    回覆刪除
  7. 唔嚟睇真係蝕咗,咁得意好玩,好彩你提我咋,感激!我有諗過將 smiley 改圖和删除个箭咀,而家唔駛自己諗和試喇,唔係会諗到下个月都未做到,多謝雅姬蘭分享教学!我這要找素材加入回應欄先,你嗰兩隻雀仔好可愛,但我要揾貓貓狗狗或靚女.... 哈哈
    [Winsome回覆03/02/2012 00:26:40]Hover 圖,我後來改用20px 左右的圖就出到了,之前用50px 就出不到。你見到我smiley 箭咀沒有了,但我仍見到,要登出看看先。Thanks!
    [版主回覆03/01/2012 23:41:26]我見到你的 smiley hover 由粉紅皇冠變了十字頭皇冠, 箭咀也沒有了呀!
    [版主回覆03/01/2012 23:33:10]hover smiley 圖我都覺得得比較慢, 有時指第2 次才見到的!
    .
    箭頭你試用尼句 .fields .emoticon-toggle{display:none;} 在我的面前的劃面是有效的, 其實我都擔心瀏灠器的字型識別會搞錯 試過由 FF Chrome 之間由 C 變 G 再變 S, 令語法亂了, 這該是關電腦裏缺了某種字元(字體)的事, 跟語法無關, 要問電腦店怎補救了!
    .
    若用以上 .fields ... 語法回應箱是 OK 的, 回覆箱要再研究!
    [Winsome回覆03/01/2012 23:19:46]其他的css試了好几次都成功了,但smiley 旁箭咀删除不到,請問何解呢?
    [版主回覆03/01/2012 10:54:58]有新語法希大家都收到! 到來給我打打氣, 我是很高興的

    回覆刪除
  8. 好靚呀,我先收起在word 慢慢試玩,免被人盗用。好特別的回應箱,如要我諗,一定變白髮魔女。多謝雅姬蘭。
    [版主回覆03/01/2012 18:15:26]客氣了! Word 多了很多功能, 可以試圖真新鮮! 文章我打算今晚公開了!

    回覆刪除
  9. 真係靚絕,好開心,從來無諗過可以整得那麼漂亮
    [版主回覆03/01/2012 18:18:50]謝謝! 回應交流是開開心心的呀!

    回覆刪除
  10. 好靚!回應欄有圖片!
    [KamKam回覆03/09/2012 13:39:14]我正式引用了..謝謝無私的教學....令新BLOG靚好多....但我要慢慢消化..我想用其他圖片做....我也是秋金....這blog轉載老師教學篇...謝謝妳的指導!
    [版主回覆03/01/2012 23:38:38]你回應算都快變靚靚啦!

    回覆刪除
  11. 你公開了,我便正式引用喇
    [版主回覆03/02/2012 10:15:26]好啊! 下次早些進場啊!

    回覆刪除
  12. Hi 支持原創,引用了^^
    [版主回覆03/02/2012 10:16:35]早晨, 多謝支持!

    回覆刪除
  13. 仲諗住担定櫈仔Tim
    點知行得魔,冇鼻哥
    [Sarah回覆03/06/2012 13:06:20](行得魔,冇鼻哥)我明,咁我地係同輩
    [靚blog園回覆03/03/2012 11:47:23]Winsome,你地D後生仔吾識尼D老句子(行得魔,冇鼻哥)
    得閒講多D老句子比你睇
    [Winsome回覆03/03/2012 04:05:07]Amy, 你句"點知行得魔,冇鼻哥" 笑S我喇!

    雅姬蘭,我哋有好多語法等你出,你加油呀!
    [靚blog園回覆03/03/2012 02:23:23]我仲想要網誌與網誌之間的分隔線,回應欄(回覆)個按鈕可以有公仔
    拜托晒
    [Sarah回覆03/03/2012 00:12:05]【回應欄頂個回應圖】,我都等緊....仲等到頸都長米。
    [版主回覆03/02/2012 17:24:57]現在的回應欄可拉開的, 要加頂圖諗在灰色背景置頂加圖囉!
    .
    我就未有研究, 但見思璃整過 ..
    [靚blog園回覆03/02/2012 16:41:58]我愛回應欄
    幾時整番個回應欄頂個回應圖

    回覆刪除
  14. 土耳其他他 - TATA2012年3月2日 下午9:05

    Thanks!
    [版主回覆03/02/2012 21:48:37]客氣了! 週未愉快!

    回覆刪除
  15. 午安呀.... 雅姬蘭, .... 嘩...又有新野玩, 好野.... 等我試吓整整先.... 好叻叻呀你..... 成日諗到咁多咁正既語法....... ( 汀汀: 祝你.... 週末愉快先.....)
    [Christine回覆03/03/2012 14:39:56]好的, 謝謝雅姬蘭.....!!!
    [版主回覆03/03/2012 14:33:41]客氣了, 週未愉快! 每部電腦的快慢表現不同, 現時都是發表研究到的語法, 沒時間去答個別效果, 見諒!
    [Christine回覆03/03/2012 14:26:31]岩岩試左了, 得左啦....好 yeah..!!!! ( 另外, 我想問問, 因為有些 blog 友反應話, 未必即時可以睇到呢個係回應欄喎, .... 如果我想在左上角 (自己頭像側, 加設 : ** 留下回應 ** 這些字句, 可唔可以呢?? 應該點做呢..... 請雅姬蘭賜教我吧.....thank you......)

    回覆刪除
  16. 非常多謝你跟我們分享你美化卜的語法,令我們都有一個精美部落。再次感激你無私的精神。謝謝!我引用啦!
    [版主回覆03/03/2012 21:06:06]用美美的網誌有助心情靚D! ^^ 週未愉快

    回覆刪除
  17. 我整左回應欄了
    謝謝伱的語法
    [靚blog園回覆03/07/2012 22:53:59]FF睇我D文章得一半咋
    最好用google,不過头像下方格底圖出吾到
    我以為自已有問題,原來係瀏覧器有問題
    [版主回覆03/07/2012 18:11:33]覺得 ie load 得比較慢, 有時有些東西 load 不到, 在論壇都不少人講, 都改用 FF 一段日子了!
    [靚blog園回覆03/07/2012 17:16:58]吾知點解用ie睇,標題圖吾會郁
    [靚blog園回覆03/07/2012 17:11:11]雅姬蘭我的標題圖得左
    多謝!!!╮(╯3╰)╭
    [Sarah回覆03/06/2012 13:03:47]我都係咁話,師父等緊你D版。
    [版主回覆03/06/2012 10:47:47]客氣了! 你快 D 出新版啦!

    回覆刪除
  18. 雅姬蘭朋友:多謝你無私的教學....令新BLOG增色不少...THX
    為什麼我引用的文章出不到你的LOGO?
    [版主回覆03/08/2012 11:52:42]引用我文慣例是要帶 Logo, 側欄貼 logo 的語法是這樣: <a href="http://blog.yahoo.com/iakina"><img src="http://i642.photobucket.com/albums/uu147/toast1_big/blogpho/logoFloral.gif"></a>
    .
    側欄貼 logo 是網友自發性的, 方便找到這裏!
    [V V回覆03/07/2012 22:06:50]雅姬蘭朋友:你好!請來我BLOG看看....在老師欄.....仍然出不到你LOGO的圖像......我是用IE瀏覽器.....希賜教
    [版主回覆03/07/2012 08:47:45]早晨, 謝謝正確引用! 這是我 logo 的網址: http://i642.photobucket.com/albums/uu147/toast1_big/blogpho/logoFloral.gif
    .
    我見到你引用的文章沒有我 logo 連結所以出不到圖 ... 可能是複制時的小問題吧!

    回覆刪除
  19. 你好,取用了,換小圖,謝謝!
    [版主回覆03/13/2012 20:57:29]客氣了, 晚上好 !

    回覆刪除
  20. 想不到新YAHOO BLOG可以美化得咁靚呢>_<但唔知點解有D語法我用唔到:(
    [版主回覆03/31/2012 19:34:44]還會變得更靚呀! 寫語法的不只我一人, 如果有巳有相關語法, 可能撞了! 把之刪除再貼上即可!

    回覆刪除
  21. 先謝謝你的教導。
    我已做了語法設置箱,到確定之後,因為回應欄不是拖到旁邊的自定欄位去的,那麼應該怎辦?
    麻煩你賜教。
    [版主回覆06/18/2012 22:57:53]把輸入了語法的欄位, 拖到側欄應用, 按儲存, 語法便會生效, 回到版面就見到了! 晚安!

    回覆刪除