My WordPress

Gadget με προτεινόμενες (featured) αναρτήσεις στο blog σας

Ένα χρήσιμο gadget για τον κάθε ιδιοκτήτη blog θα σας παρουσιάσω σήμερα. Το βλέπετε στο blog μου, πάνω ακριβώς από τις αναρτήσεις, στο κεντρικό πλαίσιο. Είναι το “Featured Post Content Slider with Thumbnail“, που σημαίνει ότι είναι ένα πλαίσιο στο οποίο εμφανίζονται κυλιόμενα τα άρθρα που θέλουμε, μαζί με την εικόνα τους. Γιατί πιστεύω πως είναι χρήσιμο για εμάς; Διότι, πολύ απλά, αν έχουμε ένα άρθρο μας, αρκετά παλιό, το οποίο θεωρούμε σημαντικό ή αντιπροσωπευτικό για εμάς και θέλουμε να το διαβάσουν όσοι περισσότεροι γίνεται, αυτό το gadget θα μας βοηθήσει! Ο κάθε νέος επισκέπτης θα μπορέσει να δει τα άρθρα-αναρτήσεις που του προτείνουμε, όσο παλιά κι αν γράφτηκαν.

Γιατί μου αρέσει αυτό το gadget:

α. Είναι απλό (στην εγκατάσταση, στη χρήση από τον επισκέπτη, αλλά και στην εμφάνιση).
β. Είναι απόλυτα λειτουργικό, έχοντας όλα τα απαιτούμενα στοιχεία για να πάρει ο επισκέπτης τη σωστή εντύπωση για το θέμα του άρθρου.
γ. Είναι όμορφο, χωρίς πολλά και περίεργα χρώματα, επιδεικτικές διαθέσεις ή αχρείαστα animations.
δ. Είναι χειροκίνητο από την πλευρά του επισκέπτη. Μη σας ξεγελά αυτό. Ίσως να το θεωρήσετε αρνητικό στην αρχή, αλλά αν σκεφτείτε πόσο σπαστικό είναι να προσπαθείς να διαβάσεις ένα κειμενάκι ή να απολαύσεις μια εικόνα κι αυτά να εξαφανίζονται αυτόματα για να εμφανιστούη τα επόμενα, θα καταλάβετε γιατί το θεωρώ θετικό!
ε. Είναι “χειροποίητο” από την πλευρά του ιδιοκτήτη. Κι αυτό είναι θετικό διότι μας δίνει τη δυνατότητα να επιλέξουμε όποιο κείμενο εμείς θέλουμε να εμφανίσουμε ως “περίληψη”, αλλά και όποια εικόνα θέλουμε, ακόμα κι αν η συγκεκριμένη εικόνα δεν υπάρχει πραγματικά στην ανάρτηση.
στ. Ο τρόπος που αλλάζουν οι αναρτήσεις με το πάτημα του κουμπιού (previous-next) με έχει απλά κατακτήσει. Δείτε το στην πράξη για να καταλάβετε το λόγο!

Αν ακόμα δεν πειστήκατε, δοκιμάστε το και αν δε σας αρέσει, αφαιρέστε το! Και τώρα, ας αφήσω τα λόγια για να μπω στο ψητό.

Τρία είναι τα βασικά βήματα για την εγκατάσταση του.

ΒΗΜΑ ΠΡΩΤΟ
Αποθηκεύουμε σε κάποιον online hoster (photobucket, tinypic, imagehosting, blogger) τις δύο παρακάτω εικόνες και σημειώνουμε τα links τους για να τα χρησιμοποιήσουμε αμέσως μετά.

ΒΗΜΑ ΔΕΥΤΕΡΟ

1. Πάμε: ΠΙΝΑΚΑΣ ΕΛΕΓΧΟΥ – ΣΧΕΔΙΑΣΗ – ΕΠΕΞΕΡΓΑΣΙΑ HTML (ΔΕΝ πατάμε την Επέκταση Προτύπων Γραφικών Στοιχείων)

–ΑΠΟΘΗΚΕΥΟΥΜΕ ΤΟΝ HTML ΚΩΔΙΚΑ ΜΑΣ (ΛΗΨΗ ΠΛΗΡΟΥΣ ΠΡΟΤΥΠΟΥ)–

2. Βρίσκουμε (ctrl+F) το: 

</head>

