Blogger Tips – Tricks – Gadgets – Templates – Hacks

Blogger Dynamic Views (τι είναι, πως τα εφαρμόζω, θετικά-αρνητικά)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr



Σήμερα θα μιλήσουμε για τη νέα λειτουργία του blogger η οποία έγινε διαθέσιμη σε όλους πριν από μερικές ημέρες (28/9/2011 για την ακρίβεια), τα Dynamic Views.







Τι είναι λοιπόν τα Dynamic Views και πώς μπορούμε να τα εφαρμόσουμε;



Τα Dynamic Views είναι ένας νέος τρόπος προβολής των blog μας. Περιλαμβάνει επτά νέους τρόπους προβολής των blog μας: Classic, Mosaic, Sidebar, Flipcard, Snapshot, Timeslide και Magazine (δείτε την παρακάτω εικόνα για να πάρετε μια ιδέα από το καθένα!).

Όπως μπορείτε να δείτε από την παραπάνω εικόνα, κάθε τρόπος προβολής (πχ Classic, Mosaic) διαφέρει αρκετά από τους υπόλοιπους.



Για να εφαρμόσετε κάποιο από τα παραπάνω στο blog σας, ακολουθήστε την παρακάτω διαδικασία:



1. Σύνδεση στο λογαριασμό blogger.

2. “Δοκιμάστε την ενημερωμένη διεπαφή του Blogger” (προαιρετικά)

3. “Πρότυπο”

4. “Προσαρμογή”

5. “Dynamic Views” και επιλέγετε ένα από τα επτά διαθέσιμα πρότυπα

6. “Εφαρμογή στο ιστολόγιο” και “Προβολή ιστολογίου” για να δείτε το αποτέλεσμα!



Μετά τη μεγάλη αλλαγή στο περιβάλλον διαχείρισης του blog μας, τώρα έρχεται μια νέα μεγάλη αλλαγή, αυτή τη φορά στον τρόπο προβολής του blog μας.



Πάμε να δούμε τι μας άρεσε και τι δε μας άρεσε συνοπτικά:



Μας άρεσε:

-Το απλό, καθαρό και όμορφο design των νέων προτύπων.

γρήγορη φόρτωση των σελίδων (αποτέλεσμα του από πάνω).

διαδραστικότητα των νέων προτύπων.

-Τα έτοιμα +1, Tweet και Like buttons που προσφέρονται από μόνα τους σε κάθε πρότυπο.

-Η φόρτωση πολλών post στην αρχική σελίδα, κάτι που δεν απαιτεί χρόνο, αφού οι αναρτήσεις που είναι παρακάτω φορτώνουν με το scrollάρισμα προς τα κάτω.

-Η δυνατότητα που έχουν οι επισκέπτες να προβάλλουν το blog σας με επτά τρόπους, ανεξάρτητα με το ποιον από τους επτά έχετε προ-επιλέξει εσείς.



Δε μας άρεσε:

-Το γεγονός πως δε μπορούμε να προσαρμόσουμε (προς το παρόν τουλάχιστον, δεν ξέρουμε αν θα υπάρξει τέτοια δυνατότητα στο μέλλον) το blog μας όπως θέλουμε εμείς.

Δεν έχουμε πρόσβαση στην HTML.

Δεν μπορούμε να προσθέσουμε δικά μας gadget.

-Η λειτουργία Dynamic Views δεν είναι διαθέσιμη για όλα τα blogs! Δε φταίει το πρότυπο που έχετε, καθώς σε δύο ολόιδια blogs που δοκίμασα να εφαρμόσω τα Dynamic Views, στο ένα εφαρμόστηκε ενώ στο άλλο όχι! Ίσως είναι θέμα χρόνου, θα δείξει…

-Αν και βελτιώθηκαν κάπως τα σχόλια, ακόμα δεν έχουμε τη δυνατότητα απάντησης (reply) προς τους σχολιαστές.



(Επίσης πρέπει να γνωρίζετε πως αν έχετε επιλέξει να βλέπετε το blog μόνο εσείς, να μην είναι δηλαδή ορατό σε οποιονδήποτε, τότε δε θα μπορείτε πάλι να εφαρμόσετε τα Dynamic Views!)



