Blogger Tips – Tricks – Gadgets – Templates – Hacks

Αυτοματο Slider των τελευταιων αναρτησεων – Automatic Slider for Blogger



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Ένα απλό και αυτόματο slider όπως φαίνεται στην παραπάνω εικόνα. 



Η προσθήκη του είναι εύκολη σαν απλό gadget.



Από την διάταξη επιλέγουμε προσθήκη gagdet, σκρολάρουμε μέχρι το HTML/JavaScript και εκεί επικολλούμε τον παρακάτω κώδικα:



<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>

<div id="slider-rotator" class="slider-rotator loading"></div>

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

<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>

<script type="text/javascript">

makeSlider({

    url: "" // Add your blog URL

});

</script>

Αλλάζετε το με τη διεύθυνση της δικής σας ιστοσελίδας.



Και αποθήκευση.



Αν αντιμετωπίσατε κάποιο πρόβλημα, ενημερώστε μας με σχόλιο εδώ ή στη σελίδα μας στο facebook.



Copyrights: /




Αυτόματο slider εναλλαγής των 20 τελευταίων αναρτήσεων – Automatic Blogger Slideshow



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Η παρακάτω ανάρτηση αποτελεί προσφορά του Γλυφάδα web!

Μπορείτε κι εσείς να στέλνετε έξυπνα blogger hacks στο help@bloggertips.gr



Πρόκειται για ένα αυτόματο slider το οποίο παρουσιάζει τις 20 πιο πρόσφατες αναρτήσεις με τίτλους, χωρίς να χρειάζεται καμία άλλη παρέμβαση πλήν της αρχικής Προσθήκης του gadget HTML/Javascript. Δηλαδή είναι απίστευτα εύκολο να το βάλετε!



Ενα demo του Automatic content slider υπάρχει στην παρακάτω διεύθυνση ωστε να το δείτε σε λειτουργία.



http://news-glyfadaweb.blogspot.com/




Για να το βάλετε ακολουθήστε τα παρακάτω αριθμημένα βήματα:



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



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



3. Εδώ επικολλούμε τον παρακάτω κώδικα




<div style=”BORDER-BOTTOM: #000000 5px solid; BORDER-LEFT: #000000 0px solid; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BACKGROUND: #000000; BORDER-TOP: #000000 0px solid; BORDER-RIGHT: #000000 5px solid; PADDING-TOP: 5px”>

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



<style type=”text/css” media=”screen”>

<!– #spylist { overflow:hidden; margin-top:5px; padding:0px 0px; height:395px; } #spylist ul{ width:650px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #spylist li { width:640px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:395px; overflow: hidden; background:#000000 url() repeat-x; border:1px solid #000000; } #spylist li a { text-decoration:none; color:#ffc042; font-size:18px; height:0px; overflow:hidden; margin:0px 0px; padding:0px 0px 0px 0px; } #spylist li img { float:left; margin-right:0px; background:#000000; border:0; } .spydate{ overflow:hidden; font-size:12px; color:#cd1713; padding:2px 0px; margin:1px 0px 0px 0px; height:15px; font-family:Tahoma,Arial,verdana, sans-serif; } .spycomment{ overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:12px; color:#cd1713; padding:0px 0px; margin:0px 0px; } –>

</style>



<script language=”javascript”>

imgr = new Array();

imgr[0] = “http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;

imgr[1] = “http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;

imgr[2] = “http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;

imgr[3] = “http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;

imgr[4] = “http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png”;

showRandomImg = true;

boxwidth = 630;

cellspacing = 0;

borderColor = “#000000”;

bgTD = “#000”;

thumbwidth = 640;

thumbheight = 330;

fntsize = 30;

acolor = “#000”;

aBold = true;

icon = ” “;

text = “GlyfadA web”;

showPostDate = true;

summaryPost = 20;

summaryFontsize = 10;

summaryColor = “#ffffff”;

icon2 = ” “;

numposts = 20;

home_page = “http://www.glyfadaweb.gr/”;

limitspy=1

intervalspy=9000

</script>



<div id=”spylist”>

<script type=”text/javascript” src=”http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js”></script>

</div></div>



Τέλος να σημειώσω οτι είναι απόλυτα παραμετροποιήσιμο όσων αφορά τις διαστάσεις απεικόνισης και το μέγεθος των τίτλων, και αυτό που πρέπει να γίνει αμέσως μετά την τοποθέτηση είναι η αλλαγή της διεύθυνσης του URL, ώστε να φαίνονται οι δικές σας τελευταίες 20 αναρτήσεις.