3. Ακριβώς πριν (πάνω) από αυτό, επικολλούμε τον παρακάτω κώδικα (μην τρομάξετε):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

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}('(6($){$.1g.1w=6(o){o=$.1f({r:n,x:n,N:n,17:q,J:n,L:1a,16:n,y:q,u:12,H:3,B:0,k:1,K:n,I:n},o||{});8 G.R(6(){p b=q,A=o.y?"15":"w",P=o.y?"t":"s";p c=$(G),9=$("9",c),E=$("10",9),W=E.Y(),v=o.H;7(o.u){9.1h(E.D(W-v-1 1).V()).1d(E.D(0,v).V());o.B =v}p f=$("10",9),l=f.Y(),4=o.B;c.5("1c","H");f.5({U:"T",1b:o.y?"S":"w"});9.5({19:"0",18:"0",Q:"13","1v-1s-1r":"S","z-14":"1"});c.5({U:"T",Q:"13","z-14":"2",w:"1q"});p g=o.y?t(f):s(f);p h=g*l;p j=g*v;f.5({s:f.s(),t:f.t()});9.5(P,h "C").5(A,-(4*g));c.5(P,j "C");7(o.r)$(o.r).O(6(){8 m(4-o.k)});7(o.x)$(o.x).O(6(){8 m(4 o.k)});7(o.N)$.R(o.N,6(i,a){$(a).O(6(){8 m(o.u?o.H i:i)})});7(o.17&&c.11)c.11(6(e,d){8 d>0?m(4-o.k):m(4 o.k)});7(o.J)1p(6(){m(4 o.k)},o.J o.L);6 M(){8 f.D(4).D(0,v)};6 m(a){7(!b){7(o.K)o.K.Z(G,M());7(o.u){7(a<=o.B-v-1){9.5(A,-((l-(v*2))*g) "C");4=a==o.B-v-1?l-(v*2)-1:l-(v*2)-o.k}F 7(a>=l-v 1){9.5(A,-((v)*g) "C");4=a==l-v 1?v 1:v o.k}F 4=a}F{7(a<0||a>l-v)8;F 4=a}b=12;9.1o(A=="w"?{w:-(4*g)}:{15:-(4*g)},o.L,o.16,6(){7(o.I)o.I.Z(G,M());b=q});7(!o.u){$(o.r "," o.x).1n("X");$((4-o.k<0&&o.r)||(4 o.k>l-v&&o.x)||[]).1m("X")}}8 q}})};6 5(a,b){8 1l($.5(a[0],b))||0};6 s(a){8 a[0].1k 5(a,'1j') 5(a,'1i')};6 t(a){8 a[0].1t 5(a,'1u') 5(a,'1e')}})(1x);',62,96,'||||curr|css|function|if|return|ul|||||||||||scroll|itemLength|go|null||var|false|btnPrev|width|height|circular||left|btnNext|vertical||animCss|start|px|slice|tLi|else|this|visible|afterEnd|auto|beforeStart|speed|vis|btnGo|click|sizeCss|position|each|none|hidden|overflow|clone|tl|disabled|size|call|li|mousewheel|true|relative|index|top|easing|mouseWheel|padding|margin|200|float|visibility|append|marginBottom|extend|fn|prepend|marginRight|marginLeft|offsetWidth|parseInt|addClass|removeClass|animate|setInterval|0px|type|style|offsetHeight|marginTop|list|jCarouselLite|jQuery'.split('|'),0,{}))

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

