分析/解释 | 扩展式(显示头像的最新评论)

弄了差不多4小时，终于弄好啦((感动、满意的心情最棒TUT

如下图(注：图里的是我另个私人日记Blog><)：

--------------------------------------------------------------
代码特长以及几乎都可以随心所欲去更改你要的样子哦。
颜色代码参考：http://html-color-codes.info/


代码分析/解释在这里哦。↓

<style>
#tab1 {
background-color:#ffffff; /* 背景颜色 */
border-bottom:1px solid #999999; /* 下面的格子线 */
border-top:0px solid #999999; /* 上面的格子线 */
border-left:1px solid #999999; /* 左边的格子线 */
border-right:1px solid #999999;/* 右边的格子线 */
width:15px; /* 扩展前的宽度 */
height:7px; /* 扩展前的高度 */
font-size:11px; /* 字体大小 */
font-family: '微軟正黑體'; /* 字体 */
color: #808080; /* 字体颜色 */
border-radius:0px 0px 0px 0px;/* 格子四边的弧度 */
-moz-border-radius:0px 0px 0px 0px;/* 面积四边的弧度 */
position:fixed;/* 位置固定或跟随 */
overflow:hidden;/* 滚动条-隐藏 */
top:0px;/* 位置(离上面有多远 可改去下面) */
right:10px;/* 位置(离右边有多远 可改去左边) */
z-index:999999999;
padding:9px;/* 与边缘的距离 */
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;}
#tab1icon{
font-size:16px; /* 符号文字的大小 */
color:#808080; /* 符号文字的颜色 */
margin-top:-6px;/* 符号要在格子里离上去多少 */
margin-right:0px;/* 符号要在格子里离右边多少 */
text-align:left;/* 文字靠左边 */
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;}
#tab1:hover{
width:270px; /* 扩展后的宽度 */
height:210px; /* 扩展后的高度 */
border-radius:1px 1px 1px 1px;/* 格子弧度 */
-moz-border-radius:1px 1px 1px 1px;/* 支撑度 */
opacity:0.95}
</style>
<div id="tab1"><center>
<div id="tab1icon">✉</div><br />/* 符号 */
<style type="text/css">
ul.helploggercomments/* 整体 */{list-style: none/* 菜单风格 */;margin: 0/* 调上下左右 */;padding: 0/* 离边缘的距离 */;}
.helploggercomments li /* 评论者名字 */{background: none !important;margin: 0 0 6px !important;padding: 0 0 6px 0 !important;display: block;clear: both;overflow: auto;list-style: none;word-break:break-all;text-align:left/* 字体靠左边 */;}
.helploggercomments li .avatarImage/* 评论者头像设定 */ {padding: 3px;/* 与边缘的距离 */
background: #fefefe/* 背景颜色 */;border:1px solid #999/* 格子边边的粗度 形式 颜色 */;float: left/* 靠哪里浮动 */;margin: 0 6px 0 0;position: relative/* 位置 */;overflow: auto;/* 滚动条 */}
.avatarRound {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}/* 评论者头像形状 */
.helploggercomments li img {padding: 0px;position: relative;overflow: auto;display: block;}
.helploggercomments li span/* 评论 */ {margin-top: 2px;color: #666;display: block;font-size: 11px;font-style:normal;line-height: 1.3;text-align:left;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var numComments  = 3,/* 多少条评论 */
showAvatar  = true,/* 评论者头像是否显示 */
avatarSize  = 42,/* 评论者头像大小 */
roundAvatar =true,/* 评论者头像是否圆形 false:正方形 */
characters  = 30,/* 评论字数限制 */
showMorelink = false,
moreLinktext = "More »",
defaultAvatar  = "http://tupian.aladd.net/2015/10/2356.jpg",/* 评论者默认头像 */
hideCredits = true;/* 是否显示来源 */
//]]>
</script>
<script type="text/javascript">
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('7 E=E||5,8=8||12,o=o||13,k=k||"h://4.F.p.f/-14/15/16/17/G/18-19.1a",H=H||" 1b &1c;",q=(r q===\'u\')?j:q,v=(r v===\'u\')?Q:v,m=(r m===\'u\')?j:m,I=(r I===\'u\')?Q:m;1d R(w){7 9;9=\'<S J="R">\';K(7 i=0;i<E;i++){7 x,y,3,n;6(i==w.T.b.z)1e;9+="<U>";7 b=w.T.b[i];K(7 l=0;l<b.L.z;l++){6(b.L[l].1f==\'1g\'){x=b.L[l].A}}K(7 a=0;a<b.M.z;a++){y=b.M[a].1h.$t;3=b.M[a].1i$1j.V}6(3.g("/G/")!=-1){3=3.B("/G/","/s"+8+"-c/")}e 6(3.g("/W/")!=-1){3=3.B("/W/","/s"+8+"-c/")}e 6(3.g("/X-c/")!=-1&&3.g("h:")!=0){3="h:"+3.B("/X-c/","/s"+8+"-c/")}e 6(3.g("N.f/C/1k-Y.O")!=-1){3="h://1.F.p.f/-1l/1m/1n/1o/s"+8+"/1p.Z"}e 6(3.g("N.f/C/1q-Y.O")!=-1){3="h://2.F.p.f/-1r/1s/1t/1u/s"+8+"/1v.Z"}e 6(3.g("N.f/C/1w.O")!=-1){6(k.g("1x.f")!=-1){3=k+"&s="+8}e{3=k}}e{3=3}6(q==j){6(m==j){n="1y"}e{n=""}9+="<10 J=\\"1z "+n+"\\"><C J=\\""+n+"\\" V=\\""+3+"\\" 1A=\\""+y+"\\" 1B=\\""+8+"\\" 1C=\\""+8+"\\"/></10>"}9+="<a A=\\""+x+"\\">"+y+"</a>";7 11=b.1D.$t;7 d=11.B(/(<([^>]+)>)/1E,"");6(d!=""&&d.z>o){d=d.1F(0,o);d+="&1G;";6(v==j){d+="<a A=\\""+x+"\\">"+H+"</a>"}}e{d=d}9+="<D>"+d+"</D>";9+="</U>"}9+=\'</S>\';7 P="";6(I==j){P="1H:1I;"}9+="<D 1J=\\"1K-1L:1M;1N:1O;1P-1Q:1R;"+P+"\\">1S 1T<a A=\\"h://w.p.f/\\"> 1U</a></D>";1V.1W(9)}',62,121,'|||authorAvatar|||if|var|avatarSize|commentsHtml||entry||commBody|else|com|indexOf|http||true|defaultAvatar||roundAvatar|avatarClass|characters|blogspot|showAvatar|typeof|||undefined|showMorelink|helplogger|commentlink|authorName|length|href|replace|img|span|numComments|bp|s1600|moreLinktext|hideCredits|class|for|link|author|blogblog|gif|hideCSS|false|helploggercomments|ul|feed|li|src|s220|s512|rounded|png|div|commHTML|60|40|SRSVCXNxbAc|UrbxxXd06YI|AAAAAAAAFl4|332qncR9pD4|default|avatar|jpg|More|raquo|function|break|rel|alternate|name|gd|image|b16|7bkcAKdpGXI|UrbyQRqvSKI|AAAAAAAAFmI|oBv_yMeYnMQ|blogger|openid16|VgnInuIUKBU|UrbzyXTYWRI|AAAAAAAAFmU|3f_Vfj3TI6A|openid|blank|gravatar|avatarRound|avatarImage|alt|width|height|content|ig|substring|hellip|visibility|hidden|style|font|size|10px|display|block|text|align|right|Widget|by|Helplogger|document|write'.split('|'),0,{}))
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script><div style="font-size: 10px; float: right;  margin-top: -15px;"></div>
</a>
</span>
</div>
</div>

 好累，去睡哩 有 人 需 要 才 继 续 更 新 ，体 谅 ❤ 


[ 更 新 了 哦 ，请 到 M E N U > > 教 程  查 找。]