Αυτά είναι πάνω κάτω τα θετικά και αρνητικά που αποκόμισα εγώ από τα Dynamic Views, μια λειτουργία που πιστεύω πως ήρθε για να μείνει, εφόσον φυσικά βελτιωθεί σε κάποιους τομείς τους οποίους έθιξα παραπάνω.



Είναι φανερό πως η blogger προσπαθεί να κρατήσει τους bloggerposters (εμάς και εσάς δηλαδή!) στην πλατφόρμα της. Είναι επίσης φανερό πως κάνει βήματα εμπρός όσον αφορά το θέμα του design στα blog μας. Αυτό που δε μπορούμε να καταλάβουμε όμως, εγώ τουλάχιστον, είναι γιατί δεν ανεβαίνει επίπεδο και στον τομέα της ευχρηστίας.



Πώς να μην μεταπηδήσεις ύστερα σε κάποια άλλη, επίσης δωρεάν, πλατφόρμα, τη στιγμή που δε μπορείς να τροποποιήσεις το blog σου στη blogger, έστω σε ένα βασικό επίπεδο;



Copyrights: http://www.bloggertips.gr/

Post by Secra from WebRev.gr




Αλλαγή του προτύπου του blog για κινητά (How to change blogger mobile template)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr.



Σήμερα θα δούμε πως μπορούμε να αλλάξουμε το πρότυπο του blog μας για τα κινητά τηλέφωνα.

Μέσα στις μεγάλες αλλαγές που πραγματοποιήθηκαν στο blogger μέσα στο 2011 (η σημαντικότερη εκ των οποίων είναι η αλλαγή στο περιβάλλον του), συμπεριλαμβάνεται και η δυνατότητα που μας δόθηκε να επιλέξουμε ανάμεσα σε 27 έτοιμα πρότυπα ώστε να βελτιώσουμε τον τρόπο με τον οποίο βλέπουμε το blog μας από τα κινητά.



Πάμε να δούμε τι πρέπει να κάνουμε:



1. Σύνδεση στο λογαριασμό blogger.

2. Επιλέγουμε “Δοκιμάστε την ενημερωμένη διεπαφή του Blogger“, επιλογή η οποία βρίσκεται στο πάνω μέρος της αρχικής σελίδας του blogger.

3. Επιλέγουμε το blog στο οποίο θέλουμε να κάνουμε αλλαγές.

4. Πατάμε κλικ στο “Πρότυπο“, από τη λίστα στα αριστερά.



Έχει δύο επιλογές: “Ζωντανά στο ιστολόγιο” και “Κινητό“, εμάς προφανώς μας ενδιαφέρει η δεύτερη επιλογή, οπότε κάνουμε κλικ στο κουμπί που έχει από κάτω που μοιάζει με γρανάζι.



5. Στο παράθυρο που θα εμφανιστεί επιλέγουμε “Ναι. Εμφάνιση προτύπων για κινητά σε κινητές συσκευές“.



6. Λίγο πιο κάτω λέει “Επιλογή προτύπου για κινητά” και έχει ένα μενού, από το οποίο μπορούμε να διαλέξουμε τον “τύπο” του προτύπου, π.χ. “Υδατογράφημα” και δεξιά, με τα βελάκια, μπορούμε να αλλάξουμε το χρώμα και το φόντο του κάθε προτύπου (υπενθυμίζω πως δε μπορούμε να βάλουμε δικά μας, έχει προεπιλεγμένα πρότυπα!).



Όταν καταλήξουμε σε αυτό που θέλουμε, πατάμε “Αποθήκευση “και τελειώσαμε! Εύκολο, έτσι;



~

Η περίεργη εικόνα που βλέπετε (που μοιάζει κάπως έτσι) στο αριστερό μέρος της οθόνης (πριν κάνετε αποθήκευση), είναι ο κωδικός που χρησιμοποιούν τα κινητά για να “βλέπουν” το πρότυπο που έχετε εφαρμόσει για κινητά.

~



Copyrights: http://www.bloggertips.gr/



Post by Secra from Web in Greece