/*
* Copyright (c) 2009 Simo Kinnunen.
* Licensed under the MIT license.
*
* @version 1.02
*/
var Cufon=(function(){var m=function(){return m.replace.apply(null,arguments)};var x=m.DOM={ready:(function(){var C=false,E={loaded:1,complete:1};var B=[],D=function(){if(C){return}C=true;for(var F;F=B.shift();F()){}};if(document.addEventListener){document.addEventListener("DOMContentLoaded",D,false);window.addEventListener("pageshow",D,false)}if(!window.opera&&document.readyState){(function(){E[document.readyState]?D():setTimeout(arguments.callee,10)})()}if(document.readyState&&document.createStyleSheet){(function(){try{document.body.doScroll("left");D()}catch(F){setTimeout(arguments.callee,1)}})()}q(window,"load",D);return function(F){if(!arguments.length){D()}else{C?F():B.push(F)}}})(),root:function(){return document.documentElement||document.body}};var n=m.CSS={Size:function(C,B){this.value=parseFloat(C);this.unit=String(C).match(/[a-z%]*$/)[0]||"px";this.convert=function(D){return D/B*this.value};this.convertFrom=function(D){return D/this.value*B};this.toString=function(){return this.value this.unit}},addClass:function(C,B){var D=C.className;C.className=D (D&&" ") B;return C},color:j(function(C){var B={};B.color=C.replace(/^rgba((.*?),s*([d.] ))/,function(E,D,F){B.opacity=parseFloat(F);return"rgb(" D ")"});return B}),fontStretch:j(function(B){if(typeof B=="number"){return B}if(/%$/.test(B)){return parseFloat(B)/100}return{"ultra-condensed":0.5,"extra-condensed":0.625,condensed:0.75,"semi-condensed":0.875,"semi-expanded":1.125,expanded:1.25,"extra-expanded":1.5,"ultra-expanded":2}[B]||1}),getStyle:function(C){var B=document.defaultView;if(B&&B.getComputedStyle){return new a(B.getComputedStyle(C,null))}if(C.currentStyle){return new a(C.currentStyle)}return new a(C.style)},gradient:j(function(F){var G={id:F,type:F.match(/^-([a-z] )-gradient(/)[1],stops:[]},C=F.substr(F.indexOf("(")).match(/([d.] =)?(#[a-f0-9] |[a-z] (.*?)|[a-z] )/ig);for(var E=0,B=C.length,D;E<B;  E){D=C[E].split("=",2).reverse();G.stops.push([D[1]||E/(B-1),D[0]])}return G}),hasClass:function(C,B){return RegExp("(?:^|\s)" B "(?=\s|$)").test(C.className)},quotedList:j(function(E){var D=[],C=/s*((["'])([sS]*?[^\])2|[^,] )s*/g,B;while(B=C.exec(E)){D.push(B[3]||B[1])}return D}),recognizesMedia:j(function(G){var E=document.createElement("style"),D,C,B;E.type="text/css";E.media=G;try{E.appendChild(document.createTextNode("/**/"))}catch(F){}C=g("head")[0];C.insertBefore(E,C.firstChild);D=(E.sheet||E.styleSheet);B=D&&!D.disabled;C.removeChild(E);return B}),removeClass:function(D,C){var B=RegExp("(?:^|\s )" C "(?=\s|$)","g");D.className=D.className.replace(B,"");return D},supports:function(D,C){var B=document.createElement("span").style;if(B[D]===undefined){return false}B[D]=C;return B[D]===C},textAlign:function(E,D,B,C){if(D.get("textAlign")=="right"){if(B>0){E=" " E}}else{if(B<C-1){E =" "}}return E},textDecoration:function(G,F){if(!F){F=this.getStyle(G)}var C={underline:null,overline:null,"line-through":null};for(var B=G;B.parentNode&&B.parentNode.nodeType==1;){var E=true;for(var D in C){if(!k(C,D)||C[D]){continue}if(F.get("textDecoration").indexOf(D)!=-1){C[D]=F.get("color")}E=false}if(E){break}F=this.getStyle(B=B.parentNode)}return C},textShadow:j(function(F){if(F=="none"){return null}var E=[],G={},B,C=0;var D=/(#[a-f0-9] |[a-z] (.*?)|[a-z] )|(-?[d.] [a-z%]*)|,/ig;while(B=D.exec(F)){if(B[0]==","){E.push(G);G={};C=0}else{if(B[1]){G.color=B[1]}else{G[["offX","offY","blur"][C  ]]=B[2]}}}E.push(G);return E}),textTransform:(function(){var B={uppercase:function(C){return C.toUpperCase()},lowercase:function(C){return C.toLowerCase()},capitalize:function(C){return C.replace(/b./g,function(D){return D.toUpperCase()})}};return function(E,D){var C=B[D.get("textTransform")];return C?C(E):E}})(),whiteSpace:(function(){var B={inline:1,"inline-block":1,"run-in":1};return function(E,C,D){if(B[C.get("display")]){return E}if(!D.previousSibling){E=E.replace(/^s /,"")}if(!D.nextSibling){E=E.replace(/s $/,"")}return E}})()};n.ready=(function(){var B=!n.recognizesMedia("all"),E=false;var D=[],H=function(){B=true;for(var K;K=D.shift();K()){}};var I=g("link"),J=g("style");function C(K){return K.disabled||G(K.sheet,K.media||"screen")}function G(M,P){if(!n.recognizesMedia(P||"all")){return true}if(!M||M.disabled){return false}try{var Q=M.cssRules,O;if(Q){search:for(var L=0,K=Q.length;O=Q[L],L<K;  L){switch(O.type){case 2:break;case 3:if(!G(O.styleSheet,O.media.mediaText)){return false}break;default:break search}}}}catch(N){}return true}function F(){if(document.createStyleSheet){return true}var L,K;for(K=0;L=I[K];  K){if(L.rel.toLowerCase()=="stylesheet"&&!C(L)){return false}}for(K=0;L=J[K];  K){if(!C(L)){return false}}return true}x.ready(function(){if(!E){E=n.getStyle(document.body).isUsable()}if(B||(E&&F())){H()}else{setTimeout(arguments.callee,10)}});return function(K){if(B){K()}else{D.push(K)}}})();function s(C){var B=this.face=C.face;this.glyphs=C.glyphs;this.w=C.w;this.baseSize=parseInt(B["units-per-em"],10);this.family=B["font-family"].toLowerCase();this.weight=B["font-weight"];this.style=B["font-style"]||"normal";this.viewBox=(function(){var E=B.bbox.split(/s /);var D={minX:parseInt(E[0],10),minY:parseInt(E[1],10),maxX:parseInt(E[2],10),maxY:parseInt(E[3],10)};D.width=D.maxX-D.minX;D.height=D.maxY-D.minY;D.toString=function(){return[this.minX,this.minY,this.width,this.height].join(" ")};return D})();this.ascent=-parseInt(B.ascent,10);this.descent=-parseInt(B.descent,10);this.height=-this.ascent this.descent}function f(){var C={},B={oblique:"italic",italic:"oblique"};this.add=function(D){(C[D.style]||(C[D.style]={}))[D.weight]=D};this.get=function(H,I){var G=C[H]||C[B[H]]||C.normal||C.italic||C.oblique;if(!G){return null}I={normal:400,bold:700}[I]||parseInt(I,10);if(G[I]){return G[I]}var E={1:1,99:0}[I%100],K=[],F,D;if(E===undefined){E=I>400}if(I==500){I=400}for(var J in G){if(!k(G,J)){continue}J=parseInt(J,10);if(!F||J<F){F=J}if(!D||J>D){D=J}K.push(J)}if(I<F){I=F}if(I>D){I=D}K.sort(function(M,L){return(E?(M>I&&L>I)?M<L:M>L:(M<I&&L<I)?M>L:M<L)?-1:1});return G[K[0]]}}function r(){function D(F,G){if(F.contains){return F.contains(G)}return F.compareDocumentPosition(G)&16}function B(G){var F=G.relatedTarget;if(!F||D(this,F)){return}C(this)}function E(F){C(this)}function C(F){setTimeout(function(){m.replace(F,d.get(F).options,true)},10)}this.attach=function(F){if(F.onmouseenter===undefined){q(F,"mouseover",B);q(F,"mouseout",B)}else{q(F,"mouseenter",E);q(F,"mouseleave",E)}}}function u(){var C=[],D={};function B(H){var E=[],G;for(var F=0;G=H[F];  F){E[F]=C[D[G]]}return E}this.add=function(F,E){D[F]=C.push(E)-1};this.repeat=function(){var E=arguments.length?B(arguments):C,F;for(var G=0;F=E[G  ];){m.replace(F[0],F[1],true)}}}function A(){var D={},B=0;function C(E){return E.cufid||(E.cufid=  B)}this.get=function(E){var F=C(E);return D[F]||(D[F]={})}}function a(B){var D={},C={};this.extend=function(E){for(var F in E){if(k(E,F)){D[F]=E[F]}}return this};this.get=function(E){return D[E]!=undefined?D[E]:B[E]};this.getSize=function(F,E){return C[F]||(C[F]=new n.Size(this.get(F),E))};this.isUsable=function(){return !!B}}function q(C,B,D){if(C.addEventListener){C.addEventListener(B,D,false)}else{if(C.attachEvent){C.attachEvent("on" B,function(){return D.call(C,window.event)})}}}function v(C,B){var D=d.get(C);if(D.options){return C}if(B.hover&&B.hoverables[C.nodeName.toLowerCase()]){b.attach(C)}D.options=B;return C}function j(B){var C={};return function(D){if(!k(C,D)){C[D]=B.apply(null,arguments)}return C[D]}}function c(F,E){var B=n.quotedList(E.get("fontFamily").toLowerCase()),D;for(var C=0;D=B[C];  C){if(i[D]){return i[D].get(E.get("fontStyle"),E.get("fontWeight"))}}return null}function g(B){return document.getElementsByTagName(B)}function k(C,B){return C.hasOwnProperty(B)}function h(){var B={},D,F;for(var E=0,C=arguments.length;D=arguments[E],E<C;  E){for(F in D){if(k(D,F)){B[F]=D[F]}}}return B}function o(E,M,C,N,F,D){var K=document.createDocumentFragment(),H;if(M===""){return K}var L=N.separate;var I=M.split(p[L]),B=(L=="words");if(B&&t){if(/^s/.test(M)){I.unshift("")}if(/s$/.test(M)){I.push("")}}for(var J=0,G=I.length;J<G;  J){H=z[N.engine](E,B?n.textAlign(I[J],C,J,G):I[J],C,N,F,D,J<G-1);if(H){K.appendChild(H)}}return K}function l(C,J){var B=n.getStyle(v(C,J)).extend(J);var D=c(C,B),E,H,G,F,I;for(E=C.firstChild;E;E=G){H=E.nodeType;G=E.nextSibling;if(H==3){if(F){F.appendData(E.data);C.removeChild(E)}else{F=E}if(G){continue}}if(F){C.replaceChild(o(D,n.whiteSpace(F.data,B,F),B,J,E,C),F);F=null}if(H==1&&E.firstChild){if(n.hasClass(E,"cufon")){z[J.engine](D,null,B,J,E,C)}else{arguments.callee(E,J)}}}}var t=" ".split(/s /).length==0;var d=new A();var b=new r();var y=new u();var e=false;var z={},i={},w={enableTextDecoration:false,engine:null,forceHitArea:false,hover:false,hoverables:{a:true},printable:true,selector:(window.Sizzle||(window.jQuery&&function(B){return jQuery(B)})||(window.dojo&&dojo.query)||(window.Ext&&Ext.query)||(window.$$&&function(B){return $$(B)})||(window.$&&function(B){return $(B)})||(document.querySelectorAll&&function(B){return document.querySelectorAll(B)})||g),separate:"words",textShadow:"none"};var p={words:/[^Su00a0] /,characters:"",none:/^/};m.now=function(){x.ready();return m};m.refresh=function(){y.repeat.apply(y,arguments);return m};m.registerEngine=function(C,B){if(!B){return m}z[C]=B;return m.set("engine",C)};m.registerFont=function(D){var B=new s(D),C=B.family;if(!i[C]){i[C]=new f()}i[C].add(B);return m.set("fontFamily",'"' C '"')};m.replace=function(D,C,B){C=h(w,C);if(!C.engine){return m}if(!e){n.addClass(x.root(),"cufon-active cufon-loading");n.ready(function(){n.addClass(n.removeClass(x.root(),"cufon-loading"),"cufon-ready")});e=true}if(C.hover){C.forceHitArea=true}if(typeof C.textShadow=="string"){C.textShadow=n.textShadow(C.textShadow)}if(typeof C.color=="string"&&/^-/.test(C.color)){C.textGradient=n.gradient(C.color)}if(!B){y.add(D,arguments)}if(D.nodeType||typeof D=="string"){D=[D]}n.ready(function(){for(var F=0,E=D.length;F<E;  F){var G=D[F];if(typeof G=="string"){m.replace(C.selector(G),C,true)}else{l(G,C)}}});return m};m.set=function(B,C){w[B]=C;return m};return m})();Cufon.registerEngine("canvas",(function(){var b=document.createElement("canvas");if(!b||!b.getContext||!b.getContext.apply){return}b=null;var a=Cufon.CSS.supports("display","inline-block");var e=!a&&(document.compatMode=="BackCompat"||/frameset|transitional/i.test(document.doctype.publicId));var f=document.createElement("style");f.type="text/css";f.appendChild(document.createTextNode((".cufon-canvas{text-indent:0;}@media screen,projection{.cufon-canvas{display:inline;display:inline-block;position:relative;vertical-align:middle;" (e?"":"font-size:1px;line-height:1px;") "}.cufon-canvas .cufon-alt{display:-moz-inline-box;display:inline-block;width:0;height:0;overflow:hidden;text-indent:-10000in;}" (a?".cufon-canvas canvas{position:relative;}":".cufon-canvas canvas{position:absolute;}") "}@media print{.cufon-canvas{padding:0;}.cufon-canvas canvas{display:none;}.cufon-canvas .cufon-alt{display:inline;}}").replace(/;/g,"!important;")));document.getElementsByTagName("head")[0].appendChild(f);function d(p,h){var n=0,m=0;var g=[],o=/([mrvxe])([^a-z]*)/g,k;generate:for(var j=0;k=o.exec(p);  j){var l=k[2].split(",");switch(k[1]){case"v":g[j]={m:"bezierCurveTo",a:[n ~~l[0],m ~~l[1],n ~~l[2],m ~~l[3],n =~~l[4],m =~~l[5]]};break;case"r":g[j]={m:"lineTo",a:[n =~~l[0],m =~~l[1]]};break;case"m":g[j]={m:"moveTo",a:[n=~~l[0],m=~~l[1]]};break;case"x":g[j]={m:"closePath"};break;case"e":break generate}h[g[j].m].apply(h,g[j].a)}return g}function c(m,k){for(var j=0,h=m.length;j<h;  j){var g=m[j];k[g.m].apply(k,g.a)}}return function(ah,H,Z,D,L,ai){var n=(H===null);if(n){H=L.alt}var J=ah.viewBox;var p=Z.getSize("fontSize",ah.baseSize);var X=Z.get("letterSpacing");X=(X=="normal")?0:p.convertFrom(parseInt(X,10));var K=0,Y=0,W=0,F=0;var I=D.textShadow,U=[];if(I){for(var ag=I.length;ag--;){var O=I[ag];var T=p.convertFrom(parseFloat(O.offX));var R=p.convertFrom(parseFloat(O.offY));U[ag]=[T,R];if(R<K){K=R}if(T>Y){Y=T}if(R>W){W=R}if(T<F){F=T}}}var al=Cufon.CSS.textTransform(H,Z).split(""),B;var o=ah.glyphs,E,r,ac;var h=0,v,N=[];for(var ag=0,ae=0,ab=al.length;ag<ab;  ag){E=o[B=al[ag]]||ah.missingGlyph;if(!E){continue}if(r){h-=ac=r[B]||0;N[ae-1]-=ac}h =v=N[ae  ]=~~(E.w||ah.w) X;r=E.k}if(v===undefined){return null}Y =J.width-v;F =J.minX;var C,q;if(n){C=L;q=L.firstChild}else{C=document.createElement("span");C.className="cufon cufon-canvas";C.alt=H;q=document.createElement("canvas");C.appendChild(q);if(D.printable){var ad=document.createElement("span");ad.className="cufon-alt";ad.appendChild(document.createTextNode(H));C.appendChild(ad)}}var am=C.style;var Q=q.style;var m=p.convert(J.height);var ak=Math.ceil(m);var V=ak/m;var P=V*Cufon.CSS.fontStretch(Z.get("fontStretch"));var S=h*P;var aa=Math.ceil(p.convert(S Y-F));var t=Math.ceil(p.convert(J.height-K W));q.width=aa;q.height=t;Q.width=aa "px";Q.height=t "px";K =J.minY;Q.top=Math.round(p.convert(K-ah.ascent)) "px";Q.left=Math.round(p.convert(F)) "px";var A=Math.ceil(p.convert(S)) "px";if(a){am.width=A;am.height=p.convert(ah.height) "px"}else{am.paddingLeft=A;am.paddingBottom=(p.convert(ah.height)-1) "px"}var aj=q.getContext("2d"),M=m/J.height;aj.scale(M,M*V);aj.translate(-F,-K);aj.lineWidth=ah.face["underline-thickness"];aj.save();function s(i,g){aj.strokeStyle=g;aj.beginPath();aj.moveTo(0,i);aj.lineTo(h,i);aj.stroke()}var u=D.enableTextDecoration?Cufon.CSS.textDecoration(ai,Z):{};if(u.underline){s(-ah.face["underline-position"],u.underline)}if(u.overline){s(ah.ascent,u.overline)}function af(){aj.scale(P,1);for(var x=0,k=0,g=al.length;x<g;  x){var y=o[al[x]]||ah.missingGlyph;if(!y){continue}if(y.d){aj.beginPath();if(y.code){c(y.code,aj)}else{y.code=d("m" y.d,aj)}aj.fill()}aj.translate(N[k  ],0)}aj.restore()}if(I){for(var ag=I.length;ag--;){var O=I[ag];aj.save();aj.fillStyle=O.color;aj.translate.apply(aj,U[ag]);af()}}var z=D.textGradient;if(z){var G=z.stops,w=aj.createLinearGradient(0,J.minY,0,J.maxY);for(var ag=0,ab=G.length;ag<ab;  ag){w.addColorStop.apply(w,G[ag])}aj.fillStyle=w}else{aj.fillStyle=Z.get("color")}af();if(u["line-through"]){s(-ah.descent,u["line-through"])}return C}})());Cufon.registerEngine("vml",(function(){var e=document.namespaces;if(!e){return}e.add("cvml","urn:schemas-microsoft-com:vml");e=null;var b=document.createElement("cvml:shape");b.style.behavior="url(#default#VML)";if(!b.coordsize){return}b=null;var g=(document.documentMode||0)<8;document.write(('<style type="text/css">.cufon-vml-canvas{text-indent:0;}@media screen{cvml\:shape,cvml\:rect,cvml\:fill,cvml\:shadow{behavior:url(#default#VML);display:block;antialias:true;position:absolute;}.cufon-vml-canvas{position:absolute;text-align:left;}.cufon-vml{display:inline-block;position:relative;vertical-align:' (g?"middle":"text-bottom") ";}.cufon-vml .cufon-alt{position:absolute;left:-10000in;font-size:1px;}a .cufon-vml{cursor:pointer}}@media print{.cufon-vml *{display:none;}.cufon-vml .cufon-alt{display:inline;}}</style>").replace(/;/g,"!important;"));function c(h,i){return a(h,/(?:em|ex|%)$|^[a-z-] $/i.test(i)?"1em":i)}function a(k,l){if(/px$/i.test(l)){return parseFloat(l)}var j=k.style.left,i=k.runtimeStyle.left;k.runtimeStyle.left=k.currentStyle.left;k.style.left=l.replace("%","em");var h=k.style.pixelLeft;k.style.left=j;k.runtimeStyle.left=i;return h}var f={};function d(o){var p=o.id;if(!f[p]){var m=o.stops,n=document.createElement("cvml:fill"),h=[];n.type="gradient";n.angle=180;n.focus="0";n.method="sigma";n.color=m[0][1];for(var l=1,i=m.length-1;l<i;  l){h.push(m[l][0]*100 "% " m[l][1])}n.colors=h.join(",");n.color2=m[i][1];f[p]=n}return f[p]}return function(aj,K,ad,G,O,ak,ab){var o=(K===null);if(o){K=O.alt}var M=aj.viewBox;var q=ad.computedFontSize||(ad.computedFontSize=new Cufon.CSS.Size(c(ak,ad.get("fontSize")) "px",aj.baseSize));var aa=ad.computedLSpacing;if(aa==undefined){aa=ad.get("letterSpacing");ad.computedLSpacing=aa=(aa=="normal")?0:~~q.convertFrom(a(ak,aa))}var C,r;if(o){C=O;r=O.firstChild}else{C=document.createElement("span");C.className="cufon cufon-vml";C.alt=K;r=document.createElement("span");r.className="cufon-vml-canvas";C.appendChild(r);if(G.printable){var ag=document.createElement("span");ag.className="cufon-alt";ag.appendChild(document.createTextNode(K));C.appendChild(ag)}if(!ab){C.appendChild(document.createElement("cvml:shape"))}}var ap=C.style;var V=r.style;var m=q.convert(M.height),am=Math.ceil(m);var Z=am/m;var T=Z*Cufon.CSS.fontStretch(ad.get("fontStretch"));var Y=M.minX,X=M.minY;V.height=am;V.top=Math.round(q.convert(X-aj.ascent));V.left=Math.round(q.convert(Y));ap.height=q.convert(aj.height) "px";var v=G.enableTextDecoration?Cufon.CSS.textDecoration(ak,ad):{};var J=ad.get("color");var ao=Cufon.CSS.textTransform(K,ad).split(""),B;var p=aj.glyphs,H,s,af;var h=0,P=[],W=0,x;var z,L=G.textShadow;for(var ai=0,ah=0,ae=ao.length;ai<ae;  ai){H=p[B=ao[ai]]||aj.missingGlyph;if(!H){continue}if(s){h-=af=s[B]||0;P[ah-1]-=af}h =x=P[ah  ]=~~(H.w||aj.w) aa;s=H.k}if(x===undefined){return null}var A=-Y h (M.width-x);var an=q.convert(A*T),ac=Math.round(an);var S=A "," M.height,n;var N="r" S "ns";var y=G.textGradient&&d(G.textGradient);for(ai=0,ah=0;ai<ae;  ai){H=p[ao[ai]]||aj.missingGlyph;if(!H){continue}if(o){z=r.childNodes[ah];while(z.firstChild){z.removeChild(z.firstChild)}}else{z=document.createElement("cvml:shape");r.appendChild(z)}z.stroked="f";z.coordsize=S;z.coordorigin=n=(Y-W) "," X;z.path=(H.d?"m" H.d "xe":"") "m" n N;z.fillcolor=J;if(y){z.appendChild(y.cloneNode(false))}var al=z.style;al.width=ac;al.height=am;if(L){var u=L[0],t=L[1];var F=Cufon.CSS.color(u.color),D;var R=document.createElement("cvml:shadow");R.on="t";R.color=F.color;R.offset=u.offX "," u.offY;if(t){D=Cufon.CSS.color(t.color);R.type="double";R.color2=D.color;R.offset2=t.offX "," t.offY}R.opacity=F.opacity||(D&&D.opacity)||1;z.appendChild(R)}W =P[ah  ]}var Q=z.nextSibling,w,E;if(G.forceHitArea){if(!Q){Q=document.createElement("cvml:rect");Q.stroked="f";Q.className="cufon-vml-cover";w=document.createElement("cvml:fill");w.opacity=0;Q.appendChild(w);r.appendChild(Q)}E=Q.style;E.width=ac;E.height=am}else{if(Q){r.removeChild(Q)}}ap.width=Math.max(Math.ceil(q.convert(h*T)),0);if(g){var U=ad.computedYAdjust;if(U===undefined){var I=ad.get("lineHeight");if(I=="normal"){I="1em"}else{if(!isNaN(I)){I ="em"}}ad.computedYAdjust=U=0.5*(a(ak,I)-parseFloat(ap.height))}if(U){ap.marginTop=Math.ceil(U) "px";ap.marginBottom=U "px"}}return C}})());

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

/*
* jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
*
* Uses the built in easing capabilities added in jQuery 1.1
* to offer multiple easing options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
*   http://www.opensource.org/licenses/mit-license.php
*/

jQuery.easing = {
easein: function(x, t, b, c, d) {
return c*(t/=d)*t   b; // in
},
easeinout: function(x, t, b, c, d) {
if (t < d/2) return 2*c*t*t/(d*d)   b;
var ts = t - d/2;
return -2*c*ts*ts/(d*d)   2*c*ts/d   c/2   b;
},
easeout: function(x, t, b, c, d) {
return -c*t*t/(d*d)   2*c*t/d   b;
},
expoin: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
 flip *= -1;
 c *= -1;
}
return flip * (Math.exp(Math.log(c)/d * t))   b;
},
expoout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
 flip *= -1;
 c *= -1;
}
return flip * (-Math.exp(-Math.log(c)/d * (t-d))   c   1)   b;
},
expoinout: function(x, t, b, c, d) {
var flip = 1;
if (c < 0) {
 flip *= -1;
 c *= -1;
}
if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t))   b;
return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d))   c   1)   b;
},
bouncein: function(x, t, b, c, d) {
return c - jQuery.easing['bounceout'](x, d-t, 0, c, d)   b;
},
bounceout: function(x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
 return c*(7.5625*t*t)   b;
} else if (t < (2/2.75)) {
 return c*(7.5625*(t-=(1.5/2.75))*t   .75)   b;
} else if (t < (2.5/2.75)) {
 return c*(7.5625*(t-=(2.25/2.75))*t   .9375)   b;
} else {
 return c*(7.5625*(t-=(2.625/2.75))*t   .984375)   b;
}
},
bounceinout: function(x, t, b, c, d) {
if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5   b;
return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5   c*.5   b;
},
elasin: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d)==1) return b c;  if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p ))   b;
},
elasout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d)==1) return b c;  if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p )   c   b;
},
elasinout: function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b;  if ((t/=d/2)==2) return b c;  if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p ))   b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5   c   b;
},
backin: function(x, t, b, c, d) {
var s=1.70158;
return c*(t/=d)*t*((s 1)*t - s)   b;
},
backout: function(x, t, b, c, d) {
var s=1.70158;
return c*((t=t/d-1)*t*((s 1)*t   s)   1)   b;
},
backinout: function(x, t, b, c, d) {
var s=1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525)) 1)*t - s))   b;
return c/2*((t-=2)*t*(((s*=(1.525)) 1)*t   s)   2)   b;
},
linear: function(x, t, b, c, d) {
return c*t/d   b; //linear
}
};

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function() {
Cufon.replace('.blogname h2', { fontFamily: 'MankSans-Medium' });
Cufon.replace('.sidetitl,.blogname h1', { fontFamily: 'ChunkFive' });

});

