Esta es laversión2 del fanbox de twitter personalizado que utiliza JQuery y Css , mejorando su aspecto y funcioneshaciéndolomás fácilde instalar y más liviano, pueden ver un ejemplo de ello clic en
Result ▼
InstalaciónPaso 1) Añadir el Script Twitterdirigase a laopciónPlantilla -Editar HTML , realice lacombinaciónde teclas CTRL-F para abrir el buscador y escriba la etiqueta/head una vez encontrada justo arriba de ella pegue el siguientecódigojavascript.
eval(function(p,a,c,k,e,d){e=function(c){return(ca?'':e(parseInt(c/a)))+((c=c%a)35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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(c){c.1b.10=7(l){l=c.2y({},c.1b.10.1J,l);z 21.3m(7(){9 f=[],h=-1,i=-1,e=c(21),g=Q,j=Q,k=Q,a=l,s=7(b){b.13?(f=b.13,0!=f.C&&(!a.2f||2f.C/a.N?f.Ca.N&&(f.C=a.N):(b=1G.2d(f.C/a.N),b=1G.2d(1G.3v()*b),f=f.3s(b*a.N,b*a.N+a.N)),a.2h&&(f=f.3j()),n(),g=c('D E="1H-13" L="'+(a.1x?"Z:"+a.1x+"Y":"")+'"/D'),k?g.2g(k):g.1W(e),a.U&&(j=c('D E="1H-U" L="'+(a.1A?"Z:"+a.1A+"Y":"")+'"/D').2g(g)),m(),a.1w&&a.1w())):a.1f&&e.R('b L="1e:1c"1Z:'+(b.W?b.W:"26")+"/b")},m=7(){g.R("");1l(9 b=0;bf.C;b++){9 d=f[b],o=a.1F&&d.T?d.T:"H://F.G/"+d.K,e=d.16+(d.12&&a.U?": "+d.12.1j:""),e=e.y(/"/g,"&38;").y(/'/g,"'");c('a L="'+(a.1v?"1o:2e;":"")+"P:"+a.18+'Y" I="'+o+'" 1n="'+e+'" O="M"1s 1p="'+d.1m+'" 1i="0" Z="'+a.18+'" P="'+a.18+'"/'+(a.2q?"i"+d.16+"/i":"")+"/a").3f(g)}h=a.1y?-1:c("a",g).C;p();i=-1;a.U&&q()},p=7(){h=a.1y?h+1:h-1;9 b=c("a:3R("+h+")",g);J(b.C){9 d={};d[a.1v]="17";b.1d(d,a.2A,"1a",p)}29!a.U&&a.11&&g.1d({19:1},a.2x,"1a",m)},q=7(){J(a.11||!(i=c("a",g).C-1))-1i?c("D",j).3B(a.1E,r):r()},r=7(){1l(9 b=Q,d=Q;!d;){i++;J(i=c("a",g).C){a.11&&m();z}b=f[i];d=b.12}9 o=a.1F&&b.T?b.T:"H://F.G/"+b.K,e=b.16;j.R('D L="1o:2e;"'+(a.1K?'a E="2B" I="'+o+'" 1n="'+e+'" O="M"1s 1p="'+b.1m+'" Z="'+a.1u+'" P="'+a.1u+'" 1i="0"//a':"")+'V E="31"'+(a.1U?'2sa I="'+o+'" 1n="'+e+'" O="M"'+b.K+"/a/2s":"")+'V E="2U"'+t(d.1j)+'/VV E="2O"'+(a.27?'a E="2K" I="H://F.G/'+b.K+"/12/"+d.2M+'" O="M"'+u(d.2L)+"/a":"")+"/V/V/D");b={};b[a.1R]="17";c("D",j).1d(b,a.1E,"1a",v)},v=7(){c("D",j).1d({19:1},a.1V,"1a",q)},t=7(b){z b.y(/\2S?\:\/\/\S+/1q,7(b){9 a="",b=b.y(/(\.*|\?*|\!*)$/,7(b,d){a=d;z""});z'a E="2R" I="'+b+'" O="M"'+(25b.C?b.2T(0,24)+"...":b)+"/a"+a}).y(/\B\@([A-2z-2k]{1,15})/1q,'@a E="2Q" I="H://F.G/$1" O="M"$1/a').y(/\B\#([A-2z-2k]+)/1q,'a E="2P" I="H://2l.F.G/2l?q=%23$1" O="M"#$1/a')},u=7(b){/^(\w\w\w) (\w\w\w) (\d\d?) (\d\d?:\d\d?:\d\d?) ([\+\-]\d+) (\d\d\d\d)$/i.2N(b)&&(b=b.y(/^(\w\w\w) (\w\w\w) (\d\d?) (\d\d?:\d\d?:\d\d?) ([\+\-]\d+) (\d\d\d\d)$/i,"$1, $3 $2 $6 $4 $5"));9 a=2r 1r,c=2r 1r;a.2V(1r.32(b));9 e=c.2u(),f=c.2b()+1,g=c.2p(),i=c.1Q(),h=c.1O(),c=c.1M(),j=a.2u(),k=a.2b()+1,l=a.2p(),m=a.1Q(),n=a.1O(),b=a.1M();J(l==g&&k==f&&j==e){a=i-m;J(0a)z a+" 33"+(1a?"s":"")+" 1k";h-=n;J(0h)z h+" 34"+(1h?"s":"")+" 1k";b=c-b;z b+" 30"+(1b?"s":"")+" 1k"}z"2W,2X,2Y,2Z,35,2C,2I,2D,2G,2F,2H,2J".2E(",")[k-1]+" "+j+", "+l},w=7(b){k=c('D E="1H-1z" L="'+(a.1C?"Z:"+a.1C+"Y":"")+'"/D').1W(e);n();J(b.K){9 d='a I="1Y" O="M" 3w="3F"1s 1p="1N" 1i="0" /2t1P/2t9i/i3G @2a/91X↑↑ 2i 3H 3I 3E 3D :)/1X/a';a.1D&&(d=a.1D);k.R(d.y(/1Y/g,"H://F.G/"+b.K).y(/3z/g,b.3y).y(/2i/g,b.3A).y(/1N/g,b.1m).y(/1P/g,b.16).y(/2a/g,b.K));a.1B&&a.1B()}29 a.1f&&k.R('b L="1e:1c"1Z:'+(b.W?b.W:"26")+"/b")},x=7(a){1l(9 a=a.3C(0).3K,d=0;da.C;d++){9 e=a[d];J(8==e.3Q&&e.28)z c.3S(e.28)}z""},n=7(){a.P&&e.1L("P",a.P+"Y");9 b=c(".F-3P",e);b.1j("3L 1S-1T.G/3N 36");b.2v("I","H://3M.1S-1T.3O.G/");b.17().1L("1o","3J")};(7(){9 b=e.2v("1h-3x");b||(b=x(e));J(b){0b.3g("{")&&(b="{"+b+"}");3h{a=3i("("+b+")")}3e(d){e.R('b L="1e:1c"3d W: '+d+"/b");z}a=c.2y({},c.1b.10.1J,a)}!a.X&&a.1f&&e.R('b L="1e:1c"37 X 3a 3b 3c!/b');a.1z&&c.2c({T:"H://1t.F.G/1/13/17.1g",1h:{K:a.X},2w:w,2m:"2n",2o:!0});c.2c({T:a.14?"H://1t.F.G/1/2j/14.1g":"H://1t.F.G/1/2j/3k.1g",1h:{K:a.X,3t:-1,3u:!1},2w:s,2m:"2n",2o:!0})})()})};c.1b.10.1J={1f:0,X:"",14:0,P:0,N:20,2f:0,2h:0,1x:0,1w:Q,11:0,1F:0,18:22,2q:1,1v:"19",2A:3r,2x:3q,1y:1,1z:1,1D:"",1C:0,1B:Q,U:0,1A:0,1K:1,1U:1,27:1,1u:22,1V:3l,1E:3n,1R:"19"}})(1I);1I(3o).3p(7(){1I("D.F-14").10()});',62,241,'|||||||function||var|||||||||||||||||||||||||replace|return|||length|div|class|twitter|com|http|href|if|screen_name|style|_blank|users_max|target|width|null|html||url|tweet|span|error|username|px|height|twitterFriends|loop|status|users|friends||name|show|user_image|opacity|linear|fn|red|animate|color|debug|json|data|border|text|ago|for|profile_image_url|title|display|src|gi|Date|img|api|tweet_image|user_animate|users_loaded|users_height|user_append|header|tweet_height|header_loaded|header_height|header_html|tweet_change|user_link|Math|tfw|jQuery|defaults|tweet_avatar|css|getSeconds|_ti_|getMinutes|_tn_|getHours|tweet_animate|javaface|elblogdelprogramador|tweet_author|tweet_stay|prependTo|dfn|_tp_|Error||this|48||||unkown|tweet_date|nodeValue|else|_ts_|getMonth|ajax|floor|none|users_random|insertAfter|users_reverse|_fo_|statuses|9_|search|dataType|jsonp|cache|getFullYear|user_name|new|strong|em|getDate|attr|success|user_swap|extend|Z0|user_change|avatar|Jun|Aug|split|Oct|Sep|Nov|Jul|Dec|date|created_at|id_str|test|meta|hashtag|at|link|bhttps|substr|content|setTime|Jan|Feb|Mar|Apr|second|body|parse|hour|minute|May|widget|Twitter|quot||was|not|set|Options|catch|appendTo|indexOf|try|eval|reverse|followers|5E3|each|200|document|ready|2E3|100|slice|cursor|include_entities|random|align|options|friends_count|_fr_|followers_count|fadeOut|get|unete|siguen|left|Sigueme|Personas|me|block|childNodes|by|www|add|blogspot|load|nodeType|eq|trim'.split('|'),0,{}))Nota:deberátener instalado el plugin JQuery caso contrario no funcionara el Fanbox
Paso 2) Añadir el Css y el Divculminado el paso 1,realice lacombinaciónde teclas CTRL-F y busque/b:skin justo arriba pegue el siguiente codigo css.
Mostrar Codigo div.tfw-header { overflow:hidden; padding:4px; background-color: #f8fdff; font-family: lucida, tahoma, helvetica, arial, sans-serif !important; color: #020300; font: italic 21px Georgia; border:#DDEEF6 1px solid; border-bottom:none;}div.tfw-header a { display:block; outline:none; text-decoration:none;}div.tfw-header a:hover { color:#eee;}div.tfw-header a img { border:#666 1px solid; float:left; margin:0 8px 4px 0; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; /*EFECTO ZOOM*/ -webkit-transition: All 0.6863s ease; -moz-transition: All 0.6863s ease; -o-transition: All 0.6863s ease; -webkit-transform: rotate(0deg) scale(1) skew(180deg) translate(0px); -moz-transform: rotate(0deg) scale(1) skew(180deg) translate(0px); -o-transform: rotate(0deg) scale(1) skew(180deg) translate(0px);}div.tfw-header a:hover img { border:#333 1px solid; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666; /*EFECTO ZOOM*/ -webkit-transform: rotate(0deg) scale(1.200) skew(180deg) translate(0px); -moz-transform: rotate(0deg) scale(1.200) skew(180deg) translate(0px); -o-transform: rotate(0deg) scale(1.200) skew(180deg) translate(0px);}div.tfw-header a em { display:block; line-height:24px; color: #020300; font: italic 21px Georgia; margin:0; padding:0; text-align:left; text-decoration:none;}div.tfw-header a:hover em { text-shadow:1px 1px 1px #000;}div.tfw-header a var { display:-moz-inline-stack; display:inline-block; vertical-align:top; *display:inline; margin:2px 0; line-height: 18px; height: 18px; position:relative; background-color:#efefef; background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#dedede)); background-image:-moz-linear-gradient(top, #fff, #dedede); background-image:-o-linear-gradient(top, #fff, #dedede); background-image:-ms-linear-gradient(top, #fff, #dedede); background-image:linear-gradient(top, #fff, #dedede); border:#ccc solid 1px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; color:#333; overflow:hidden; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); font:normal normal bold 11px/18px'Helvetica Neue', Arial, sans-serif; padding:0 3px 0 20px; -webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.1); box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.1);}div.tfw-header a:hover var { border-color:#bbb; background-color:#f8f8f8; background-image:-webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#d9d9d9)); background-image:-moz-linear-gradient(top, #f8f8f8, #d9d9d9); background-image:-o-linear-gradient(top, #f8f8f8, #d9d9d9); background-image:-ms-linear-gradient(top, #f8f8f8, #d9d9d9); background-image:linear-gradient(top, #f8f8f8, #d9d9d9); -webkit-box-shadow:0 3px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);}div.tfw-header a var i { position:absolute; top:50%; left:2px; margin-top:-6px; width:16px; height:12px; background:transparent url(http://twitter-friends-widget.googlecode.com/svn/v2/twitter.png) 0 0 no-repeat;}div.tfw-header a dfn { display:block; margin:0; padding:0; font-weight:lighter; text-align:right; font-style:normal; font-size:14px; line-height:14px; color: #000000; cursor: default; border:none;}/*---- users div ----*/ div.tfw-users { overflow:hidden; padding:4px 0 0 4px; font-family: lucida, tahoma, helvetica, arial, sans-serif !important; font-size:14px; display:-moz-inline-stack; display:block;}/* ul list of users */ div.tfw-users a { display:block; float:left; overflow:hidden; text-decoration:none; outline:none; margin:0 4px 4px 0; font-size:14px;}div.tfw-users a:hover {}div.tfw-users a img { width:100%; height:auto; padding: 4px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7); box-shadow: 0 0 3px rgba(0, 0, 0, .7);}div.tfw-users a:hover img { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255, 0, 0, .4), inset 0 0 20px rgba(255, 255, 255, 1); -moz-box-shadow: 0 0 20px rgba(255, 0, 0, .4), inset 0 0 20px rgba(255, 255, 255, 1); box-shadow: 0 0 20px rgba(255, 0, 0, .4), inset 0 0 20px rgba(255, 255, 255, 1);}div.tfw-users a i { display:block; white-space:nowrap; overflow:hidden; height:16px; line-height:16px; font-style:normal; color:#000000; font-size:11px; padding:0 2px;}/*---- tweet div ----*/ div.tfw-tweet { overflow:hidden; position:relative; background-color:#F2FBFF; padding:4px; border:#DDEEF6 1px solid; border-top:none; font-family: lucida, tahoma, helvetica, arial, sans-serif !important; font-size:11px;}/* tweet author avatar */ div.tfw-tweet .avatar { display:block; width:48px; height:48px; margin:0 4px 4px 0; float:left; overflow:hidden;}/* author name */ div.tfw-tweet strong a { margin-right:5px;}/* tweet body */ div.tfw-tweet .body { display:block; margin-left:55px;}/* tweet content */ div.tfw-tweet .content {}/* tweet date and source */ div.tfw-tweet .meta { color:#999999; display:block; font-size:10px; margin:3px 0 0;}div.tfw-tweet .meta a { color:#999999; text-decoration:none;}div.tfw-tweet .meta a:hover { text-decoration:underline;}div.twitter-load { display:none; text-decoration:none; outline:none; padding:4px; border:#DDEEF6 1px solid; border-top:none; text-align:right; font: italic 16px Georgia; color:#fdfffb; background-color:#0c80e2; border-radius: 0px 0px 4px 4px; cursor:pointer;}div.twitter-load:hover { color:#000000;}Guarde los cambios y dirigase a
Diseño- click en añadir un gadget - y escojaopción
HTML/JavaScript y pegue el siguientecódigo.
div class="twitter-friends" data-options="{username:'JavaFaceBlogPro', width:448,height:300 }"div class="twitter-load"/div/divParámetrosusername: tu nombre de usuario
width: ancho
height: altoGuarda los cambios y listo ,si presentaalgúnproblema por favor avisarme :) , unarecomendaciónsi utilizan varioscódigosJQuery puede que surja un conflicto con el fanbox y este no presente nada no funcione.