4 Summer Templates για το blog σας!



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr




Σήμερα θα σας δώσω 4 όμορφα, φρέσκα, καλοκαιρινά templates για να προσαρμόσετε, κατά κάποιον τρόπο, το blog σας στα “καλοκαιρινά” δεδομένα.



Η ανάρτηση απευθύνεται περισσότερο σε όσους δεν μένουν “πιστοί” σε ένα συγκεκριμένο πρότυπο και αρέσκονται στο να το αλλάζουν συχνά, ανανεώνοντας έτσι την εμφάνιση του blog τους.


1. Earthling two




Download | Demo



Πηγή: http://btemplates.com/2009/blogger-template-earthling-two/


2. Ocean Kid




Download | Demo



Πηγή: http://btemplates.com/2009/blogger-template-ocean-kid/


3. Sailing




Download | Demo



Πηγή: http://btemplates.com/2009/blogger-template-sailing/


4. Summer Fun




Download | Demo



Πηγή: http://btemplates.com/2009/blogger-template-summer-fun/



Κανένα από τα templates δεν ανήκει σε μένα για αυτό παραθέτω στο καθένα την πηγή του.



Το φόρτωμα των templates είναι μια πολύ εύκολη διαδικασία:



1. Σύνδεση στο λογαριασμό blogger

2. Σχεδίαση

3. Επεξεργασία HTML

4. Πατάμε “Επιλογή αρχείου” και επιλέγουμε το .xml αρχείο που θα βρούμε μέσα στο συμπιεσμένο αρχείο που κάναμε download.

5. Πατάμε “Μεταφόρτωση” και

6. Αποθήκευση προτύπου. Αυτό ήταν!



Copyrights: /



Post by Secra from Web in Greece




Μετατροπή Των Τίτλων Στις Sidebars Από Κεφαλαία Σε Μικρά



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Θα έχετε προσέξει ότι σε κάποια Τemplates ο τίτλος των gadgets που περνάτε στις Sidebars αναγράφεται με κεφαλαία γράμματα (Όπως και το δικό μου).

Αυτό μπορεί να σας ενοχλεί και να μην γνωρίζετε πως να το αλλάξετε σε μικρά. Ακολουθώντας τον παρακάτω οδηγό θα μπορέσετε να το πραγματοποιήσετε εύκολα και γρήγορα!



1. Σύνδεση στον λογαριασμό σας από το blogger.com

2. Πανόπτης>Σχεδίαση>Επεξεργασία html

3. Ψάξτε εκεί (πατώντας ctrl και f) τον κώδικα text-transform:uppercase; και διαγράψτε τον. Σε περίπτωση που υπάρχουν περισσότεροι από ένας τέτοιοι κώδικες, επιλέξτε αυτόν που βρίσκεται στο σημείο “Sidebar Content”.

Κάντε προεπισκόπηση για να δείτε αν είναι όλα καλά, αποθηκεύστε και όλοι οι τίτλοι θα αναγράφονται πλέων με μικρά γράμματα…



Ο φίλος konsoulito μας δίνει επίσης την παρακάτω χρήσιμη πληροφορία:



Μπορούν ακόμη στο σημείο με ctrl+f που ψάχνουν το text-transform:uppercase; να μη το διαγράψουν και να το μετατρέψουν σε text-transform:upperfirstcase; Αυτό θα κάνει έναν τίτλο να έχει κεφαλαίο το πρώτο γράμμα της πρότασης και όλα τα υπόλοιπα πεζά.



Πηγές: Φώτο, κείμενο και κωδικός αντεγραμμένα από αυτή την ανάρτηση εδώ από το http://www.freeware-tools.net/

Copyrights: /




Βαλε Slider στο blog σου – Featured Post Content Slider



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Άλλο ένα από τα σημαντικότερα blogger hacks! Σίγουρα θα έχετε δει σε πολλά blogs να έχουν sliders στο οποίο φιγουράρουν με εντυπωσιακά εφέ οι τελευταίες ή οι καλύτερες τους αναρτήσεις. Λίγοι από αυτούς που έχουν slider στο blog τους, το έχουν βάλει μόνοι τους. Στους πιο πολλούς το slider είναι ενσωματωμένο μέσα στο πρότυπο που χρησιμοποιούν. Σήμερα θα σας εξηγήσω βήμα-βήμα πως μπορείτε να εγκαταστήσετε στο blog σας, ένα δικό σας slider.