//]]>
</script>


<style type='text/css'>
#slidearea{
height: 230px;
overflow: hidden;
position: relative;
width:680px;
background:#242424;
}
#gallerycover{
overflow: hidden;
margin:0px 0px;
}

.mygallery{
overflow: hidden;
position:relative;
}

.mytext img{
position:absolute;
left:10px;
top:10px;
padding:5px;
background:#515252;
border:1px solid #5e5e5e;
}

.mytext{
position:relative;
margin:0px 0px;
height:200px;
width:680px;
float:left;
display:inline;
line-height:20px;
color:#c4c4c4;
font-family: Tahoma,Georgia,century gothic,Verdana, sans-serif;
}

.mytext ul li{
height:200px;

}

.mytext a:link, .mytext  a:visited {
color:#fff;
}

.mytext h2 {
font: 18px Georgia,century gothic,Verdana, sans-serif;
margin:15px 0px 5px 310px;
font-weight:normal;
width:350px;
height:24px;
overflow:hidden;
}

.mytext p {
width:350px;
margin:0px 0px 5px 310px;
color:#6f6f6f;
}

.mytext h2 a:link, .mytext h2 a:visited {
color:#fff;
}
.slnav{
padding:3px 0px;
background:#000;

}
.prev{
float:left;
width:24px;
height:24px;
z-index:200;
margin-left:5px;
background:url(IMG_PREV_LINK);
}

