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;} /* 字體大小
:(
;)
:D
:-/
:x
:P
:-*
=((
:-O
X(
:7
B-)
#:-S
:((
:))
=))
:-B
:-c
:)]
~X(
:-h
I-)
=D7
@-)
:-w
7:P
2):)
:!!
\m/
:-q
:-bd
^#(^