Ακολουθήστε τα παρακάτω βήματα:



1. Σύνδεση -όπως πάντα- στον blogger λογαριασμό σου από το blogger.com

2. Πανόπτης> Σχεδίαση> Επεξεργασία html

3. Με τη βοήθεια του ctrl+F από τον browser μας βρίσκουμε το </head>

4. Επικολλήστε τον παρακάτω κωδικό πριν από το </head>




<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(http://1.bp.blogspot.com/_4HKUHirY_2U/S2FVY1DGRHI/AAAAAAAAAtc/BZkCromQU-I/prev.png);

}



.next{

float:right;

width:24px;

height:24px;

z-index:200;

background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S2FVWGJQahI/AAAAAAAAAtU/l-hiX3uOqBo/nxt.png);

display:block;

}



</style>





Τροποποίηση:



Στο τέλος σας έχω μαρκάρει δύο urls. Μπορείτε να τις αλλάξετε. Αυτές οι images urls αντιπροσωπεύουν αντίστοιχα τα δυο παρακάτω εικονίδια.




http://1.bp.blogspot.com/_-j7_-ccACuU/S2Fp48raFDI/AAAAAAAABdE/sflTOaNrpIQ/prev.png:



http://2.bp.blogspot.com/_-j7_-ccACuU/S2Fp1DzO4LI/AAAAAAAABc8/wPtkkr78LYM/nxt.png:




5. Αποθήκευση Προτύπου

6. Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript

7. Εκεί επικολλήστε και αποθηκεύστε τον παρακάτω κώδικα:


<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>



Τροποποίηση:



Όπως καταλαβαίνετε αντικαθιστάτε το URL-of-Post-X , Title-of-Post-X , Slide X Description […] , Slide-X-Image-Address με αυτό που θέλετε να βάλετε.



Το width=270px (πλάτος) και το height=170px (ύψος) αντιπροσωπεύουν το μέγεθος της εικόνας που θα βάλετε.



Επίσης μπορείτε να προσθαφαιρέσετε όσα slides θέλετε.



Τις αναρτήσεις σας στο slider μπορείτε να τις αλλάζετε όποτε θέλετε, πάντα με τον ίδιον τρόπο.



8. Είστε έτοιμοι. Μπορείτε να μετακινήσετε το gadget σε όποια θέση θέλετε να εμφανίζεται το slider.



Τα σχόλιά σας είναι πάντα ευπρόσδεκτα, τα διαβάζω όλα με προσοχή και για μένα σημαίνουν πάρα πολλά



Καλή σας μέρα!


Πηγές κωδικών: http://www.bloggertipandtrick.net/
Copyrights: /




Automatic Read More Function in Blogger Posts – Αυτόματο “Διαβάστε περισσότερα…” (UPDATE 2011)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Γεια σας.



Το πιο σημαντικό και διαχρονικό blogger trick είναι ο διαχωρισμός των αναρτήσεων με τη λειτουργία του “Read More”.Δηλαδή στην αρχική σελίδα να μην φαίνεται όλη η ανάρτηση αλλά ένα μέρος της και για να εμφανιστεί το υπόλοιπο θα πρέπει ο ενδιαφερόμενος να πατήσει το Read more.

Όποιος θέλει να δει πως θα βάλει το απλό read more στο blog του ας κοιτάξει στο http://johnpatrablog.blogspot.com/2009/07/read-more-blog.html.

Σήμερα θα μιλήσουμε για ένα άλλο θέμα.

Παρακάτω θα βρείτε την απάντηση στην ερώτηση:

“Πώς θα κόβονται οι αναρτήσεις μου αυτόματα?”

Ναι υπάρχει κι αυτή η δυνατότητα.

Προσφέρει 2 πλεονεκτήματα και ένα μειονέκτημα.

Πλεονεκτήματα:

1)Δεν χρειάζεται να κόβεις τις αναρτήσεις σου “χειρονακτικά” αλλά κόβονται αυτόματα.(δηλαδή τα <span class=”fullpost”>

</span> είναι άχρηστα’δεν θα τα βάζετε εσείς αλλά προστίθονται αυτόματα)

2)Ρυθμίζεις στους πόσους χαρακτήρες θέλεις να κόβονται κι έτσι όλες οι αναρτήσεις σου είναι ομοιόμορφες.(όπως σε μένα)

Μειονεκτήματα:

1)Στο απλό read more καθορίζεις ο ίδιος μέχρι πιο σημείο θα είναι στην αρχική σελίδα η αναρτηση σου.Στο αυτόματο καθορίζεται αυτόματα.



Πάμε τώρα να δούμε πως θα το βάλετε αυτό.



Κάνουμε log in στον blogger account μας,πάμε διάταξη και μετά επεξεργασία html.

Πατάμε “Επέκταση προτύπων γραφικών στοιχείων”

Με τη βοήθεια του ctrl+F βρίσκουμε το



</head>



Αμέσως από πάνω του βάζουμε τον παρακάτω κώδικα:


<script type=’text/javascript’>var thumbnail_mode = “no-float” ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 100;

img_thumb_width = 120;

</script>

<script type=’text/javascript’>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf(“<“)!=-1)

{

var s = strx.split(“<“);

for(var i=0;i<s.length;i++){

if(s[i].indexOf(“>”)!=-1){

s[i] = s[i].substring(s[i].indexOf(“>”)+1,s[i].length);

}

}

strx = s.join(“”);

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=’ ‘ && strx.indexOf(‘ ‘,chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+’…’;

}



function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = “”;

var img = div.getElementsByTagName(“img”);

var summ = summary_noimg;

if(img.length>=1) {

imgtag = ‘<span style=”float:left; padding:0px 10px 5px 0px;”><img src=”‘+img[0].src+'” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px”/></span>’;

summ = summary_img;

}



var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;

div.innerHTML = summary;

}





//]]>

</script>



Εδώ όπως θα δείτε, μπορούμε (και πρέπει ίσως ) να χρησιμοποιήσουμε ‘μεταβλητές’ παραμέτρους στον παραπάνω κώδικα. Εδώ σας εξηγώ ποιές και τι κάνει η κάθε μία:



var thumbnail_mode = “float” ; — Με αυτήν την μεταβλητή, αποφασίζετε εάν το εικονίδιο που θα εμφανίζεται στην ανάρτησή σας, θα κάνει “float” αριστερά (float), ή θα εμφανίζεται απλά ‘άτακτα΄ στην ανάρτηση (οπότε αλάξτε το και κάντε το: no-float).

summary_noimg = 250; — Προσδιορίζει πόσοι χαρακτήρες θα εμφανίζονται σε μια ανάρτηση, η οποία δεν έχει εικόνα (no images/thumbnail) Στην περίπτωσή μας, είναι 250.

summary_img = 250; — Προσδιορίζει πόσοι χαρακτήρες θα εμφανίζονται σε μια ανάρτηση, η οποία έχει εικόνα (with images/thumbnail) Στην περίπτωσή μας, είναι 250 και πάλι.

img_thumb_height = 120; — Εικονίδια (Thumbnails) Ύψος (height) σε pixels.

img_thumb_width = 120; — Εικονίδια (Thumbnails) Πλάτος (with) σε pixels.



Ακόμα δε τελειωσαμε.



Βρείτε τον παρακάτω κωδικό:




<data:post.body/>





Αντικαταστήστε τον παραπάνω κωδικό με τον κάτω:


<b:if cond=’data:blog.pageType != “item”‘>

<div expr:id='”summary-” + data:post.id’><data:post.body/></div>

<script type=’text/javascript’>createSummaryAndThumb(“summary-<data:post.id/>”);</script>

<a class=’readmore’ expr:href=’data:post.url’>Read more »</a>

</b:if>

<b:if cond=’data:blog.pageType == “item”‘><data:post.body/></b:if>



Το “Read more »” μπορείτε να το αλλάξετε με κείμενο της αρεσκείας σας.