.next{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(IMG_NXT_LINK);
display:block;
}

</style>

4. Αντικαθιστούμε τα κίτρινα γράμματα με τα links των εικόνων που αποθηκεύσαμε πιο πάνω. Το IMG_PREV_LINK με το link της πρώτης (prev.png) και το IMG_NXT_LINK με το link της δεύτερης (nxt.png).

5. Πατάμε ΠΡΟΕΠΙΣΚΟΠΗΣΗ κι αν δε μας εμφανίσει κάποιο λάθος, πατάμε ΑΠΟΘΗΚΕΥΣΗ.

ΒΗΜΑ TΡΙΤΟ

1. Πάμε: ΠΙΝΑΚΑΣ ΕΛΕΓΧΟΥ – ΣΧΕΔΙΑΣΗ – ΣΤΟΙΧΕΙΑ ΣΕΛΙΔΑΣ – (στο σημείο που θα τοποθετήσουμε το gadget μας) ΠΡΟΣΘΗΚΗ GADGET – HTML/JAVASCRIPT
2. Βάζουμε τον τίτλο που θέλουμε (εγώ έγραψα “ΠΡΟΤΕΙΝΟΜΕΝA“, αλλά πολύ πιθανό να το αλλάξω πάλι) και αμέσως μετά επικολλούμε εκεί τον παρακάτω κώδικα:

