Plurk的官方版widget無法修改logo,導致許多人CSS改了老半天,把所有的顏色都和blog調到一致了,最後卻和這顆火腿不搭:另外原始版本還有SMALL模式顯示亂掉、interval功能在IE下不會動的問題。因此我花了一點時間把程式簡化,拿掉不需要的部份,調整了參數傳入方式並加上注解。有興趣的人可以把底下整段復制走,修改必要的參數與色彩後,加進Blogger裡。(別家的部落格我沒測過,請自行實驗,能用就算賺到)修改重點:
有加「/**/」附注的行,是較有機會改動的地方。CSS中的background可以選擇用顏色或底圖,我放了范例,但最後記得留下一筆就好。JavaScript裡面有一排連續的「PWARG_xxx」是參數設定,大部份和原本的名稱一樣。PWARG_USERID:請參考Plurk畫面右下方「Share your plurk page with friends:」的格子裡,「from_uid=」接著一串數字,把它填進去。當然如果你暗戀我的話,不改也沒關系。PWARG_WIDGETLOGO:請自行制作適當大小的logo,並同時調整CSS中的圖寬。完整程式碼:style type="text/css".plurk-widget{font:11px'Lucida Grande','Lucida Sans Unicode','Lucida Sans Regular',Tahoma,Verdana,sans-serif;background:#cf682f;/*主版底色*//*background:url('主版底圖*/padding:4px;border:1px solid#a14a19;/*主版外框*/max-width:300px;width:auto;/*Widget寬度*/position:relative;padding-top:40px;color:black;/*文字顏色*/text-align:left;padding-bottom:0;}.plurk-widget a{color:#126cb8!important;/*鏈結,包括個人昵稱與回應*/padding:0!important;border:none!important;background:none;text-decoration:underline;}.plurk-widget img{border:none!important;}.plurk-widget a:hover{text-decoration:underline!important;}.plurk-widget.plurk-logo{display:block;padding:0;margin:0 6px 8px 0;width:40px;/*logo寬度*/position:absolute;right:0;top:4px;height:31px;padding:0!important;}.plurk-widget.plurk-timeline{clear:both;overflow-x:hidden;overflow-y:scroll;background:#cae7fd;/*時間軸底色*//*background:url('時間軸底圖*/word-wrap:break-word;border:1px solid#99705f;/*時間軸外框*/padding:3px 8px;}.plurk-widget.plurk-nickname{color:black;text-decoration:none;font-weight:bold;}.plurk-widget.plurk-message{background:url(plurk-widget-separator.gif)repeat-x left bottom;padding:6px 010px 0;margin:0 04px 0;}.plurk-widget.plurk-meta{font-size:0.9em;text-align:right;color:#578ebd;/*留言時間文字顏色*/padding-top:2px;}.plurk-widget.plurk-qualifier{border-right:1px solid#333;border-bottom:1px solid#333;}.plurk-widget.plurk-empty{margin:5px 00 0;padding:10px;background-color:#F0F8FF;color:#4c8cc2;text-align:center;border:1px solid#4c8cc2;}.plurk-widget.plurk-empty strong{font-weight:bold;color:black;display:block;}.plurk-widget.call-action{font-size:0.9em;color:#fadfd0;padding:10px 05px 0;}.plurk-widget.call-action a{color:#5a3f30!important;/*最底下的廣告鏈結文字顏色*/text-decoration:underline;font-weight:normal;}/style script id="PlurkWidgetScript"type="text/javascript"/**Plurk Widget*--**Supported parameters:**-PWARG_USERID the user_id whose plurks we want to display*-PWARG_HEIGHT the height in pixels(has no effect if CSS is disabled)*-PWARG_NOCSS set to"true"if you don't want any CSS applied*-PWARG_INTERVAL the reloading interval in seconds*(30 per default,0 for no reloading at all.)*-PWARG_CHUNK the number of plurks in the widget*-PWARG_WIDGETLOGO the logo we want to display**If you are an advanced user and want to style the widget with custom CSS,*here are the classes the widget uses:**plurk-widget the overall div that wraps the widget*plurk-logo adiv that is usually used to display the logo*plurk-timeline the div containing the messages on the timeline*plurk-loading-pane adiv that is displayed while data is retrieved*plurk-message adiv that contains the message of auser*plurk-n ickname alink to the users's profile*plurk-qualifier the span for the qualifier*plurk-qualifier-x the span for the qualifier x(x==says,thinks etc)**For further information,you can reference the css file at***(c)Copyright 2008 by Galt Networks.**Permission is hereby granted,free of charge,to any person obtaining a*copy of this software and associated documentation files(the"Software"),*to deal in the Software without restriction,including without limitation*the rights to use,copy,modify,merge,publish,distribute,sublicense,*and/or sell copies of the Software,and to permit persons to whom the*Software is furnished to do so,subject to the following conditions:**The above copyright notice and this permission notice shall be included*in all copies or substantial portions of the Software.**THE SOFTWARE IS PROVIDED"AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS OR*IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,*FITNESS FOR APARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE*AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER*LIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING*FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER*DEALINGS IN THE SOFTWARE.**--*Original version of this script:***Modified by Sorry(*Version 0.3*2008/6/25*/;(function(){//globals and constants var PWARG_SERVERURL='PWARG_USERID=1418700,/*from_uid=xxxxxxx*/PWARG_HEIGHT=300,/*Widget高度*/PWARG_NOCSS='true',PWARG_INTERVAL=0,PWARG_CHUNK=10,PWARG_WIDGETLOGO='/*上方的logo*/QUALIFIER_COLORS={is:'#e57c43',says:'#E2560B',feels:'#2D83BE',thinks:'#689CC1',wants:'#8DB241',wishes:'#5BB017',has:'#7A9A37',loves:'#B20C0C',hates:'#111111',asks:'#8361bc',will:'#B46DB9',was:'#525252',had:'#8C8C8C',likes:'#CB2728',shares:'#A74949',gives:'#620E0E'},TIME_UNITS=[[60*60*24*30,'month'],[60*60*24*7,'week'],[60*60*24,'day'],[60*60,'hour'],[60,'minute']],widget,lastRequest,fish,timeline,options;//general purpose helpers function each(s,f){if(!s)return;var r;if(s.length!==undefined)for(var x=0,y=s.length;x y;++x){if(typeof(r=f.call(s[x],x))!=='undefined')return r;}else for(var kin s)if(typeof(r=f.call(this,k,s[k]))!=='undefined')return r;}//formatting function timedelta(d){var delta=((new Date()).getTime()-d.getTime())/1000,value;return each(TIME_UNITS,function(){if((value=Math.floor(delta/this[0]))0)return value+''+this[1]+(value!=1?'s':'');})||'0 minutes';}//DOM function$fnGetElmt(n){return document.getElementsByTagName(n)[0];}function$fnCreateElmt(n,a){var rv=document.createElement(n);each(a,function(k,v){rv.setAttribute(k,v);});return rv;}function$$fnAppendElmt(p,n,a){return p.appendChild($fnCreateElmt(n,a));}function$fnAppendText(n,t){n.appendChild(document.createTextNode(t));return n;}function$fnAppendHtml(n,h){var t=$$fnAppendElmt(n,'span');t.innerHTML=h;return n;}//CSS function css(n,a,c){each(a,function(k,v){n.style[k]=v;});if(c)n.className=c;return n;}function hide(e){e.style.display='none';return e;}function show(e){e.style.display='';return e;}//communication system if(!this.$__plurkWidgetReceiveData){$__plurkWidgetReceivers=;$__plurkWidgetReceiveData=function(data){$__plurkWidgetReceivers[data.receiverID](data);}}var receiverID=$__plurkWidgetReceivers.length;$__plurkWidgetReceivers.push(function(data){lastRequest.parentNode.removeChild(lastRequest);if(data.plurks)updatePlurks(data.plurks,data.private);lastRequest=null;});//widget code function initializeWidget(){if(PWARG_NOCSS!=='true')$$fnAppendElmt($fnGetElmt('head'),'link',{href:PWARG_SERVERURL+'/static/widget/widget.css',rel:'stylesheet',type:'text/css'});css(widget,{visibility:'hidden'});var logo=css($$fnAppendElmt(widget,'a',{href:PWARG_SERVERURL+'/redeemByWidget?from_uid='+PWARG_USERID}),{background:'url('+PWARG_WIDGETLOGO+')no-repeat 00'},'plurk-logo');timeline=css($$fnAppendElmt(widget,'div'),{height:(PWARG_HEIGHT||300)+'px'},'plurk-timeline');fish=css($$fnAppendElmt(timeline,'div'),{background:'url('+PWARG_SERVERURL+'/static/loading.gif)no-repeat center center',height:'90px'},'plurk-loading-pane'),callLink=$$fnAppendElmt(widget,'div'),callLink.innerHTML='a href="'+PWARG_SERVERURL+'/redeemByWidget?from_uid='+PWARG_USERID+'"一起來體驗Plurk吧/a',callTo=css(callLink,null,'call-action');requestPlurks();if(PWARG_INTERVAL&&PWARG_INTERVAL!=='0')setInterval(requestPlurks,(parseInt(PWARG_INTERVAL,10)||30)*1000);}function requestPlurks(){if(lastRequest)return;hide(fish);lastRequest=$$fnAppendElmt($fnGetElmt('head'),'script',{type:'text/javascript',src:PWARG_SERVERURL+'/API/Widget.getUserPlurks?'+'user_id='+PWARG_USERID+'&receiver_id='+receiverID+'&per_chunk='+PWARG_CHUNK});}function updatePlurks(plurks,is_private){timeline.innerHTML='';timeline.appendChild(show(fish));if(plurks.length)each(plurks,function(idx){var plurk=css($$fnAppendElmt(timeline,'div'),null,'plurk-message');$fnAppendText(css($$fnAppendElmt(plurk,'a',{href:PWARG_SERVERURL+'/user/'+this.username}),null,'plurk-nickname'),this.username);if(this.qualifier!=':'){$fnAppendHtml(plurk,'');var shade=QUALIFIER_COLORS[this.en_qualifier];$fnAppendText(css($$fnAppendElmt(plurk,'span'),{backgroundColor:shade,padding:'0 3px 03px',color:'white'},'plurk-qualifier plurk-qualifier-'+this.en_qualifier),this.qualifier),plurk教學;}$fnAppendHtml(plurk,''+this.content);$fnAppendText($$fnAppendElmt($fnAppendText(css($$fnAppendElmt(plurk,'div'),null,'plurk-meta'),timedelta(this.pub_date)+'ago|'),'a',{href:PWARG_SERVERURL+'/p/'+(this.id).toString(36),target:'_blank'}),this.responses==1?'1 response':this.responses+'responses');});else{var empty=css($$fnAppendElmt(timeline,'div'),null,'plurk-empty');$fnAppendText($$fnAppendElmt(empty,'strong'),'Ouch.');$fnAppendText(empty,is_private?'抱歉,你設定了private屬性,別人不能讀取你的plurk.這個widget沒有東西可以顯示.':'你沒有plurk可以顯示.先去寫個幾句吧:).');}hide(fish);css(widget,{visibility:'visible'});}//widget setup widget=css($fnCreateElmt('div'),null,'plurk-widget');var options=document.getElementById('PlurkWidgetScript');options.parentNode.replaceChild(widget,options);initializeWidget();})();/script最後,不管你改爛了什麼,都不要來找我。我一概不負責任。