home_page = “http://www.glyfadaweb.gr/“;



Αλλαγή με την δική σας διεύθυνση.



Κατά τη συγγραφή της παραπάνω ανάρτησης, άκουγα το παρακάτω -τούρκικο- τραγούδι:







Αυτή η ανάρτηση ήταν προσφορά του Glyfada Web τον οποίον και ευχαριστούμε. Μπορείτε να επικοινωνήσετε μαζί του μέσω του glyfadaweb@gmail.com



Όποιος θέλει επίσης να συνεισφέρει, μπορεί να στέλνει τις αναρτήσεις του στο help@bloggertips.gr μαζί με το όνομα και το link του blog του.



Copyrights: /




Gallery Εικόνων – Image Effect με jQuery Hover / Zoom για Blogger



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Ακόμα δεν έχει περάσει μια μέρα από το πρώτο slider-gallery εικόνων που είπαμε, και να και το δεύτερο. Έτσι για να έχετε επιλογές!

Βέβαια έχουν πολλές διαφορές, αν και τα δύο βασίζονται στη βιβλιοθήκη JQuery.

Δες ένα Demo (αν και η εικόνα είναι αρκετά επεξηγηματική) στο http://j-quary.blogspot.com/



ΕΓΚΑΤΑΣΤΑΣΗ ΤΟΥ GALLERY ΣΕ BLOGGER



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

2. Σχεδίαση> Επεξεργασία html

3. Πατώντας ctrl+F στο πληκτρολόγιό μας ψάχνουμε να βρούμε το ]]></b:skin> και από πάνω του βάζουμε τον ακόλουθο κώδικα:


/* Blogger Zoom Gallery By AllBlogTools.com */

ul.thumb {

float: left;

list-style: none;

margin: 0; padding: 10px;

width: 360px;

}

ul.thumb li {

margin: 0; padding: 5px;

float: left;

position: relative; /* Set the absolute positioning base coordinate */

width: 110px;

height: 110px;

}

ul.thumb li img {

width: 100px; height: 100px; /* Set the small thumbnail size */

-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */

border: 1px solid #ddd;

padding: 5px;

background: #f0f0f0;

position: absolute;

left: 0; top: 0;

}

ul.thumb li img.hover {

background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect

border: none; /* Get rid of border on hover */

}



4. Τώρα βρίσκουμε το </head> και πριν από αυτό επικολλούμε το παρακάτω:


<script src=’http://code.jquery.com/jquery-latest.js’

type=’text/javascript’/>

<script type=’text/javascript’>

$(document).ready(function(){



//Larger thumbnail preview



$("ul.thumb li").hover(function() {

$(this).css({'z-index' : '10'});

$(this).find('img').addClass("hover").stop()

.animate({

marginTop: '-110px',

marginLeft: '-110px',

top: '50%',

left: '50%',

width: '174px',

height: '174px',

padding: '20px'

}, 200);



} , function() {

$(this).css({'z-index' : '0'});

$(this).find('img').removeClass("hover").stop()

.animate({

marginTop: '0',

marginLeft: '0',

top: '0',

left: '0',

width: '100px',

height: '100px',

padding: '5px'

}, 400);

});



//Swap Image on Click

$("ul.thumb li a").click(function() {



var mainImage = $(this).attr("href"); //Find Image Name

$("#main_view img").attr({ src: mainImage });

return false;

});



});

</script>



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



6. Τώρα πάμε σε Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript και εκεί επικολλούμε το:


<ul class=”thumb”>

<li><a href=”#“><img src=”picture 1 Link” alt=”” /></a></li>

<li><a href=”#”><img src=”picture 2 Link” alt=”” /></a></li>

<li><a href=”#”><img src=”picture 3 Link” alt=”” /></a></li>

<li><a href=”#”><img src=”picture 4 Link” alt=”” /></a></li>

</ul>



ΕΠΕΞΗΓΗΣΗ ΚΩΔΙΚΑ:



picture 1 Link: εδώ βάζετε το url, τη διεύθυνση της φωτογραφίας σας

# : εδώ βάζετε το link-σύνδεσμο όπου θέλετε να οδηγείται κάποιος, όταν πατάει την φωτογραφία σας. αν δεν θέλετε να βάλετε κάποιο link αφήστε το #