<script type="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
     visible: 1,
     easing: "backout",
 speed: 1000
});

});
</script>

<div id="slidearea">

<div id="gallerycover">
<div class="mygallery">
<ul>

<li>
<div class="mytext">
<h2><a href="URL-of-Post-1" title="#">Title-of-Post-1</a></h2>
<p>Slide 1 Description [...]</p>

<img src="Slide-1-Image-Address" alt=""  />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-2" title="#">Title-of-Post-2</a></h2>
<p>Slide 2 Description [...]</p>

<img src="Slide-2-Image-Address" alt=""  />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-3" title="#">Title-of-Post-3</a></h2>
<p>Slide 3 Description [...]</p>

<img src="Slide-3-Image-Address" alt=""  />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-4" title="#">Title-of-Post-4</a></h2>
<p>Slide 4 Description [...]</p>

<img src="Slide-4-Image-Address" alt=""  />
</div>
</li>


<li>
<div class="mytext">
<h2><a href="URL-of-Post-5" title="#">Title-of-Post-5</a></h2>
<p>Slide 5 Description [...]</p>

<img src="Slide-5-Image-Address" alt=""  />
</div>
</li>

</ul>

<div class="clear"></div>

</div>
</div>

<div class="slnav">
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<div class="clear"></div>
</div>

