Ένα υπέροχο εφέ για να βάλετε στις εικόνες σας, έτσι ώστε όταν περνάει το ποντίκι από πάνω τους, να μεγενθύνεται η εικόνα.Δοκιμάστε το στις εικόνες της Αντζελίνα Τζολί και εάν σας αρέσει εφαρμόστε το και στις δικές σας.
Για να εφαρμόσουμε το εφέ στο blog μας:
Από το αριστερό μενού του Blogger επιλέγουμε το [Θέμα] και στο αναπτυσσόμενο μενού [Προσαρμογή] επιλέγουμε [επεξεργασία HTML].Κάνουμε μία φορά κλικ μέσα στο πλαίσιο του κώδικα έτσι ώστε να πάρει την εστίαση.
Με Ctrl + F μέσα στο πλαίσιο του κώδικα, αναζητούμε το </head>
Ακριβώς επάνω από το </head> επικολλάμε τον παρακάτω κώδικα και πατάμε [Αποθήκευση].
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/>
<script src='https://www.professorcloud.com/js/cloud-zoom.1.0.3.js'/>
Στην περίπτωση που δε θέλουμε να εφαρμόσουμε το εφέ σε ολόκληρο το blog μας αλλά μόνο σε κάποια άρθρα μας, τότε δε γράφουμε τον κώδικα πριν από το </head> αλλά στο τέλος κάθε άρθρου που θέλουμε να το εφαρμόσουμε, μεταβαίνουμε σε [<> προβολή HTML] και επικολλάμε τον παρακάτω κώδικα:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src='https://www.professorcloud.com/js/cloud-zoom.1.0.3.js'></script>
Τώρα για να βάλουμε το zoom σε κάποια εικόνα θα πρέπει να προσθέσουμε μέσα στο tag της εικόνας αυτό:
class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"
δηλαδή ο κώδικας της φωτογραφίας θα γίνει έτσι :
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="ΔΙΕΥΘΥΝΣΗ (URL) ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ"><img src="ΔΙΕΥΘΥΝΣΗ (URL) ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ"/></a>
Εδώ τελειώσαμε αλλά...
Που θα βρούμε τα ΔΙΕΥΘΥΝΣΗ (URL) ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ και ΔΙΕΥΘΥΝΣΗ (URL) ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ;
Μέσα στο άρθρο μας μεταβαίνουμε σε [<> προβολή HTML] και ανεβάζουμε την εικόνα που θέλουμε (να είναι μεγάλη). Στο πλαίσιο που θα μας ζητήσει να επιλέξουμε τη διάταξη της εικόνας, επιλέγουμε [Αρχικό μέγεθος] και ο κώδικας που θα εισέλθει στο άρθρο μας θα είναι σαν αυτόν:
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjzFPNscBasOxjXIKKgO3PtP6sJQM5M3TdLPX96aJ8a2MzXnbJZ8j5qXerS2bX3vOsIg7_bUzKSN1EoRuWgS06wqVQwT0OuPqTabzKCiH-tLRR7kVP7FUf0iXMHyyCgjkIDJFvSHe9tTmtuUep2pYxb1cCP7f1i135bjUpzonsQ8Dz63zQbpCiuDuKo0A" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="800" data-original-width="596" src="https://blogger.googleusercontent.com/img/a/AVvXsEjzFPNscBasOxjXIKKgO3PtP6sJQM5M3TdLPX96aJ8a2MzXnbJZ8j5qXerS2bX3vOsIg7_bUzKSN1EoRuWgS06wqVQwT0OuPqTabzKCiH-tLRR7kVP7FUf0iXMHyyCgjkIDJFvSHe9tTmtuUep2pYxb1cCP7f1i135bjUpzonsQ8Dz63zQbpCiuDuKo0A"/></a></div>
To URL που έχω μαρκάρει με κίτρινο χρώμα παραπάνω είναι η διεύθυνση (URL) της μεγάλης εικόνας.
Για τη διεύθυνση (URL) της μικρής εικόνας χρησιμοποιούμε το ίδιο URL αλλά στο τέλος προσθέσουμε το =s600 (το 600 μπορεί να είναι οποιοσδήποτε αριθμός πχ 300 ή 400 κλπ κάντε δοκιμές)
Δηλαδή έχουμε:
ΔΙΕΥΘΥΝΣΗ (URL) ΜΕΓΑΛΗΣ ΕΙΚΟΝΑΣ
https://blogger.googleusercontent.com/img/a/AVvXsEjzFPNscBasOxjXIKKgO3PtP6sJQM5M3TdLPX96aJ8a2MzXnbJZ8j5qXerS2bX3vOsIg7_bUzKSN1EoRuWgS06wqVQwT0OuPqTabzKCiH-tLRR7kVP7FUf0iXMHyyCgjkIDJFvSHe9tTmtuUep2pYxb1cCP7f1i135bjUpzonsQ8Dz63zQbpCiuDuKo0A
ΔΙΕΥΘΥΝΣΗ (URL) ΜΙΚΡΗΣ ΕΙΚΟΝΑΣ https://blogger.googleusercontent.com/img/a/AVvXsEjzFPNscBasOxjXIKKgO3PtP6sJQM5M3TdLPX96aJ8a2MzXnbJZ8j5qXerS2bX3vOsIg7_bUzKSN1EoRuWgS06wqVQwT0OuPqTabzKCiH-tLRR7kVP7FUf0iXMHyyCgjkIDJFvSHe9tTmtuUep2pYxb1cCP7f1i135bjUpzonsQ8Dz63zQbpCiuDuKo0A=s600