Βρείτε τώρα το </b:skin> και πριν από αυτό επικολλήστε το παρακάτω:


a.readmore {

/* CSS properties go here */

}



Αποθηκεύστε το πρότυπο σας και είστε έτοιμοι!


Πηγές: Κωδικοί και μέρος της ανάρτησης από http://nikos63.blogspot.com/
Copyrights: /




15 OΜΟΡΦΑ ΧΡΙΣΤΟΥΓΕΝΝΙΑΤΙΚΑ BLOGGER TEMPLATES



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Με τον έρχομο των Χριστουγέννων να είναι όλο και πιο κοντά, σας παρουσιάζω 15 όμορφα χριστουγεννιάτικα πρότυπα για όποιον θέλει να βάλει το blog του για τα καλά μέσα στο πμεύμα των Χριστουγέννων.


1)Winter-Christmas




Demo | Download






2)Merry-Christmas




Demo | Download








3)Lovely-Xmas




Demo | Download




4)La Stella di Natale






Demo | Download






5)Green-christmas




Demo | Download






6)Christmas-V2




Demo | Download




7)Christmas-V1




Demo | Download




8)Christmas-night




Demo | Download




9)Christmas-in-my-heart




Demo | Download






10)Christmas










Demo | Download




11)Christmas Warmth




Demo | Download








12)Christmas Tree






Demo | Download




13)Peekaboo Santa






Demo | Download


14)Seasonal Christmas




Demo | Download


15)Xmas




Demo | Download





Αν έχετε κάποιο άλλο να προτείνετε, αφήστε το με σχόλιο!


ΚΑΛΑ ΧΡΙΣΤΟΥΓΕΝΝΑ!





ΠΡΟΣΘΗΚΗ 4 ΣΤΗΛΩΝ ΣΤΟ FOOTER ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ (update)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Τι θα λέγατε για 4 στήλες στο footer(=κάτω μέρος) της σελίδας σας?



Αν θέλετε 3 στήλες αντί για 4, αρκεί να πατήσετε εδώ.




όποιος θέλει λοιπόν να βάλει 4 στήλες, κάνει τα παρακάτω:



Σύνδεση στον λογαριασμό σας



Σχεδίαση



Επεξεργασία html



τσεκάρουμε το “Επέκταση προτύπων γραφικών στοιχείων”



με το ctrl+F ψάχνουμε για το …


<b:section class=’footer’ id=’footer’/>



αν δεν σας βρήσκει τον παραπάνω, ψάξτε για τον παρακάτω:


<b:section class=’footer’ id=’footer’



σβήνουμε την παραπάνω γραμμή κώδικα και στη θέση του βάζουμε τον παρακάτω:


<div id=’footer-column-container’>

<div id=’footer1′ style=’width: 225px; float: left; margin:0; ‘>

<b:section class=’footer-column’ id=’footer-column-1′ preferred=’yes’ style=’float:left;’>

<b:widget id=’Text1′ locked=’false’ title=’About B-G’ type=’Text’/>



</b:section>

</div>

<div id=’footer2′ style=’width: 225px; float: left; margin:0; ‘>

<b:section class=’footer-column’ id=’footer-column-2′ preferred=’yes’ style=’float:left;’>

<b:widget id=’Text4′ locked=’false’ title=’About Author’ type=’Text’/>

</b:section>

</div>



<div id=’footer3′ style=’width: 225px; float: right; margin:0; ‘>

<b:section class=’footer-column’ id=’footer-column-3′ preferred=’yes’ style=’float:right;’>

<b:widget id=’Text3′ locked=’false’ title=’Subscribe in Reader’ type=’Text’/>

</b:section>

</div>



<div id=’footer4′ style=’width: 225px; float: right; margin:0; ‘>

<b:section class=’footer-column’ id=’footer-column-4′ preferred=’yes’ style=’float:right;’>

<b:widget id=’Text2′ locked=’false’ title=’Access B-G on Go’ type=’Text’/>

</b:section>

</div>

<div style=’clear:both;’/>

</div>



τώρα βρίσκουμε το …


]]></b:skin>



