Σ' αυτήν την ανάρτηση θα σας δείξω έναν τρόπο για να εντυπωσιάσετε τους επισκέπτες σας, αλλά & να παρουσιάσετε με ωραίο τρόπο τις εικόνες σας, είτε μέσα από μικρογραφίες ή κρυμένες μέσα σε συνδέσμους.
Ευκαιρία λοιπόν να το δοκιμάσετε και ν'αφήσετε τους άλλους ν'απορούν για το πώς το κάνατε αυτό.
Καταρχήν θα πάτε να κατεβάσετε τα 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>
<head>
<link rel="stylesheet" href="....thumbnailviewer.css...." type="text/css" />
<script src="....thumbnailviewer.js...." type="text/javascript"></script>
<!--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/-->
<a href="....direct link εικόνας...." rel="thumbnail"><img src="....direct link εικόνας...." style="width: 100px; height: 70px" /></a>
Σημείωση:
Το πλάτος width:100px; & το ύψος height:70px; μπορείτε να τα αλλάξετε με τις διαστάσεις που εσείς θέλετε.
<!--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>
valentina strataki svale@otenet.gr αυτο μου βγαζει οτον θελω να μπο ..........
ΑπάντησηΔιαγραφήΠροειδοποίηση για κακόβουλο λογισμικό
Η σελίδα αυτή θεωρείται μέσο διανομής επιβλαβούς λογισμικού. Συνιστάται να μην την επισκεφθείτε.
Η Opera Software σας συνιστά να μην επισκεφθείτε αυτήν τη σελίδα.
Ασφαλής επιστροφή
Γιατί έγινε φραγή σε αυτήν τη σελίδα;
Αγνόησε αυτή την προειδοποίησ
@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]
@LoneEagleΓια τους φίλους που τους ενοχλεί αυτή η προειδοποίηση μπορουν να κάνουν τις εξής απλές ρυθμίσεις στον Opera.
ΑπάντησηΔιαγραφήTools --> Preferences --> Advanced --> Security και θα ξετσεκάρετε το κουτάκι που λέει "Enable Fraud and Malware Protection"
Τέλος θα πατήσετε ΟΚ.
Υ.Γ.
Στους υπόλοιπους browsers δεν υπάρχει κάνενα πρόβλημα.
Από κει μπορείτε να καταλάβετε πως δεν είναι κατι επικίνδυνο και ανησυχητικο αυτη η προειδοποιηση.
Σας Ευχαριστούμε για την κατανόηση!