</div>

Και τώρα η επεξεργασία του gadget.

Αντικαθιστούμε:

URL-of-Post-# : Το link της ανάρτησης στην οποία θα μεταφέρεται ο επισκέπτης πατώντας στον τίτλο που θα βάλουμε.
Title-of-Post-# : Τον τίτλο της ανάρτησης. Σημειώστε ότι δεν είναι απαραίτητο να είναι ο αυθεντικός τίτλος. Μπορείτε να συντομεύσετε μεγάλους τίτλους για να χωρούν άνετα στο gadget.
Slide # Description […] : Η περιγραφή ή “περίληψη” της ανάρτησης, για να ξέρει ο επισκέπτης το θέμα αυτού που θα διαβάσει. Σημειώστε κι εδώ ότι μπορείτε να βάλετε όποιο κείμενο θέλετε, ακόμα κι αν η παράγραφος που θα γράψετε δεν υπάρχει στην ανάρτηση. Το […] στο τέλος μπορείτε να το αφαιρέσετε, αλλά η συμβουλή μου είναι να το κρατήσετε, διότι δείχνει ωραίο.
Slide-#-Image-Address : Το link της εικόνας που θα συνοδεύει το κειμενάκι. Κι εδώ δε χρειάζεται να υπάρχει στην ανάρτηση η εικόνα. ΠΡΟΣΟΧΗ: Χρησιμοποιήστε εικόνες με τις εξής διαστάσεις: ΠΛΑΤΟΣ: 270 pixels – ΥΨΟΣ: 170 pixels. Αλλιώς το gadgetάκι δε θα εμφανίζεται σωστά!

