1ος Τρόπος : Reflex.
Preview
Reflex επιτρέπει να προσθέσετε ένα Cover Flow αποτέλεσμα στις εικόνες στην ιστοσελίδα σας.
Το script σας επιτρέπει να προσθέσετε μεμονωμένα σύνορα, tiltings και reflections στις εικόνες .
Λειτουργεί με όλες τις μεγάλες μηχανές αναζήτησης - Mozilla Firefox 1.5 +, Opera 9 +, Safari και IE6 +.
Για να δώσουμε στις εικόνες μας Cover Flow αποτέλεσμα κάνουμε τα εξής :
Εισάγουμε στο πρότυπο μας πάνω από την ετικέτα </head> τον παρακάτω κώδικα :
<script src='http://sites.google.com/site/mybloggerscripts/wooden_blog/reflex.js' type='text/javascript'/>
Και αποθηκεύετε το πρότυπο σας .
Τώρα κάθε φορά που θα δημοσιεύετε τις φωτογραφίες σας πρέπει να χρησιμοποιήσετε class "reflex" ενεργοποίησης .
Δείτε ένα παράδειγμα χρήσης :
<div class="image">
<img alt="" class="reflex " src="http://2.bp.blogspot.com/_Q6tRnBVZnko/S4lWIYUZL1I/AAAAAAAAALU/d-neTvWfn20/s320/none.jpg" width="200" />
</div>
<img alt="" class="reflex " src="http://2.bp.blogspot.com/_Q6tRnBVZnko/S4lWIYUZL1I/AAAAAAAAALU/d-neTvWfn20/s320/none.jpg" width="200" />
</div>
class attributes
Μπορείτε επίσης να προσθέσετε διαφορετικά class attributes για διαφορετικά αποτελέσματα :
- Ενεργοποίηση class "reflex"
- διαφοροποιεί την αντανάκλαση με την προσθήκη idistance ακολουθείται από το επιθυμητό height σε pixel: class "idistance" ( - min=0 max=100 default=0 )
- διαφοροποιεί την αντανάκλαση με την προσθήκη iheight ακολουθείται από το επιθυμητό height σε pixel: class "iheight" ( - min=10 max=100 default=33 )
- διαφοροποιεί την αντανάκλαση με την προσθήκη iopacity ακολουθούμενη από την επιθυμητή αδιαφάνεια σε ποσοστό: class "iopacity" ( - min=0 max=100 default=33 )
- διαφοροποιεί τα border με την προσθήκη iborder ακολουθείται από το επιθυμητό wide σε pixel: class "iborder" ( - min=0 max=100 default=0 )
- διαφοροποιεί το χρώμα στα border με την προσθήκη iColor ακολουθείται από το επιθυμητό χρώμα σε hex : class "icolor" ( - min=000000 max=ffffff default=f0f4ff )
- διαφοροποιοει το 3D Z-Tilt direction , προσθέτοντας ένα από τα ακόλουθα:
class "itiltright" ή class "itiltnone" ή class "itiltleft"
Π.Χ. <div class="image"><img src="images/left.jpg" width="200" class="reflex iopacity50" alt="" /></div>
2oς Τρόπος : Instant picture
Preview
Δίνει στις φωτογραφίες σας instant picture εφέ , επίσης μπορείτε να τις κάνετε να μοιάζουν σαν παλιές
Για να δώσουμε στις εικόνες μας instant picture αποτέλεσμα κάνουμε τα εξής :
Εισάγουμε στο πρότυπο μας πάνω από το </head> τον παρακάτω κώδικα :
<script src='http://sites.google.com/site/mybloggerscripts/wooden_blog/instant.js' type='text/javascript'/>
Και αποθηκεύετε το πρότυπο σας .
Τώρα κάθε φορά που θα δημοσιεύετε τις φωτογραφίες σας πρέπει να χρησιμοποιηθεί class="instant" ενεργοποίησης
Δείτε ένα παράδειγμα χρήσης :
<div class="image">
<img class="instant" src="images/ΧΧΧΧ.png" width="180" height="140" border="0" alt="">
</div>
<img class="instant" src="images/ΧΧΧΧ.png" width="180" height="140" border="0" alt="">
</div>
class attributes
Μπορείτε επίσης να χρησιμοποιήσετε διαφορετικά class attributes για διαφορετικά αποτελέσματα :
1 . Ενεργοποίηση class="instant" 2. Προσθέστε σκιά, με την προσθήκη ishadow ακολουθούμενη με το επιθυμητο opacity σε ποσοστά : class "ishadow" ( - min=0 max=100 default=33 )
π.χ. class="instant ishadow40 "
3 . διαφοροποιήστε το πλαίσιο, με την προσθήκη iColor ακολουθείται από το επιθυμητό χρώμα hex: class "icolor" ( - min=000000 max=ffffff default=f0f4ff )
π.χ. class="instant icolorFFFCE9 "
4 . διαφοροποιήστε την κατεύθυνση κλίσης προσθέτοντας ένα από τα ακόλουθα:
class "itiltleft" η "itiltnone" η "itiltright" π.χ. class="instant itiltleft"
5 . αποτρέψτε τη σκίαση με την προσθήκη noshading:
class "noshading" π.χ. class="instant noshading"
6 . διαφοροποιήστε το σχεδιασμό των border design προσθέτοντας historical:
class "historical" π.χ. class="instant historical"
7 . Στρογγυλεμένες γωνίες με την προσθήκη nocorner:
class "nocorner" 8 . διατηρήστε την αναλογία διαστάσεων εικόνας προσθέτοντας preserve :
class "preserve"
9 . διαφοροποιήστε το κείμενο σχόλιων με την προσθήκη itxtcol ακολουθείται από το επιθυμητό χρώμα ως hex:
class "itxtcol" ( - min=000000 max=ffffff default=000000 )
10. Παράγει το κείμενο από alt χαρακτηριστικό προσθέτοντας itxtalt:
class "itxtalt" 11. Παράγει το κείμενο από το χαρακτηριστικό title με την προσθήκη itxttitle :
class "itxttitle"
Παράδειγμα χρήσης συνδυάζοντας διαφορετικά class attributes :
<div class="image">
<img class="instant ishadow40 itiltleft icolorFFFCE9 historical" src="images/historical.jpg" width="400" height="400" border="0" title="onClick event" alt="">
</div>
<img class="instant ishadow40 itiltleft icolorFFFCE9 historical" src="images/historical.jpg" width="400" height="400" border="0" title="onClick event" alt="">
</div>
3ος Τρόπος : filmed.
filmed σας επιτρέπει να προσθέσετε λωρίδα φωτογραφικού φιλμ και σκιά στις εικόνες σας

Preview
Για να δώσουμε στις εικόνες μας αυτό το αποτέλεσμα κάνουμε τα εξής :
Εισάγουμε στο πρότυπο μας πάνω από το </head> τον παρακάτω κώδικα :
<script src='http://sites.google.com/site/mybloggerscripts/wooden_blog/filmed.js' type='text/javascript'/>
Και αποθηκεύετε το πρότυπο σας
Τώρα κάθε φορά που θα δημοσιεύετε τις φωτογραφίες σας πρέπει να χρησιμοποιηθεί class="filmed" ενεργοποίησης
Δείτε ενα παράδειγμα χρήσης :
<div class="image">
<img src="images/test.jpg" width="150" height="100" class="filmed" alt="" />
</div>
class attributes
Μπορείτε και σε αυτή την περίπτωση να βάλετε διαφορετικά class attributes για διαφορετικά αποτελέσματα :
1 .Ενεργοποίηση class "filmed" 2 . Διαφοροποιεί την ταινία με την προσθήκη iColor ακολουθείται από το επιθυμητό χρώμα ως hex:
class "icolor" ( - min=000000 max=ffffff default=000000 )
3. Διαφοροποιεί την διαφάνεια με την προσθήκη istrip ακολουθούμενη από το επιθυμητό opacity σε ποσοστό:
class "istrip" ( - min=0 max=100 default=100 )
4 . Διαφοροποιεί την αντανάκλαση , με την προσθήκη ishine ακολουθούμενη από το επιθυμητό opacity σε ποσοστά:
class "ishine" ( - min=0 max=100 default=25 )
5 . Ρυθμίστε την σκιάση , με την προσθήκη ishadow ακολουθούμενη από το επιθυμητό opacity σε ποσοστά :
class "ishadow" ( - min=0 max=100 default=33 )
6 . Προσθέστε softshadow : (χρήση σε μεγάλες εικόνες μόνο)
class "softshadow" ( - default=false )
7 . Ρυθμίστε την σκίαση με την προσθήκη noshadow :
class "noshadow" ( - default=false )
Παράδειγμα χρήσης συνδυάζοντας διαφορετικά class attributes
<div class="image">
<img src="images/girl.jpg" class="filmed istrip50 icolor402000" alt="" />
</div>
Η
<div class="image">
<img src="images/test.jpg" width="150" height="100" class="filmed icolor300000" alt="" />
</div>
<img src="images/test.jpg" width="150" height="100" class="filmed icolor300000" alt="" />
</div>
Μπορείτε βεβαία να χρησιμοποιήσετε και τους 3 javascript κωδικούς μαζί στην ιδία σελίδα .
Λοιπόν τι περιμένετε ?!!! Δώστε ζωή στις φωτογραφίες σας

Αν έχετε κάποια ερώτηση μπορείτε να αφήσετε τα σχόλια σας .
Καλή σας επιτυχία !
<span>Σοφια, το class "reflex" μπορει να φτιαξει και τις ηδη τπαρχουσες φωτο? και αν ναι, πως?</span>
Καλησπέρα σου pan de lees
Και βεβαία μπορεί .
Το μόνο που έχεις να κάνεις ειναι , να πας στην ανάρτηση η στα Gadgets όπου εχεις φωτογραφίες και πατάς επεξεργασία ανάρτησης η το εικονίδιο επεξεργασίας Gadget
Αν η φωτογραφία σου ειναι στην ανάρτηση οταν πατήσεις επεξεργασία αναρτησης , θα μεταφερθεις στην στην φόρμα όπου κάνεις αναρτήσεις, εκει απο πάνω θα δεις 2 επιλογές : ΕΠΕΞΕΡΓΑΣΊΑ HTML και ΣΎΝΘΕΣΗ .
Εκεί θα πατήσεις ΕΠΕΞΕΡΓΑΣΊΑ HTML και μετα ψάξε να βρεις τον κώδικα της φωτογραφίας σου,θα μοιάζει κάπως έτσι :
<span><span><span><span><span><span><span>
</span></span></span></span></span></span></span>
<span><span> <span><span><div> <img></img></div></span></span>
<span><span>θα κολλησεις το <span><span>class="reflex " <span>στον κώδικα αυτο ,οπως το παράδειγμα κατω </span></span></span></span></span>
</span></span>
<div> <img></img><span>class="reflex " </span> src="http://2.bp.blogspot.com/_L116RpGjEMY/S5f2uaJNiYI/AAAAAAAABXA/UIx1Ru23MfM/s320/use-photos-use-websites-articles-800X800.jpg" width="420" /></div>