網頁

2013年10月16日

|

留言"表情符號"浮動列表 (簡易安裝版)

Views:
3-Nov-2013 更新版本到 2.0

之前的一篇網誌 "留言加添"表情符號" (簡易安裝版)", 可以用一個轉接手法,
把留言加上及顯示"表情符號".

它需要用"代碼"方式輸入, 操作上還好, 可是你記得全部"代碼"嗎 ?

有沒有留意到這個網誌的右下角, 多了一個 thumbs up 的公仔頭,
點它一下, 便會彈出一個, 可供參照的"表情符號"浮動列表.

安裝上也是 (最簡單版本) 方式, 可以回看 "留言加添"表情符號" (簡易安裝版)" 的方法.

只要把下面 code 全部複製到 HTML/Javascript 小工具的內容裡, 無需在"標題"加入文字.
按下[儲存], 重新啟用網誌即可.
<!-- CSS 定義 menubox V1.1 -->
<style type="text/css">

div.menubox {position:fixed; background-color:#ebebeb; border:1px solid #cccccc ;width:210px;z-index:2; right:0px; bottom:0px; color:#0000ff}

div.menubox p {display:block;margin:5px;color:#000000;font-size:14px;font-weight: bolder;}

div.menubox table {display:block;margin:5px;color:#000000;font-size:12px;}

</style>

<div class="menubox">
<!-- 點擊式開關 -->
<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'  onclick="document.getElementById('a1').style.display=(document.getElementById('a1').style.display=='none'?'':'none');" /> 按我開關 (表情符號列表)
<!-- 表情符號內容列表 -->
<div id="a1" style="display:none">
<p>留言時請用符號"代碼"輸入;<br/>發佈時; 留言內文自動顯示.<br/></p>
<table>
<tr>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :) </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :( </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;) </td>
</tr>
<tr>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/ </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x </td>
</tr>
<tr>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-* </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =(( </td>
</tr>
<tr>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X( </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7 </td>
</tr>
<tr>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-) </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :(( </td>
</tr>
<tr>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :)) </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =)) </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B </td>
</tr>
<tr>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)] </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X( </td>
</tr>
<tr>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-) </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7 </td>
</tr>
<tr>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-) </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P </td>
</tr>
<tr>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):) </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!! </td>
</tr>
<tr>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/ </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd </td>
 <td><img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^ </td>
</tr>
</table>
<!-- Yahoo emoticons 網址連結 -->
<center><a href="http://messenger.yahoo.com/features/emoticons/"target="_blank" >Yahoo emoticons</a></center>
</div> 
</div>

整個"表情符號"浮動列表的外觀, 由開首的三句 CSS 程式碼主管.
可以自行修改當中的數值, 以配合 Blogger 的色彩要求.
它所使用的 color 數值是十六進制(HEX) 由 0~9, A~F
一個工具, 方法換算.  16 進制(HEX) 色彩對換工具 網址連結