και αμέσως πριν από αυτό βάζουμε τον παρακάτω κώδικα:


#footer-column-container { border: .3px dotted #cccccc;}



.footer-column { margin: 0 10px 0 10px; padding:5px;

color: #666666; line-height: 1.5em; font-size:12px;}



.footer-column h2 {

padding-bottom:.15em; text-align:center;

font:”normal normal 80% ‘Comic Sans MS’,’Lucida Sans Unicode’,’Trebuchet MS’,Sans-serif”;

color:#333333;

line-height:1em; letter-spacing:.1em;

border-bottom: 1px solid #cccccc;}



.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}



.footer-column ul li {

background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;

margin:0 0 0; padding-left: 16px;

padding-bottom: 0.5em; line-height:1.2em;}



.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}


Αποθηκεύουμε και είμαστε έτοιμοι!



και μην ξεχνάτε ότι:



Το σχόλιό σας είναι η επιβράβευσή μου!




Προσθήκη εικόνας για background (φόντο) – Add background image



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πραγματικά είναι απίστευτα έυκολο να βάλετε μια εικόνα της επιλογής σας για φόντο (background) στο blog σας. Το μόνο δύσκολο είναι να βρείτε την εικόνα που θέλετε.

Λοιπόν βρείτε πια εικόνα θέλετε να έχετε για background. Αν θέλετε να τις αλλάξετε τις διαστάσεις, κάντε το από το Resizepic. Αφού έχετε επιλέξει ποια εικόνα θέλετε για φόντο στο blog σας, ακολουθήστε τα παρακάτω βήματα:



1. Σύνδεση στον λογαριασμό σας

2. Σχεδίαση

3. Στοιχεία σελίδας

4. Προσθήκη gadget

5. HTML/JavaScript

6. Επικόλληση του παρακάτω κωδικού:




<style type=”text/css”>body {background-image:url(ΕΔΩ_ΤΟ_URL_ΤΗΣ_ΕΙΚΟΝΑΣ_ΣΑΣ);background-attachment:fixed;}.bkgspc {margin-top:10px;font-size:11px;font-family:Arial;}.bkgspc </style><div class=”bkgspc” align=”center”>Visit <a href=”http://www.johnpatra.com/” target=”_blank”>Johnpatra.com</a></div>



Απλά εκεί που γράφω “ΕΔΩ_ΤΟ_URL_ΤΗΣ_ΕΙΚΟΝΑΣ_ΣΑΣ“, βάζετε το url της εικόνας που επιθυμήτε και μετά αποθηκεύετε.




Σχεδιαστής προτύπων – Άλλη μια καινοτομία από το Βlogger in draft



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Η παρακάτω ανάρτηση είναι εξ’ολοκλήρου αντεγραμμένη από το πολύ καλό και φιλικό Blogger Trics

Το Blogger in draft προσθέτει άλλη μια καινοτομία στο Blogger και κάνει
ένα μεγάλο πρώτο βήμα για τη βελτίωση του , και αναφέρομαι στο Σχεδιαστής προτύπων .






Με αυτό το εργαλείο Δεν αλλάζουμε μόνο τα πρότυπα μας , αλλά μας δίνει και όλες τις δυνατότητες για να μπορούμε να προσαρμόσουμε την εμφάνιση και τη διάταξη του blog μας.



Να λοιπόν , τι μας προσφέρει ο Σχεδιαστής προτύπων :

  • 15 νέα, υψηλής ποιότητας προσαρμόσιμα πρότυπα από τους Template Design Group του blogger και χωρίζονται σε τέσσερις κατηγορίες : Simple, Picture Window, Awesome Inc, and και Watermark


  • Προσθέτουμε με ένα κλικ Μια, δύο και τρεις στήλες για κάθε πρότυπο, με πλήρη έλεγχο στο μέγεθος και τη διάταξη των στηλών

  • Εκατοντάδες εικόνες φόντου για τα πρότυπα μας από το iStockphoto, ο μεγαλύτερος microstock για αγορά εικόνας





Δοκιμάστε το τώρα

