Blogger Tips - Tricks - Gadgets - Templates

Slider Εικόνων - The Best Image Effect! - Slimbox 2.02 για jquery 1.4.2

Σήμερα θα ασχοληθούμε με ένα πολύ ενδιαφέρον θέμα, που έλειπε εως τώρα από το αρχείο του bloggertips.gr Είναι ένα πασίγνωστο εφέ εικόνων. Ίσως το καλύτερο στο είδος του. Είναι ένα slider εικόνων, που διευκολύνει τον χρήστη να βλέπει τις εικόνες και είναι και πολύ όμορφο εκτός από πρακτικό.

Δείτε ένα Demo αυτού του Image Effect στο http://www.posel.co.uk/slimbox/ (πάτα πάνω στις εικόνες για να καταλάβεις).
Καλό, ε? Σίγουρα θα το έχεις ξαναδει, γιατί χρησιμοποιείται πολύ σε πολύ μεγάλα και γνωστά sites (π.χ. newsit.gr).

Για να το εγκαταστήσουμε στο Blogger ακολουθούμε την παρακάτω διαδικασία:

1. Σύνδεση στον λογαριασμό μας στο Βlogger, πάντα από το Blogger Draft
2. Πανόπτης> Σχεδίαση> Επεξεργασία html> "Επέκταση προτύπων γραφικών στοιχείων"
3. Αναζητούμε (πάντα με τη βοήθεια του ctrl+F του browser μας) το ]]></b:skin> και επικολλούμε το παρακάτω κομμάτι κώδικα από πάνω του:

/* SLIMBOX */

#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url(http://sites.google.com/site/bl12tr34/archeiotheke/loading.gif) no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink {
right: 0;
}
#lbNextLink:hover {
background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #fff;
border-top-style: none;
}
#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}

4. Τώρα ψάχνουμε για το </head> και από πάνω του, επικολλούμε το παρακάτω:

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load("jquery", "1.4.2");</script>

<script src='http://sites.google.com/site/bl12tr34/archeiotheke/slimbox2.js' type='text/javascript'/>

5. Αποθήκευση προτύπου

Τελειώσαμε με την εγκατάστασή του, τώρα πρέπει να μάθουμε πως θα το ενεργοποιούμε όταν το χρειαζόμαστε.

Πολύ απλά όποτε θέλουμε να το χρησιμοποιήσουμε προσθέτουμε την ετικέτα rel="lightbox" στον κώδικα της εικόνας μας. Πολύ απλό. Καταλάβατε? Είμαι σίγουρος πως όχι, για αυτό πρέπει να διαβάσετε μια παλαιότερη ανάρτησή μου, την http://www.bloggertips.gr/2009/09/picture-html-code.html Πρέπει να μάθετε πως φτιάχνεται με κωδικό μια εικόνα.

Επίσης αν θέλετε να αναγράφεται και τίτλος από κάτω, τότε βάζουμε το rel="lightbox" title="Εδώ ο τίτλος που θέλετε"

Βοηθηθείτε από την παρακάτω επεξηγηματική εικόνα:

Για παράδειγμα μια απλή φωτογραφία έχει τον παρακάτω κώδικα:

Και εμείς προσθέτουμε τους κόκκινους κωδικούς:

Για πολλές εικόνες μαζί βάζουμε την παρακάτω ετικέτα:

rel="lightbox-ο τίτλος ομάδας εικόνων εδώ" title="εδώ ο τίτλος για την φωτογραφία"

Παράδειγμα:

Αυτό το κάνουμε μόνο για σχετικές μεταξύ τους εικόνες, που θέλουμε να τις ενώσουμε' να τις ομαδοποιήσουμε.

Απλά να προσέχετε , το "rel="lightbox- τα ταξίδια μου" θα είναι το ίδιο για όσες φωτογραφίες θέλετε να ομαδοποιήσετε και για το title="Το ταξίδι μου στην Αμερική" ,θα αλλάξετε τον τίτλο ανάλογα με την κάθε φωτογραφία σας .

Να ευχαριστήσω δημόσια την παλιά φίλη Σοφία Καραγιάλη που μέσα από το ξεχωριστό blog της, http://bloggertrics.blogspot.com/, που όμοιό του δύσκολα θα ξαναυπάρξει, μας έχει εμπλουτίσει τις γνώσεις μας γύρω από το blog design. Σε ευχαριστούμε πολύ Σοφία και ελπίζουμε να ξανασυνεχίσεις τη θαυμάσια δουλειά σου. Και αυτή η ανάρτηση δεν θα υπήρχε δίχως εκείνη.

