Thumbnail Viewer with Text or Image. |  Στάλες στο γαλάζιο ® <link href='http://2.bp.blogspot.com/_5U5tbSy7GJ8/TMb-jvk3W5I/AAAAAAAAKbU/da6TftxOoPs/s72-c/Image+Thumbnail+Viewer.jpg' rel='https://4.bp.blogspot.com/-ucvLyH7G8ns/WNrpJ42EDOI/AAAAAAAAfwo/V5doGhzXC8QztinTcD9Jfy_YBPCPzpPOgCLcB/s640/Stales_sto_Galazio.jpg'/>

3


Thumbnail Viewer with Text or Image

Σ' αυτήν την ανάρτηση θα σας δείξω έναν τρόπο για να εντυπωσιάσετε τους επισκέπτες σας, αλλά & να παρουσιάσετε με ωραίο τρόπο τις εικόνες σας, είτε μέσα από μικρογραφίες ή κρυμένες μέσα σε συνδέσμους.
Ευκαιρία λοιπόν να το δοκιμάσετε και ν'αφήσετε τους άλλους ν'απορούν για το πώς το κάνατε αυτό.
Καταρχήν θα πάτε να κατεβάσετε τα scripts και να το ανεβάσετε σε κάποιον server.



thumbnailviewer.css
thumbnailviewer.js
loading.gif

Στο script thumbnailviewer.js θα πρέπει μόλις το κατεβάσετε να το ανοίξετε με το WordPad, με το Σημειωματάριο ή με κάποιον άλλον editor και να προσθέσετε το direct link της εικόνας του loading.

Θα το βρείτε μέσα στο script, στο σημείο που λέει....

defineLoading: '<img src="loading.gif" /> Loading Image...',



Δείτε σχετική ανάρτηση εδώ

Κατόπιν, θα μπείτε στον Πίνακα ελέγχου του blog σας >>> Σχεδίαση >>> Επεξεργασία HTML.

Και με το Ctrl + F θα κάνετε αναζήτηση για το....


<head>


Μόλις το βρείτε, θα πάτε στην επόμενη γραμμή από το <head>
και θα προσθέσετε τα scripts του Slideshow.


<link rel="stylesheet" href="....thumbnailviewer.css...." type="text/css" />
<script src="....thumbnailviewer.js...." type="text/javascript"></script>


Τώρα θα πατήσετε ΑΠΟΘΗΚΕΥΣΗ και θα πάτε στον Πίνακα ελέγχου σας >>> Σχεδίαση >>> Στοιχεία σελίδας >>> Προσθήκη gadget και θα κοιτάξετε να βρείτε το HTML/JavaScript.



θα το ανοίξετε & θα ρίξετε μέσα τον κώδικα από όποιον τρόπο θέλετε από τους δύο.



1ος Τρόπος.

Για εικόνες μόνο:


<!--Thumbnail-Viewer-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<center>
<a href="....direct link εικόνας...." rel="thumbnail"><img src="....direct link εικόνας...." style="width: 100px; height: 70px" /></a>
<a href="....direct link εικόνας...." rel="thumbnail"><img src="....direct link εικόνας...." style="width: 100px; height: 70px" /></a>
<a href="....direct link εικόνας...." rel="thumbnail"><img src="....direct link εικόνας...." style="width: 100px; height: 70px" /></a>
<a href="....direct link εικόνας...." rel="thumbnail"><img src="....direct link εικόνας...." style="width: 100px; height: 70px" /></a>
</center>
<!--Thumbnail-Viewer-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->


Ο κώδικας που σας έχω βάλει παραπάνω είναι για 4 εικόνες.

ΑΝ θέλετε περισσότερες, δεν έχετε παρά να προσθέσετε τον παρακάτω κώδικα όσες φορές χρειάζεται.


<a href="....direct link εικόνας...." rel="thumbnail"><img src="....direct link εικόνας...." style="width: 100px; height: 70px" /></a>



Σημείωση:

Το πλάτος width:100px; & το ύψος height:70px; μπορείτε να τα αλλάξετε με τις διαστάσεις που εσείς θέλετε.


2ος Τρόπος.

Σε κείμενο όπου να ανοίγει σε εικόνα:


<!--Thumbnail-Viewer-Widget-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<center>
<p><a href="....direct link εικόνας...." rel="thumbnail" >....το κείμενο σας....</a></p>
<p><a href="....direct link εικόνας...." rel="thumbnail" >....το κείμενο σας....</a></p>
<p><a href="....direct link εικόνας...." rel="thumbnail" >....το κείμενο σας....</a></p>
<p><a href="....direct link εικόνας...." rel="thumbnail" >....το κείμενο σας....</a></p>
</center>
<!--Thumbnail-Viewer-Widget-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->


Για πρόσθετο κείμενο ... τον παρακάτω κώδικα.


<p><a href="....direct link εικόνας...." rel="thumbnail" >....το κείμενο σας....</a></p>


ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!