Για προσθαφαίρεση φωτογραφιών, προσθαφαιρούμε την παρακάτω γραμμή:


<li><a href=”URL 1 #“><img src=”picture 1 Link” alt=”” /></a></li>



Μην ξεχάσετε να αποθηκεύσετε το widget σας.



Enjoy λοιπόν! Και αφήστε κανένα σχόλιο να βλέπω πως πάτε!!


Κατά τη συγγραφή της παραπάνω ανάρτησης, άκουγα το παρακάτω τραγούδι:








Πηγές: http://www.allblogtools.com/tricks-and-hacks/how-to-add-images-gallery-widget-with-jquery-hover-zoom-to-your-blogger/
Copyrights: /




Slider Εικόνων – The Best Image Effect! – Slimbox 2.02 για jquery 1.4.2



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Σήμερα θα ασχοληθούμε με ένα πολύ ενδιαφέρον θέμα, που έλειπε εως τώρα από το αρχείο του bloggertips.gr Είναι ένα πασίγνωστο εφέ εικόνων. Ίσως το καλύτερο στο είδος του. Είναι ένα slider εικόνων, που διευκολύνει τον χρήστη να βλέπει τις εικόνες και είναι και πολύ όμορφο εκτός από πρακτικό.



Δείτε ένα Demo αυτού του Image Effect στο http://www.posel.co.uk/slimbox/ (πάτα πάνω στις εικόνες για να καταλάβεις).

Καλό, ε? Σίγουρα θα το έχεις ξαναδει, γιατί χρησιμοποιείται πολύ σε πολύ μεγάλα και γνωστά sites (π.χ. newsit.gr).



Για να το εγκαταστήσουμε στο Blogger ακολουθούμε την παρακάτω διαδικασία:



1. Σύνδεση στον λογαριασμό μας στο Βlogger, πάντα από το Blogger Draft

2. Πανόπτης> Σχεδίαση> Επεξεργασία html> “Επέκταση προτύπων γραφικών στοιχείων”

3. Αναζητούμε (πάντα με τη βοήθεια του ctrl+F του browser μας) το ]]></b:skin> και επικολλούμε το παρακάτω κομμάτι κώδικα από πάνω του:


/* SLIMBOX */



#lbOverlay {

position: fixed;

z-index: 9999;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: #000;

cursor: pointer;

}

#lbCenter, #lbBottomContainer {

position: absolute;

z-index: 9999;

overflow: hidden;

background-color: #fff;

}

.lbLoading {

background: #fff url(http://sites.google.com/site/bl12tr34/archeiotheke/loading.gif) no-repeat center;

}

#lbImage {

position: absolute;

left: 0;

top: 0;

border: 10px solid #fff;

background-repeat: no-repeat;

}

#lbPrevLink, #lbNextLink {

display: block;

position: absolute;

top: 0;

width: 50%;

outline: none;

}

#lbPrevLink {

left: 0;

}

#lbPrevLink:hover {

background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/prevlabel.gif) no-repeat 0 15%;

}

#lbNextLink {

right: 0;

}

#lbNextLink:hover {

background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/nextlabel.gif) no-repeat 100% 15%;

}

#lbBottom {

font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;

font-size: 10px;

color: #666;

line-height: 1.4em;

text-align: left;

border: 10px solid #fff;

border-top-style: none;

}

#lbCloseLink {

display: block;

float: right;

width: 66px;

height: 22px;

background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/closelabel.gif) no-repeat center;

margin: 5px 0;

outline: none;

}

#lbCaption, #lbNumber {

margin-right: 71px;

}

#lbCaption {

font-weight: bold;

}



4. Τώρα ψάχνουμε για το </head> και από πάνω του, επικολλούμε το παρακάτω:


<!– Start jQuery –>

<script src=’http://www.google.com/jsapi’ type=’text/javascript’/>

<script type=’text/javascript’>google.load("jquery", "1.4.2");</script>

<!– End jQuery –>

<script src=’http://sites.google.com/site/bl12tr34/archeiotheke/slimbox2.js’ type=’text/javascript’/>

<!– End slimbox2 –>



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





Τελειώσαμε με την εγκατάστασή του, τώρα πρέπει να μάθουμε πως θα το ενεργοποιούμε όταν το χρειαζόμαστε.