Πηγές: αρχικές πηγές από http://www.digitalia.be/software/slimbox2 και εικόνα και προσαρμογή κωδικών από http://bloggertrics.blogspot.com/2009/10/slimbox-202-jquery-132-bloggspot.html

Copyrights: http://www.bloggertips.gr/

Η ΝΕΑ ΜΟΔΑ ΤΩΝ DEAL SITES - ΨΩΝΙΣΤΕ ΕΞΥΠΝΑ ΜΕ ΕΩΣ 90% ΕΚΠΤΩΣΗ

PDF

Σίγουρα θα έχετε προσέξει ότι τους τελευταίους μήνες έχουν ξεφυτρώσει από παντού νέα sites που προσφέρουν αγαθά και υπηρεσίες με εκπτώσεις εως 90%. Είναι τα λεγόμενα deal sites, που έχουν γίνει μόδα σε όλη την Ευρώπη. Η ουσία είναι ότι αυτές οι μεγάλες εκπτώσεις ισχύουν μόνο για μια ημέρα.

Οι προσφερόμενες υπηρεσίες ή τα αγαθά με τις μεγάλες εκπτώσεις ανήκουν σε κάθε κατηγορία' εστιατόρια, κινηματογράφοι, ρούχα, κομμωτήρια, ηλεκτρονικά, πακέτα διακοπών, εισητήρια και ότι άλλο μπορείτε να φανταστείτε, σας περιμένει τώρα να το απολαύσετε πληρώνοντας εως και 90% λιγότερο από ότι θα δίνατε άλλη μέρα. Τώρα πια στην Ελλάδα υπάρχουν πολλά τέτοια sites, στα οποία θα κάνω μια αναφορά παρακάτω. Η διαδικασία είναι πολύ απλή: Επισκέπτεσαι το site, κάνεις μια γρήγορη εγγραφή (register), έπειτα εγγράφεσαι στο newsletter με το e-mail σου και θα λαμβάνεις κάθε μέρα στο e-mail σου τα καλύτερα deals!

Σας έχω ξεχωρίσει τα 5 καλύτερα sites στο είδος τους:

deal site 1

deal site 2

deal site 3

deal site 4

deal site 5

Εμπρός τι περιμένετε?

Ώρα να απολαύσετε τα καλύτερα σε ξεφτιλιστικές τιμές!

Κατά τη συγγραφή της παραπάνω ανάρτησης, άκουγα το παρακάτω τραγούδι:

Copyrights: http://www.bloggertips.gr/

25 sites για free chat box (ή comment box)

PDF

Το chat σε ένα blog είναι πολύ σημαντικό. Υπάρχει ενός είδος αλληλεπίδρασης του χρήστη με τη σελίδα. Η σελίδα αποκτά περισσότερη ζωντάνια. Οι επισκέπτες ενός blog μπορούν να ανταλάσσουν γνώμες μεταξύ τους και ο διαχειριστής του blog μπορεί να έρχεται σε άμεση επικοινωνία με τους επισκέπτες του, όποτε το επιθυμεί. Για αυτούς τους λόγους, καθιστάται αναγκαίο ένα chat box στη σελίδα σας.

Παρακάτω σας δίνω 25 sites με 25 διαφορετικά chat box από τα οποία μπορείτε να διαλέξετε αυτό που σας αρέσει και να το βάλετε στο site σας.
Σε όλα από τα παρακάτω sites μπορείτε να δημιουργήσετε δωρεάν ένα chat.
Σε πολλά από αυτά, πληρώνοντας ένα μικρό αντίτιμο, μπορείτε να κάνετε και premium λογαριασμό και να έχετε περισσότερες επιλογές στη διαμόρφωση του chat σας.
Για παράδειγμα ένας premium account στο cbox με κοστίζει 2,5 ευρώ τον μήνα.

Δείτε τα και επιλέξτε αυτό που σας ταιριάζει καλύτερα!

http://xat.com/ - πολύ καλό και μεγάλο
http://chatango.com/ - αυτό έχω εγώ' δείτε το δεξιά και αφήστε καμιά καλησπέρα :)
http://www.cbox.ws/ - πάρα πολύ καλό (για βοήθεια σχετικά με το cbox δείτε εδώ και εδώ)
http://www.shoutmix.com/ - δεν μου αρέσει αυτό
https://www.meebo.com/rooms/create/ - δεν θα το διάλεγα εγώ
http://chatroll.com/ - πάρα πολύ καλό