Πηγαίνετε στο Blogger in draft για να αρχίσετε να χρησιμοποιείτε τον Σχεδιαστή προτύπων.
Κάντε κλικ στο “Διάταξη” για να μεταφερθείτε στην καρτέλα Διάταξης και προς τέλος της σειράς των υπό-καρτελών θα δείτε τον σύνδεσμο για τον Σχεδιαστή Πρότυπων



Μπορείτε να χρησιμοποιήσετε τη ζωντανή προεπισκόπηση για να δείτε το νέο σας πρότυπο , δεν επηρεάζει το Blog σας.


Όταν βρείτε αυτό που σας αρέσει και είστε ικανοποιημένοι με το αποτέλεσμα, απλά πατήστε το κουμπί “Εφαρμογή στο Ιστολογιο ” για να το αποθηκεύσετε .

Σημείωση : Πριν από κάποια αλλαγή κάνουμε πάντα ένα αντίγραφο ασφαλείας από το υπάρχον πρότυπο μας , πηγαίνοντας “Διάταξη”> Επεξεργασία HTML > Λήψη πλήρους προτύπου



Μικρές συμβουλές





  • Κάντε τα link σας να ταιριάζoυν με την εικόνα φόντου σας γρήγορα , χρησιμοποιώντας το Ιστορικό πάνελ “Κεντρικό χρώμα θέματος ” για να προσαρμόσει όλα τα χρώματα του blog σας αμέσως.


  • Δημιουργήστε τρεις στήλες με ένα κλικ στο footer του blog σας , όπου μπορείτε να βάλετε περισσότερα gadgets .


  • Εάν χρησιμοποιείτε νέο χαρακτηριστικό του blogger σελίδες , τότε μπορείτε να διαλέξετε ανάμεσα στα μοναδικά σχέδια καρτελών που έχει προσθέσει το blogger σε όλα τα νέα πρότυπα.


  • Μπορείτε να αλλάξετε το πλάτος της κύριας στήλης η της πλαϊνής στήλης με ένα κλικ











  • Το Copyright gadget : Επεξεργαστείτε τις ρυθμίσεις του για να προσθέσετε πληροφορίες των πνευματικών δικαιωμάτων σας .

Για περισσότερες λεπτομέρειες επισκεφτείτε το επίσημο blog του Blogger in draft

have fun with your blog , γιατί τώρα
πια το blogging γίνεται διασκέδαση
: )




Top 10 blogger templates



Print Friendly and PDFPrintPrint Friendly and PDFPDF



Παρακάτω δείτε τα 10 καλύτερα πρότυπα για το blog σας ,όπως τα επέλεξα εγώ.
Πριν κάνετε οποιαδήποτε αλλαγή στο πρότυπο του blog σας σιγουρευτείτε ότι έχετε διαβάσει αυτές τις αναρτήσεις.





1. ProBlogger Template



Download Template | See the Demo

Περισσότερες πληροφορίες εδώ


2.Ibhe Template



Download Template | See the Demo

Περισσότερες πληροφορίες εδώ


3. Blogger Buster Template



Download Template | See the Demo

Περισσότερες πληροφορίες εδώ


4.Samara Template



Download Template | See the Demo

Περισσότερες πληροφορίες εδώ


5. Arthemia Template



Download Template | See the Demo

Περισσότερες πληροφορίες εδώ


6. Pro Press Template



Download Template | See the Demo

Περισσότερες πληροφορίες εδώ


7.News Top Template



Download Template | See the Demo

Περισσότερες πληροφορίες εδώ


8. News Match Template



Download Template | See the Demo

Περισσότερες πληροφορίες εδώ


9. Company Style Template



Download Template | See the Demo

Περισσότερες πληροφορίες εδώ


10. iGREAT Blue Template



Download Template | See the Demo

Περισσότερες πληροφορίες εδώ


Επίσης οι 5 καλύτερες σελίδες για να βείτε ωραία και αξιόπιστα πρότυπα είναι οι εξής:

1.http://newwpthemes.com/
2.http://www.ourblogtemplates.com/
3.http://btemplates.com/
4.http://www.anshuldudeja.com/
5.http://www.bloggertemplatesblog.com/

Με φιλικούς χαιρετισμούς,
Johnpatra