Δημοσίευση σχολίου Blogger

  1. valentina strataki svale@otenet.gr αυτο μου βγαζει οτον θελω να μπο ..........
    Προειδοποίηση για κακόβουλο λογισμικό

    Η σελίδα αυτή θεωρείται μέσο διανομής επιβλαβούς λογισμικού. Συνιστάται να μην την επισκεφθείτε.

    Η Opera Software σας συνιστά να μην επισκεφθείτε αυτήν τη σελίδα.
    Ασφαλής επιστροφή
    Γιατί έγινε φραγή σε αυτήν τη σελίδα;
    Αγνόησε αυτή την προειδοποίησ

    ΑπάντησηΔιαγραφή
  2. @hppolythΤο γνωρίζω κούκλα μου.

    Αλλά βλέπεις η Opera Software εκτός από ένας καλός Διαδικτυακός περιηγητής (browser), θέλησε να γίνει & ενα καλό Antivirus, Anti-Malware, Anti-Spyware, Anti-Trojan....και ένα καλό Αντε στο διάολο!!!

    Στην ερώτησή σου: Γιατί έγινε φραγή σε αυτήν τη σελίδα;

    Με απλά λόγια...γιατι καθημερινά ανεβαίνουμε σε επισκεψημότητα & ισως κάποιους τους ενοχλει

    Όλο το παιχνιδι το κανει η http://yandex.ru/ παρόλα αυτά έχουμε από αυτούς μια πολύ καλή ημερήσια επισκεψιμότητα...

    Για του λόγου το αληθές δες το screenshot από τα στατιστικά του blogger...

    [im]http://i987.photobucket.com/albums/ae359/LoneEagle110/2012-04-03_00036.png[/im]

    ΑπάντησηΔιαγραφή
  3. @LoneEagleΓια τους φίλους που τους ενοχλεί αυτή η προειδοποίηση μπορουν να κάνουν τις εξής απλές ρυθμίσεις στον Opera.

    Tools --> Preferences --> Advanced --> Security και θα ξετσεκάρετε το κουτάκι που λέει "Enable Fraud and Malware Protection"
    Τέλος θα πατήσετε ΟΚ.

    Υ.Γ.

    Στους υπόλοιπους browsers δεν υπάρχει κάνενα πρόβλημα.
    Από κει μπορείτε να καταλάβετε πως δεν είναι κατι επικίνδυνο και ανησυχητικο αυτη η προειδοποιηση.

    Σας Ευχαριστούμε για την κατανόηση!

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

Παρακαλώ, την προσοχή σας ! ! !

* Εάν εντοπίσετε κάποιο πρόβλημα σε κάποια δημοσίευση (μη ενεργός συνδεσμος λ.χ. ή οτιδήποτε άλλο), παρακαλούμε κάντε τον κόπο να γράψετε στα σχόλιά σας, το οποιοδήποτε πρόβλημά σας, ώστε να προβούμε στην άμεση διόρθωσή του.
Επίσης, μπορείτε να αποστείλετε ένα "Ευχαριστώ" προς όσους ασχολήθηκαν & σας προσέφεραν ένα... κομμάτι από τη γνώση τους.

Παράκληση προς τους φίλους αναγνώστες-σχολιαστές:

* Να αποφεύγετε να γράφετε με greekglish γιατί τα σχόλιά σας ΔΕΝ θα γίνονται δεκτά.
* Αποφεύγετε το spamάρισμα στα σχόλια. - Please don't spam me!
* Σε περίπτωση που δεν έχετε καταλάβει κάτι, επικοινωνήστε μαζί μας μέσα από την φόρμα των σχολίων και θα σας απαντήσουμε σε εύλογο χρόνο, γι' αυτό ΜΗΝ καταφεύγετε στη αποστολή e-mail για τις όποιες απορίες σας.
* Χρησιμοποιήστε το Reply (που βρίσκεται κάτω από την εικόνα χρήστη), αν θέλετε να του απευθύνετε το λόγο, ή να απαντήσετε σε προυγούμενο σχόλιο.
* Το μέγιστο όριο χαρακτήρων είναι 4.096
* Τα σχόλιά σας θα δημοσιεύονται μετά τον απαραίτητο έλεγχο.

Σημείωση: Όσοι θέλετε να παίρνετε ειδοποιήσεις για τα σχόλια που κανετε, μην ξεχάσετε να τικάρετε το κουμπί "Να λαμβάνω ειδοποιήσεις"

Σας Ευχαριστούμε για την κατανόηση και την επίσκεψή σας.!

 
Top
Blogger Tutorials

Δημιουργήστε τώρα ένα ιδανικό ιστολόγιο, χωρίς να ξοδέψετε ούτε 1€.Περισσότερα από 500 tutorials είναι στη διάθεσή σας.
Οι διαχειριστές του ιστολογίου «Στάλες στο γαλάζιο» σας συμβουλεύουν...
Αποφεύγετε την οποιαδήποτε προσφερόμενη "βοήθεια" από τυχάρπαστους και κατ' επίφαση "web designers", που από ιδιοτέλεια και μόνο προσπαθούν να εκμεταλλευθούν την άγνοιά σας!!!
Με εκτίμηση
«Στάλες στο γαλάζιο»
:-)