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

3-Nov-2013 更新版本到 2.0

建立使用新版本
http://freetongdiy.blogspot.hk/2013/11/v2.html

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

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

有沒有留意到這個網誌的右下角, 多了一個 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;}           /* 字體大小