補充說明: 浮動列表是名為 menubox 的區塊, 各項定義的參數值可以自行修改.
這裡我用了 right+bottom (右下), 也可以用 left+top ( 左上); left+bottom; right+top ...
再加上 px 的點距, 那麼你可以把它定位在任何位置上.
div.menubox {                  /* 建立 menubox 物件
    position:fixed;            /* 位置是固定
    background-color:#ebebeb;  /* 背景色彩(16進制)
    border:1px solid #cccccc;  /* 邊框闊度 色彩(16進制)
    width:210px;               /* 闊度
    z-index:2;                 /* 圖層堆疊層次(2是相容Chrome & IE)
    right:0px;                 /* 右邊距離 (左邊距離 5px = left:5px)
    bottom:0px;                /* 底邊距離 (頂端距離 5px = top:5px)
    color:#0000FF}             /* 字體色彩(16進制)

補充說明:  menubox 裡頭 <p>...</p> 文字定義的參數值, 可以自行修改.
div.menubox p {                /* menubox 之下 <p> 物件
    display:block;             /* 區塊顯示模式
    margin:5px;                /* 邊界
    color:#000000;             /* 字體色彩(16進制)
    font-size:14px;            /* 字體大小
    font-weight: bolder;}      /* 字體屬性 bolder=粗體

補充說明:  menubox 裡頭 <table>...</tablep> 文字定義的參數值, 可以自行修改.
div.menubox table {            /* menubox 之下 <table> 物件
    display:block;             /* 區塊顯示模式
    margin:5px;                /* 邊界
    color:#000000;             /* 字體色彩(16進制)
    font-size:12px;}           /* 字體大小

18 則留言:

  1. 幾好喎,....不過會唔會 Yahoo 摺埋個時會無咗呢D Emotion Icon 架 ?

    回覆刪除
    回覆
    1. 應該唔會喇, 我估 :D
      佢用喺 Yahoo Messenger 的 ;)

      刪除
    2. 只要把下面 code 全部複製到 HTML/Javascript 小工具的內容裡, 無需在"標題"加入文字.
      按下[儲存], 重新啟用網誌即可. <-- 我整完呢個之後會多咗一個無名嘅欄係到,但係我又唔見你有喎,點set嘅呢 ?
      你去我個blog,左上角就會見到

      刪除
    3. 我到你的 blog 睇過, 左上角唔覺有乜特別.
      詳細形容一下. :-/

      刪除
    4. 網誌裡多加一些參數值說明, 可以自行修改, 以配合 Blogspot 不同的範本色彩.

      再細看你所講的現象, 應該是"登入"了 blogspot.
      而且這次的特效小工具是不會有任何顯示 (已定位到右下角),
      又不用寫上"標題" (就是使這個小工具的名稱也不顯示),
      結果多了一個無名稱的欄在你的介面上.
      "登出"後應該看不見了. 所以你看我的 blog 是沒有的. :))

      刪除
    5. 就係登出咗都見都有兩個無名稱的欄在介面上...但係我又唔見你有喎...@-)

      刪除
    6. 哦 ! 知道喇 :))
      喺"範本"問題, 我用的那個是"全透明", 所以看不見. B-)
      而你的"不是透明", 更是"黑色"背景. 所以看見了. :D

      刪除
    7. 哦...原來係咁...即係你都有存在嘅,不過就睇唔到.. :7

      刪除
  2. 哈,原來Ben跟你整架,我仲今日自由頭寫咗個添,早知入來睇睇先。:))

    回覆刪除
    回覆
    1. 小小的 CSS 程式碼, :D
      不過, 就測試咗好長時間. :!! 主要都喺排戲問題.
      使用就簡單多 :-bd

      唔見你寫果嗰 :-O 冇放出 :-/

      刪除
    2. 見到啦, 原來要進入單頁先見到. 正 =D7

      刪除
    3. 係呀,因為我加JS越來越多,要分流一下。
      稍後再詳細睇你D大作,非常有趣,因為香港分享Blogger Tips的人,好像比較少。

      刪除
  3. 回覆
    1. 我未放入, 準備跟所有表情符號做一個統一分析 script.

      等一下單個放入試試

      刪除
    2. 唔多得,
      喺唔喺要 jquery 支持 :(

      刪除
    3. 原來我錯了。:)

      再試:
      沖縄那覇
      [img]http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Asahi-machi_Naha_Okinawa01s3s4410.jpg/800px-Asahi-machi_Naha_Okinawa01s3s4410.jpg[/img]

      刪除
    4. ;) 知道點解喇,
      你畀個條 link , 唔喺圖片
      真正應該喺
      http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Asahi-machi_Naha_Okinawa01s3s4410.jpg/640px-Asahi-machi_Naha_Okinawa01s3s4410.jpg

      [img] http://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Asahi-machi_Naha_Okinawa01s3s4410.jpg/640px-Asahi-machi_Naha_Okinawa01s3s4410.jpg [/img]

      刪除
😀

★ 謝謝留言,留下的一句話,已經是很好的推動力 !
★ 勾選右下角的「通知我 」可以由電郵收到留言回覆!
★ 留言與文章無關的主題時,請到頂列「留言版 GuestBook」暢所欲言。
★ 若發佈留言後,留言不見了。可能被系統錯誤判斷為垃圾留言,請不用擔心,我會盡快將留言恢復。
◎ 本留言區已經支援 Unicode Emoji,對應 Win10 的浮動鍵盤。歡迎貼上,增加效果。
◎ 支援 YouTube 超連結對應,支援 jpg , jpeg , gif , png 這4種圖片顯示格式。
◎ 文章介紹 2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