Σημειώσεις:

1. Για να προσθέσετε περισσότερες αναρτήσεις στο gadget, απλά πρέπει να προσθέσετε στο gadget τον παρακάτω κώδικα (κάνοντας βέβαια τις ανάλογες αλλαγές στα χρωματισμένα), όσες φορές θέλετε:

<li>
<div class="mytext">
<h2><a href="URL-of-Post" title="#">Title-of-Post</a></h2>
<p>Slide Description [...]</p>

<img src="Slide-Image-Address" alt=""  />
</div>
</li>

O κώδικας μπαίνει (τόσες φορές όσες είναι και οι επιπρόσθετες αναρτήσεις μας) ΠΡΙΝ από το:

</ul>

<div class="clear"></div>

</div>
</div>

<div class="slnav">
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<div class="clear"></div>
</div>

</div>

2. Οι έμπειροι με κώδικες κ.λπ. μπορούν να επεξεργαστούν χρώματα, μεγέθη ή όποια άλλη ιδιότητα του gadget “παίζοντας” με τον πρώτο κώδικα, αλλά ΟΧΙ ΠΑΝΩ από το σημείο

<style type='text/css'>

3. Για τους αρχάριους να δώσω μερικά βασικά στοιχεία που μπορούν να επεξεργαστούν, “παίζοντας” κι αυτοί με τον κώδικα:
width: πλάτος
height: ύψος
background: χρώμα φόντου
color: χρώμα κειμένου

Με αλλαγές και προεπισκοπήσεις βρείτε τις ιδανικές επιλογές για κάθε στοιχείο του gadget για να ταιριάζει στο blog σας.

4. Οι αναρτήσεις εμφανίζονται με τη σειρά που έχουν μπει οι κώδικες τους. Δηλαδή ο κώδικας της ανάρτησης που θέλετε να φαίνεται πρώτη με την εμφάνιση του gadget,  πρέπει να μπει πρώτος και να ακολουθήσουν με τη σειρά που θέλετε οι υπόλοιποι.

ΠΡΟΣΟΧΗ: Αν δεν είστε σίγουροι για το τι κάνετε, καλύτερα αφήστε το όπως είναι!

Αυτό ήταν. Για απορίες, εισηγήσεις, οτιδήποτε μπορώ να βοηθήσω ή αν παρατηρήσατε κάποιο λάθος, παρακαλώ αφήστε τα σχόλια σας! Κι όταν το χρησιμοποιήσετε πείτε την άποψη σας και δώστε μου ένα link για να το δω και να σας συγχαρώ κι εγώ!

Καλές επιτυχίες!

Πηγή: bloggertipandtrick

TwistedTool

, ,

6 responses to “Gadget με προτεινόμενες (featured) αναρτήσεις στο blog σας”

  1. ΠΟΛΥ ΚΑΛΟ ΦΑΙΝΕΤΑΙ!

    ΚΑΙ ΕΥΚΟΛΟ!

    ΘΑ ΤΟ ΧΩΣΟΥΜΕ ΜΑΛΛΟΝ ΑΥΡΙΟ 😛 😛 😛

    Reply

  2. Αναμένω να δω τα αποτελέσματα σας! Σε ένα blog σαν το δικό σας, σίγουρα θα είναι χρήσιμο!

    Ενημερώνετε όταν το δοκιμάσετε ε! 🙂

    Reply

  3. ΝΑ ΣΟΥ ΠΩ, ΔΙΑΛΕΓΟΥΜΕ ΕΜΕΙΣ ΤΩΝ ΑΡΙΘΜΟ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ ΠΟΥ ΘΑ ΔΕΙΧΝΕΙ??

    Reply

  4. Ναι.

    Είναι έτοιμο για 5 αναρτήσεις.

    Στο 1 στις Σημειώσεις, εξηγώ πώς να προσθέσετε. Αν θέλετε να αφαιρέσετε μπορείτε να αφαιρέσετε τον κώδικα που δίνω εκεί στο 1.

    Χωρίς να το δοκιμάσεις, ίσως να μην καταλάβεις με τα λόγια 🙂

    Reply

  5. ΟΚ, ΘΑ ΤΟ ΔΟΚΙΜΑΣΟΥΜΕ ΚΑΙ ΑΜΑ ΕΧΟΥΜΕ ΚΑΜΙΑ ΑΠΟΡΙΑ, ΘΑ ΣΤΟ ΠΟΥΜΕ 😉 😉 😉

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *