Κυριακή, 31 Ιουλίου 2011

Pretty box effect για εικονες του Blog σας με JQuery.

Print and PDF
 Σημερα θα σας δειξω κατι που θα φανει πολλη χρησιμο σε αυτους που εχουν πολλες εικονες στο Blog τους και θελουν να βαλουν ενα πολλη ωραιο Effect δηλαδη κατι που να τις ανοιγει τις εικονες τους με εναν μαγικο τροπο απομονοντας ολα τα που υαπρχουν στο Blog τους και επικεντρονοντας μονο στην εικονα που θελουν να δουν γι αυτο και σημερα σας εχω ενα παρα πολλη ωραιο Effect. (Το Demo οπως παντα θα το βρειτε στο τελος τις αναρτησης).



1) Πρώτα από όλα, συνδεθείτε στο λογαριασμό σας Blogger.
2) Κάντε κλικ στο Σχεδίαση. και επιλέξτε Επεξεργασία HTML.
Προσοχή:
3) Πριν ξεκινήσουμε:
- Πρέπει να είστε προσεκτικοί κατά την αλλαγή του προτύπου σας.
- Πριν κάνετε οποιαδήποτε αλλαγή, αποθηκεύστε το προτυπο σας σε ασφαλή μέρος (Στον υπολογιστη σας)



4) Παμε τωρα να ψαξουμε τον παρακατω κωδικα(Ctl+F):

 </body>

5) Και επικολουμε ακριβως απο πανω τον παρακατω κωδικα:

 <link href='http://www.no-margin-for-errors.com/wp-content/themes/NMFE/css/prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script src='http://www.no-margin-for-errors.com/wp-content/themes/NMFE/js/jquery.prettyPhoto.js' type='text/javascript'/><script type='text/javascript'>jQuery("a[rel^='prettyPhoto']").prettyPhoto();</script>

- Και παταμε αποθηκευση προτυπου.

6) Παμε τωρα να δουμε πως θα το εφαρμοσουμε στις εικονες μας.

Καθε μας εικονα οταν θα την προσθετουμε στη αναρτηση μας θα πηγαινουμε στο Επεξεργασια Html που ειναι διπλα απο την Συνθεση θα βλεπουμε τον κωδικα της εικονας μας καπως ετσι:

<a href="http://4.bp.blogspot.com/-uAwyuFGYo9U/TcKh12MXL5I/AAAAAAAAANQ/bZCLWXMYD1U/s1600/part-004.jpeg" imageanchor="1" ><img border="0" height="150" src="http://4.bp.blogspot.com/-uAwyuFGYo9U/TcKh12MXL5I/AAAAAAAAANQ/bZCLWXMYD1U/s200/part-004.jpeg" width="200" /></a>

με αλλα φυσικα με αλλα φυσικα Url. Εμεις αυτο που εχουμε να κανουμε ειναι απλα να προσθετουμε λιγο πριν το κλεισιμο τις εικονας το κωδικα:

rel="prettyphoto"

Δηλαδη θα ειναι καπως ετσι:

<a href="http://4.bp.blogspot.com/-uAwyuFGYo9U/TcKh12MXL5I/AAAAAAAAANQ/bZCLWXMYD1U/s1600/part-004.jpeg" imageanchor="1" rel="prettyphoto" ><img border="0" height="150" src="http://4.bp.blogspot.com/-uAwyuFGYo9U/TcKh12MXL5I/AAAAAAAAANQ/bZCLWXMYD1U/s200/part-004.jpeg" width="200" / rel="prettyphoto" ></a>

Σημιωση:

Τωρα αμα θελετε να εφαρμοζετε αυτο το Effect μονο στην εικονα που φαινεται στην αρχικη σας σελιδα και οχι μεσα στην αναρτηση απλα αφαιρεστε το δευτερο rel="prettyphoto.

- Για το Demo απλα πατηστε την παρακατω εικονα ή στο βιντεο:






- Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του
κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.
  
- Αμα σας αρεσε παρακαλω προωθηστε το Blog μας ή πατηστε παρακολουθηση.
  Ευχαριστω.

Copyrights: BlogyTricks© 

Πηγη κωδικα: paulsantosh

1 σχόλιο :

  1. ...traigo
    sangre
    de
    la
    tarde
    herida
    en
    la
    mano
    y
    una
    vela
    de
    mi
    corazón
    para
    invitarte
    y
    darte
    este
    alma
    que
    viene
    para
    compartir
    contigo
    tu
    bello
    blog
    con
    un
    ramillete
    de
    oro
    y
    claveles
    dentro...


    desde mis
    HORAS ROTAS
    Y AULA DE PAZ


    COMPARTIENDO ILUSION
    BLOGY TRICKS

    CON saludos de la luna al
    reflejarse en el mar de la
    poesía...




    ESPERO SEAN DE VUESTRO AGRADO EL POST POETIZADO DE TOQUE DE CANELA ,STAR WARS, CARROS DE FUEGO, MEMORIAS DE AFRICA , CHAPLIN MONOCULO NOMBRE DE LA ROSA, ALBATROS GLADIATOR, ACEBO CUMBRES BORRASCOSAS, ENEMIGO A LAS PUERTAS, CACHORRO, FANTASMA DE LA OPERA, BLADE RUUNER ,CHOCOLATE Y CREPUSCULO 1 Y2.

    José
    Ramón...

    ΑπάντησηΔιαγραφή