Πολύ απλά όποτε θέλουμε να το χρησιμοποιήσουμε προσθέτουμε την ετικέτα rel=”lightbox” στον κώδικα της εικόνας μας. Πολύ απλό. Καταλάβατε? Είμαι σίγουρος πως όχι, για αυτό πρέπει να διαβάσετε μια παλαιότερη ανάρτησή μου, την /2009/09/picture-html-code.html Πρέπει να μάθετε πως φτιάχνεται με κωδικό μια εικόνα.



Επίσης αν θέλετε να αναγράφεται και τίτλος από κάτω, τότε βάζουμε το rel=”lightbox” title=”Εδώ ο τίτλος που θέλετε”



Βοηθηθείτε από την παρακάτω επεξηγηματική εικόνα:




Για παράδειγμα μια απλή φωτογραφία έχει τον παρακάτω κώδικα:


<div class=”separator” style=”clear: both; text-align: center;”>

<a href=”http://4.bp.blogspot.com/_L116RpGjEMY/Sr-

NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s1600/15.jpg”

imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;” >

<img border=”0″height=”158″

src=”http://4.bp.blogspot.com/_L116RpGjEMY/Sr-NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s200/15.jpg”width=”200″/></a></div>



Και εμείς προσθέτουμε τους κόκκινους κωδικούς:


<div class=”separator” style=”clear: both; text-align: center;”>

<a href=”http://4.bp.blogspot.com/_L116RpGjEMY/Sr-

NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s1600/15.jpg ”

imageanchor=”1″style=”margin-left: 1em; margin-right: 1em;”rel=”lightbox” title=”Εδώ ο τίτλος που θέλετε”><img border=”0″ height=”158″

src=”http://4.bp.blogspot.com/_L116RpGjEMY/Sr-NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s200/15.jpg ” width=”200″ /></a></div>



Για πολλές εικόνες μαζί βάζουμε την παρακάτω ετικέτα:


rel=”lightbox-ο τίτλος ομάδας εικόνων εδώ” title=”εδώ ο τίτλος για την φωτογραφία”



Παράδειγμα:


<div class=”separator” style=”clear: both; text-align: center;”>

<a href=”http://χχχχχχχχχχχχχχ.jpg ” imageanchor=”1″

style=”margin-left: 1em; margin-right: 1em;” rel=” lightbox- τα ταξίδια μου ” title=”Το ταξίδι μου στην Γαλλία ” >

<img border=”0″ height=”158″ src=”http://χχχχχχχχχχχχχχχχχ.jpg ” width=”200″ /></a></div>



<div class=”separator” style=”clear: both; text-align: center;”>

<a href=”http://χχχχχχχχχχχχχχ.jpg ” imageanchor=”1″

style=”margin-left: 1em; margin-right: 1em;” rel=” lightbox- τα ταξίδια μου ” title=”Το ταξίδι μου στην Αμερική “ >

<img border=”0″ height=”158″ src=”http://χχχχχχχχχχχχχχχχχ.jpg ” width=”200″ /></a></div>



Αυτό το κάνουμε μόνο για σχετικές μεταξύ τους εικόνες, που θέλουμε να τις ενώσουμε’ να τις ομαδοποιήσουμε.



Απλά να προσέχετε , το “rel=”lightbox- τα ταξίδια μου” θα είναι το ίδιο για όσες φωτογραφίες θέλετε να ομαδοποιήσετε και για το title=”Το ταξίδι μου στην Αμερική” ,θα αλλάξετε τον τίτλο ανάλογα με την κάθε φωτογραφία σας .



Να ευχαριστήσω δημόσια την παλιά φίλη Σοφία Καραγιάλη που μέσα από το ξεχωριστό blog της, http://bloggertrics.blogspot.com/, που όμοιό του δύσκολα θα ξαναυπάρξει, μας έχει εμπλουτίσει τις γνώσεις μας γύρω από το blog design. Σε ευχαριστούμε πολύ Σοφία και ελπίζουμε να ξανασυνεχίσεις τη θαυμάσια δουλειά σου. Και αυτή η ανάρτηση δεν θα υπήρχε δίχως εκείνη.


Πηγές: αρχικές πηγές από http://www.digitalia.be/software/slimbox2 και εικόνα και προσαρμογή κωδικών από http://bloggertrics.blogspot.com/2009/10/slimbox-202-jquery-132-bloggspot.html
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: http://bloggertips.gr/