Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Δευτέρα, Ιουλίου 26

2

Μικρά tips για να επιταχύνετε τον χρόνο φόρτωσης του blog σας

website optimization
Κάντε το blog σας να πετάει με μερικά απλά βήματα!
Πως να κάνω το blog μου να να φορτώνει γρηγορότερα ?.. Αυτό είναι το ερώτημα που τίθεται από όλους τους χρήστες του blogger .
Η ταχύτητα φόρτωσης μιας ιστοσελίδας είναι πολύ σημαντικός παράγοντας για τους επισκέπτες αλλά και για την Google, επειδή η Google άλλαξε από τις αρχές του 2010 τον αλγόριθμο αναζήτησης ,στον οποίο κύριος επικεντρώνετε στον χρόνο που χρειάζεται για να φορτώσει μια σελίδα.
Μια σελίδα που αργεί να φορτώσει μπορεί να έχει ως αποτέλεσμα την απώλεια επισκεπτών αφού οι χρήστες είναι ανυπόμονοι και δεν θέλουν να περιμένουν πολύ μέχρι να δούνε το περιεχόμενο της ιστοσελίδας.

Υπάρχουν αρκετά εργαλεία για να δούμε πόσο γρήγορα φορτώνει μια ιστοσελίδα , όπως είδαμε και στην προηγούμενη ανάρτηση , αλλά και βελτιώσεις που μπορούμε να κάνουμε.

1. Pingdom Tools
Βάζουμε το URL της ιστοσελίδας μας και βλέπουμε πόσο χρόνο χρειάζεται για να φορτώσει.

2. Page speed (Firefox / Firebug Add-on)
Το Page speed έχει φτιαχτεί από την Google και μπορούμε να δούμε την ταχύτητα φόρτωσης αλλά και βελτιώσεις που μπορούμε να κάνουμε.

3. YSlow (Firefox / Firebug Add-on)
Ένα plugin από την Yahoo και κάνει την ίδια δουλειά με το Page Speed.

4. Εργαλεία για webmasters (Google)
Υπάρχει ειδική ενότητα που μπορείτε να δείτε την απόδοση του site σας.

Μερικά tips για να βελτιώσετε την ταχύτητα της ιστοσελίδας σας:


Περιορισμός γραφικών / εικονιδίων.



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

Ταχύτερη Εικόνες; Μείωσε το μέγεθος των αρχείων


Υπάρχουν πολλές υπηρεσίες εντελώς δωρεάν , Online optimizers εικόνας ώστε να μην χρειάζεται καν να εγκαταστήσετε τίποτα και είναι εξαιρετικά εύκολα στην χρήση !

Yahoo! Smush.it™ Σας επιτρέπει να ανεβάσετε κάποια αρχεία ή να δώσετε μια διεύθυνση URL .
Το εργαλείο στη συνέχεια λαμβάνει τις εικόνες, τους βελτιστοποιεί και σας λέει πόσα bytes μπορείτε να εξοικονομήσετε , χωρίς να μεταβληθεί ούτε στο ελάχιστο η ποιότητα της εικόνας .
Μπορείτε να κατεβάσετε ένα zip αρχείο με όλες τις εικόνες σας.

Online Image Optimizer Θα μειώσει σημαντικά το μέγεθος του αρχείου των gif , jpg , ή pngs σας και ούτε εσείς ή οι επισκέπτες σας θα μπορούν να δουν τη διαφορά , εκτός από μια σελίδα που φορτώνει πολύ πιο γρήγορα!

Για τα JPEG , δοκιμάστε JPEG Wizard, επίσης δωρεάν.

Αποθηκεύστε Όλες οι εικόνες σε GIF ή PNG


GIF σημαίνει " Graphics Interchange Format " και PNG σημαίνει " Portable Network Graphics " Και οι δύο αυτές μορφές είναι καλά συμπιεσμένες , μικρότερες σε μέγεθος και υποστηρίζονται ευρέως από όλα τα browsers.
Αλλά αν το μέγεθος σας ανησυχεί τότε το PNG συμπιέζετε πολύ καλύτερα από ό, τι το GIF . Σε μερικές περιπτώσεις μέχρι και 5-25% .

Χρησιμοποιώντας οποιαδήποτε από αυτές τις μορφές εικόνας θα μειωθεί κατά πολύ ο χρόνος φόρτωσης του blog σας κατά 60 %, δηλαδή 70- 90KB
Το μέγεθος είναι κατά προσέγγιση βέβαια , το πραγματικό μέγεθος εξαρτάται από τον αριθμό των εικόνων που χρησιμοποιείτε στην σελίδα σας .

Καθορίστε το height και width για κάθε σας εικόνα


Εδώ είναι ένα δείγμα ενός σωστά τοποθετημένου κώδικα για εικόνα με τα height και width tags :
< img src = " images / εικόνα μου.gif "border = "0" alt = " εικόνα μου "  width = " 125 " height = " 250 " />

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

Αποφεύγετε την χρήση του Flash περιεχομένου


Flash περιεχόμενο αυξάνει σημαντικά το loadtime του blog σας.
Αποφεύγοντας φλας και τα συναφή plugins μπορείτε να συμβάλλετε στην απόδοση του δικτυακού σας τόπου.
Flash είναι επίσης γνωστό ότι είναι πολύ κακό για SEO.

Αποφύγετε πάρα πολλές διαφημίσεις


Φροντίστε να μην εμφανίζονται πάρα πολλές διαφημίσεις στο ιστολόγιό σας.
Πολλές διαφημίσεις είναι γεμάτες από περιττό html περιεχόμενο και μπορούν να επηρεάσουν χρόνος φόρτωσης του δικτυακού σας τόπου σε μεγάλο βαθμό. Αν θέλετε οπωσδήποτε διαφημίσεις, τότε επιλέξτε το Google Adsense

Συμπιέστε τα CSS και Javascript αρχεία :


Μπορείτε να συμπιέσετε τα Javascript και τα Stylesheet που χρησιμοποιούνται στο θέμα σας.
Για να συμπιέσετε Javascript μπορείτε να χρησιμοποιήσετε ένα συμπιεστή Javascript Javascript compressor.
Για τα αρχεία CSS, μπορείτε να αφαιρέσετε τα σχόλια, και αφαιρέστε κενές γραμμές και διαστήματα . Η χρησιμοποιήστε το CSS Compressor , επίσης μπορείτε να συμπιέσετε τα CSS αρχεία σας με το CSS Optimizer.
Με τη χρήση αυτών των υπηρεσιών , μπορούν να αφαιρεθούν οι άχρηστοι κωδικοί , κενές ετικέτες κλπ , έτσι καθαρίζει ο κωδικός και η σελίδα φορτώνει πολύ πιο γρήγορα .

Απομακρύνουμε τα περίσσεια κενα  " Whitespace "


Whitespace είναι τα διαστήματα μεταξύ των κωδικών . Η εξάλειψη των περιττών tabs και των spaces μπορεί να βοηθήσει πολύ !
Καθαρίζοντας τον κωδικό σας από αυτά , μειώνετε κατά πολύ τα επιπλέον bytes από το συνολικό μέγεθος της σελίδας σας και θα επιταχύνετε το χρόνο φόρτωσης αρκετά.

Κρατήστε τον κώδικα σας Καθαρό


Εάν χρησιμοποιήσετε ένα WYSIWYG editor , τις περισσότερες φορές θα προσθέσει άχρηστο κώδικα στις σελίδες σας , για παράδειγμα , πολλές φορές θα μείνουν κενές ετικέτες (δηλ. <font> < / font > ) .
Η αν κάνετε αντιγραφή κι επικόλληση κάποιου περιεχομένου από κάποιο άλλο site στο δικό σας , τότε θα πρέπει να ξέρετε ότι δεν αντιγράφετε μόνο το περιεχόμενο . Μαζί με το περιεχόμενο αντιγράφετε και το στυλ της εκάστοτε σελίδας , γεμίζοντας το blog σας με άχρηστους κωδικούς.
Η εξάλειψη οποιασδήποτε από αυτές τις επιπλέον ετικέτες δεν θα επιταχύνει μόνο τον χρόνο φόρτωσης της σελίδας σας , αλλά θα βοηθήσει σημαντικά στην επικύρωση του HTML σας .

 Μειώστε τον αριθμό των αναρτήσεων που εμφανίζονται στην Κεντρική Σελίδα σας


Κάθε ανάρτηση που εμφανίζεται στην αρχική σελίδα σας πρέπει να φορτώνει μαζί με την ιστοσελίδα και αυτό θα καταστήσει την ιστοσελίδα σας να φορτώνει πολύ αργά .
Έτσι, αν μειωθεί ο αριθμός των αναρτήσεων στην αρχική σελίδα σας, τότε ο χρόνος φόρτωσης θα βελτιωθεί σημαντικά .
Εμφανίστε 3 με 5 αναρτήσεις στην αρχική σελίδα , με περίπου 600 λέξεις για κάθε ανάρτηση, είναι κατάλληλα για μια τέλεια ιστοσελίδα .

Μειώστε τα HTTP Requests


Αυτό σημαίνει ότι πρέπει να μειωθεί ο αριθμός των διακομιστών που απαιτεί να συνδεθεί μια ιστοσελίδα για να φορτώσει .
Με τη μείωση των εξαρτήσεων για εικόνες, stylesheets, και script μπορούμε να αποφύγουμε τη συμφόρηση που μπορεί να προκύψει μέχρι το browser να πάρει δεδομένα στο κατέβασμα (HTTP αιτήσεις) των εξωτερικών αρχείων μας . Κατά την κατασκευή ιστοσελίδων θα πρέπει να επιδιώξουμε να μειώσουμε τις εξαρτήσεις και αιτήσεις HTTP.

Αυτό μπορεί να γίνει με τους εξής τρόπους :

1 . Φιλοξενήστε όλα τα γραφικά και εικόνες μέσα στο blogger


Οι περισσότεροι από εσάς χρησιμοποιείτε Πρότυπα που δεν παρέχονται επίσημα από το Blogger . Αυτά Πρότυπα συχνά περιέχουν εικόνες που είναι αποθηκευμένες σε υπηρεσίες όπως TinyPic ή photobucket.
Όταν φορτώνει το blog σας , το πρόγραμμα περιήγησης πρέπει να συνδεθεί με όλους τους διακομιστές που φιλοξενούνται οι εικόνες σας , Ως αποτέλεσμα να οδηγηθεί σε τεράστια καθυστέρηση στο χρόνο φόρτωσης του blog σας .
Αυτό που πρέπει να κάνετε είναι να αποθηκεύσετε τις εικόνες στο εσωτερικό blogger και να αντικαταστήσετε όλες αυτές τις εικόνες με αυτά .
Το πλεονέκτημα είναι ότι το πρόγραμμα περιήγησης θα πρέπει να συνδεθεί μόνο με τον διακομιστή του blogger κατά τη φόρτωση εικόνων σας και έτσι εξοικονομείτε πολύ χρόνο


2. Αποφύγετε περιττά social media widgets.


Το Share του Facebook (που δείχνει τον αριθμό), το retweet και το widget με τα facebook fans , widget από BlogCatalog και mybloglog επηρεάζουν την ταχύτητα φόρτωσης .
Ενώ σε περίπτωση που κάποιο από αυτά έχει προβλήματα downtime θα επηρεάσει άμεσα και την ιστοσελίδα σας.

3. Αφαιρέστε περιττά Widgets / Scripts που δεν τα  χρειάζεστε

:
Υπάρχουν πολλά όμορφα widgets που κάνουν την ιστοσελίδα σας να δείχνουν διαδραστικά , αλλά την ίδια στιγμή θα επιβραδύνουν σημαντικά τον χρόνο φόρτωσης της σελίδας .
Γιατί ?.. επειδή , κάθε widget / script που περιέχουν αυτά τα widgets θα πρέπει να συνδεθούν με διάφορα servers για να λειτουργήσουν .
Έτσι , οι HTTP αιτήσεις σας θα είναι περισσότερες και θα οδηγήσουν σε αργή φόρτωση της ιστοσελίδας .

Για το λόγο αυτό, θα πρέπει να τροποποιήσετε τις ακόλουθες αλλαγές .

1] Αφαιρέστε τα ανεπιθύμητα Widgets , που καταλαμβάνουν περισσότερο φορτίο .
Η σελίδα σας δεν θα εμφανιστεί μέχρι τα φορτώσουν όλα τα scripts .
2] Αν θέλετε να κρατήσετε οποιοδήποτε από αυτά τα widgets , τότε να τα μετακινήσετε στο κάτω μέρος της σελίδας .
Γιατί ?.. επειδή , χρειάζονται πολύ χρόνο για να φορτώσουν αυτά τα scripts και αν τοποθετήσετε αυτά τα scripts στο χαμηλότερο σημείο της σελίδας ,τότε πρώτα θα φορτώσει η σελίδα σας και μετά όλα τα widget / script.

4. Αποθηκεύεται όλα τα JavaScript αρχεία Μέσα στο Blogger


Γιατί θα έπρεπε να συνδέεστε με εξωτερικούς χώρους για την αποθήκευση των JavaScript αρχείων σας , ενώ μπορείτε να τα αποθηκεύσετε εύκολα στον Blogger !
Αποθηκεύστε όλους τους JavaScript κωδικούς σας μέσα στο Πρότυπο σας ακριβώς πάνω από το
< / head> χρησιμοποιώντας τον παρακάτω κώδικα .

<script type='text/javascript'>
//<![CDATA[
Επικολλήστε το JavaScript κώδικα Εδώ 
//]]>
</script>

Το κείμενο με έντονα γράμματα είναι όπου μπορείτε να επικολλήσετε το JavaScript κώδικα που χρησιμοποιείτε στο πρότυπό σας σε σύνδεση σε εξωτερικό χώρο .

Αφαιρέστε ό, τι δε χρειάζεστε πραγματικά


Εντάξει , αν και αυτό μπορεί να ακούγεται προφανές ,μερικές φορές είναι το πιο δύσκολο πράγμα για τη δημιουργία ενός δικτυακού τόπου .
Δεν είναι ανάγκη να χρησιμοποιήσετε όλα τα fancy τέχνασμα που γνωρίζετε στην σελίδα σας .
Εικόνες , flash , τα αρχεία ήχου και πολλά JavaScript είναι πολύ εντυπωσιακά .. αλλά αναρωτιέμαι αν πραγματικά πρέπει να επιδείξετε όλα τα ταλέντα σας σε μια σελίδα .
Σταθείτε και κοιτάξτε με μια κριτική ματιά την ιστοσελίδα σας , μπορείτε να δείτε μερικά ειδικά εφέ που μπορεί να μην τα χρειάζεστε και μπορείτε να τα θυσιάσετε για να βελτιώσετε τον χρόνο φόρτωσης της σελίδας σας

Κατά μέσο όρο, για τη φόρτωση των σελίδων στον ιστότοπος σας χρειάζονται 0,8 δευτερόλεπτα (ενημερώθηκε στις 07 Μαρ 2010). Αυτός ο χρόνος είναι ταχύτερος από το 91% των ιστοτόπων.
Από τις διάφορες τεχνικές optimization θα έχετε την ευκαιρία να μάθετε καινούργια πράγματα και να βελτιώσετε την ταχύτητα της ιστοσελίδας σας. 

Give it a try λοιπόν !
Read More ►

Δευτέρα, Ιουλίου 19

5

Πόσος χρόνος απαιτείται για να φορτωσει πλήρως η ιστοσελίδα σας ?!!

CSS3 border radius
Δείτε τον χρόνο φόρτωσης της ιστοσελίδας σας

Βελτιστοποίηση του χρόνου φόρτωσης της ιστοσελίδας σας είναι απαραίτητο για να  διατήρησετε και να αυξήσετε τους επισκέπτες σας .  
Αν ο χρόνος που φορτώνει η σας σελίδες  είναι πολύ μεγάλος , τότε οι άνθρωποι εγκαταλείπουν απλά το site σας πριν καν φορτώσει ! 
 Με αυτό τον τρόπο, μπορείτε να χάσετε πολλούς  επισκέπτες .


Webwait είναι ένα εργαλείο το οποίο σας επιτρέπει  να δείτε πόσος χρόνος απαιτείται για να φορτώσει πλήρως η  ιστοσελίδα σας , ας μην ξεχνάμε ομως ,ότι μεγάλο ρόλο παίζει και  η ταχύτητα της σύνδεσης και ο υπολογιστής που χρησιμοποιούμε  .

Για να ξεκινήσετε απλά πληκτρολογήστε τη διεύθυνση URL μιας ιστοσελίδας, επιλέξτε τον αριθμό των calls / time intervals, και στη συνέχεια κάντε κλικ στην επιλογή "Time It!".
WebWait θα τρέξει ενα γρήγορο δοκιμαστικό και θα σας δώσει ένα μέσο χρόνο φόρτωσης της σελιδας .


Είναι πολύ χρήσιμο εργαλείο και  τώρα νομίζω ότι ήρθε η ώρα να βελτιστοποιήσουμε την σελιδα μας δεν νομίζετε ?!!!.....
Read More ►

Τρίτη, Ιουλίου 13

28

Αυτόματα Tabbed section στο sidebar σας

tabbedsection_sidebar
Δημιουργήστε αυτόματα Tabbed section στο sidebar

               Δείτε τα Tabs σε λειτουργία 
 

Μετά από πολλές ερωτήσεις που δέχτηκα, για το πως έβαλα τα Tabs που έχω στην πλαϊνή μου μπάρα , σήμερα αποφάσισα να δούμε, πως μπορούμε να δημιουργήσουμε ένα καινούργιο τμήμα στο sidebar μας .
Ένα Αυτόματο tabbed section , όπου μπορούμε να συμπεριλάβουμε διάφορα gadgets .

Για παράδειγμα , Αναγνώστες , αρχειοθήκη και ότι άλλο θέλετε εσείς !

Τα συγκεκριμένα Tabs χρησιμοποιούν την δυνατότητα variables , δηλαδή , περιλαμβάνει τη χρήση μεταβλητών που μας δίνει την δυνατότητα να επεξεργαστούμε τους χρωματικούς συνδυασμούς , από την καρτέλα ελέγχου του Blogger.

Ας δούμε τώρα πως θα το εγκαταστήσουμε στο blog μας :


1 . Συνδεθείτε στο Blogger λογαριασμό σας και πηγαίνετε Σχεδίαση >> Επεξεργασία HTML και πατήστε στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων 

2  . Εντοπίστε στο πρότυπό σας την ετικέτα </ head> και επικολλήστε τον παρακάτω κώδικα ακριβώς από πάνω :


<script type='text/javascript'> 
//<![CDATA[ 
document.write('<style type="text/css">.tabber{display:none;}<\/style>'); 
function tabberObj(argsObj) 
{ 
  var arg; 
  this.div = null; 
  this.classMain = "tabber"; 
  this.classMainLive = "tabberlive"; 
  this.classTab = "tabbertab"; 
  this.classTabDefault = "tabbertabdefault"; 
  this.classNav = "tabbernav"; 
  this.classTabHide = "tabbertabhide"; 
  this.classNavActive = "tabberactive"; 
  this.titleElements = ['h2','h3','h4','h5','h6']; 
  this.titleElementsStripHTML = true; 
  this.removeTitle = true; 
  this.addLinkId = false; 
  this.linkIdFormat = '<tabberid>nav<tabnumberone>'; 
  for (arg in argsObj) { this[arg] = argsObj[arg]; } 
  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi'); 
  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi'); 
  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi'); 
  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi'); 
  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi'); 
  this.tabs = new Array(); 
  if (this.div) { 
    this.init(this.div); 
    this.div = null; 
  } 
} 
tabberObj.prototype.init = function(e) 
{ 
  var 
  childNodes, 
  i, i2, 
  t, 
  defaultTab=0, 
  DOM_ul, 
  DOM_li, 
  DOM_a, 
  aId, 
  headingElement; 
  if (!document.getElementsByTagName) { return false; } 
  if (e.id) { 
    this.id = e.id; 
  } 
  this.tabs.length = 0; 
  childNodes = e.childNodes; 
  for(i=0; i < childNodes.length; i++) { 
    if(childNodes[i].className && 
       childNodes[i].className.match(this.REclassTab)) { 
      t = new Object(); 
      t.div = childNodes[i]; 
      this.tabs[this.tabs.length] = t; 
      if (childNodes[i].className.match(this.REclassTabDefault)) { 
    defaultTab = this.tabs.length-1; 
      } 
    } 
  } 
  DOM_ul = document.createElement("ul"); 
  DOM_ul.className = this.classNav; 
  for (i=0; i < this.tabs.length; i++) { 
    t = this.tabs[i]; 
    t.headingText = t.div.title; 
    if (this.removeTitle) { t.div.title = ''; } 
    if (!t.headingText) { 
      for (i2=0; i2<this.titleElements.length; i2++) { 
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0]; 
    if (headingElement) { 
      t.headingText = headingElement.innerHTML; 
      if (this.titleElementsStripHTML) { 
        t.headingText.replace(/<br>/gi," "); 
        t.headingText = t.headingText.replace(/<[^>]+>/g,""); 
      } 
      break; 
    } 
      } 
    } 
    if (!t.headingText) { 
      t.headingText = i + 1; 
    } 
    DOM_li = document.createElement("li"); 
    t.li = DOM_li; 
    DOM_a = document.createElement("a"); 
    DOM_a.appendChild(document.createTextNode(t.headingText)); 
    DOM_a.href = "javascript:void(null);"; 
    DOM_a.title = t.headingText; 
    DOM_a.onclick = this.navClick; 
    DOM_a.tabber = this; 
    DOM_a.tabberIndex = i; 
    if (this.addLinkId && this.linkIdFormat) { 
      aId = this.linkIdFormat; 
      aId = aId.replace(/<tabberid>/gi, this.id); 
      aId = aId.replace(/<tabnumberzero>/gi, i); 
      aId = aId.replace(/<tabnumberone>/gi, i+1); 
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, '')); 
      DOM_a.id = aId; 
    } 
    DOM_li.appendChild(DOM_a); 
    DOM_ul.appendChild(DOM_li); 
  } 
  e.insertBefore(DOM_ul, e.firstChild); 
  e.className = e.className.replace(this.REclassMain, this.classMainLive); 
  this.tabShow(defaultTab); 
  if (typeof this.onLoad == 'function') { 
    this.onLoad({tabber:this}); 
  } 
  return this; 
}; 
tabberObj.prototype.navClick = function(event) 
{ 
  var 
  rVal, 
  a, 
  self, 
  tabberIndex, 
  onClickArgs; 
  a = this; 
  if (!a.tabber) { return false; } 
  self = a.tabber; 
  tabberIndex = a.tabberIndex; 
  a.blur(); 
  if (typeof self.onClick == 'function') { 
    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event}; 
    /* IE uses a different way to access the event object */ 
    if (!event) { onClickArgs.event = window.event; } 
    rVal = self.onClick(onClickArgs); 
    if (rVal === false) { return false; } 
  } 
  self.tabShow(tabberIndex); 
  return false; 
}; 
tabberObj.prototype.tabHideAll = function() 
{ 
  var i; 
  for (i = 0; i < this.tabs.length; i++) { 
    this.tabHide(i); 
  } 
}; 
tabberObj.prototype.tabHide = function(tabberIndex) 
{ 
  var div; 
  if (!this.tabs[tabberIndex]) { return false; } 
  div = this.tabs[tabberIndex].div; 
  if (!div.className.match(this.REclassTabHide)) { 
    div.className += ' ' + this.classTabHide; 
  } 
  this.navClearActive(tabberIndex); 
  return this; 
}; 
tabberObj.prototype.tabShow = function(tabberIndex) 
{
  var div; 
  if (!this.tabs[tabberIndex]) { return false; } 
  this.tabHideAll(); 
  div = this.tabs[tabberIndex].div; 
  div.className = div.className.replace(this.REclassTabHide, ''); 
  this.navSetActive(tabberIndex); 
  if (typeof this.onTabDisplay == 'function') { 
    this.onTabDisplay({'tabber':this, 'index':tabberIndex}); 
  } 
  return this; 
}; 
tabberObj.prototype.navSetActive = function(tabberIndex) 
{
  this.tabs[tabberIndex].li.className = this.classNavActive; 
  return this; 
}; 
tabberObj.prototype.navClearActive = function(tabberIndex) 
{
  this.tabs[tabberIndex].li.className = ''; 
  return this; 
}; 
function tabberAutomatic(tabberArgs) 
{ 
  var 
    tempObj, 
    divs, 
    i; 
  if (!tabberArgs) { tabberArgs = {}; } 
  tempObj = new tabberObj(tabberArgs); 
  divs = document.getElementsByTagName("div"); 
  for (i=0; i < divs.length; i++) { 
    if (divs[i].className && 
    divs[i].className.match(tempObj.REclassMain)) { 
      tabberArgs.div = divs[i]; 
      divs[i].tabber = new tabberObj(tabberArgs); 
    } 
  } 
  return this; 
} 
function tabberAutomaticOnLoad(tabberArgs) 
{ 
  var oldOnLoad; 
  if (!tabberArgs) { tabberArgs = {}; } 
  oldOnLoad = window.onload; 
  if (typeof window.onload != 'function') { 
    window.onload = function() { 
      tabberAutomatic(tabberArgs); 
    }; 
  } else { 
    window.onload = function() { 
      oldOnLoad(); 
      tabberAutomatic(tabberArgs); 
    }; 
  } 
} 
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */ 
if (typeof tabberOptions == 'undefined') { 
    tabberAutomaticOnLoad(); 
} else { 
  if (!tabberOptions['manualStartup']) { 
    tabberAutomaticOnLoad(tabberOptions); 
  } 
} 
//]]> 
</script>

  

3 . Τώρα εντοπίστε στο πρότυπό σας την ετικέτα ]]></b:skin> και επικολλήστε τους παρακάτω κωδικούς ακριβώς από πάνω :


/*-- tabbed section starts --- */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/*-- tabbed section ends---*/


4 .  Αποθηκεύετε όλες τις αλλαγές που έχετε κάνει μέχρι τώρα .

5 . Αφού σώσατε τις αλλαγές που κάνατε , τώρα θα εντοπίσετε στο πρότυπό σας το τμήμα οπού περιλαμβάνονται τα Variable definitions
Πάντα αυτό το τμήμα βρίσκετε στο ξεκίνημα του προτύπου μας .

Θα μοιάζει κάπως έτσι :



Βρείτε το σημείο που τελειώνουν τα Variable definitions , ( πάνω από το σύμβολο  */  ) ,αντιγράψτε και επικολλήστε τον παρακάτω κώδικα  :


<Variable name="tbbxbgcolor" description="Tab box Background Color"
type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" 
type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" 
type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" 
type="color" default="#5588aa" value="#5588aa">


6 .  Για να ενεργοποιήσετε τα Tabs , εντοπίστε στο πρότυπό σας την γραμμή :

<div id='sidebar-wrapper'>

Και επικολλήστε από κάτω τον παρακάτω κώδικα :


<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>
</div>


Τώρα αποθηκεύετε τις αλλαγές !

7 . Εφόσον έχετε τελειώσει την εγκατάσταση , τώρα πηγαίνετε στην καρτέλα Στοιχεία Σελίδας και βλέπετε στο sidebar σας , αν υπάρχουν  Προσθήκη gadget επιλογές για τα Tabs .

Θα φαίνονται κάπως έτσι :



Τώρα μετακινήστε μέσα στις καρτέλες των tabs όποια gadgets θέλετε να συμπεριλάβετε και αποθηκεύετε .

Όταν θα μεταφερθείτε στην αρχική σας σελίδα θα δείτε να φορτώνουν τα Tabs  .

Για να προσαρμόσετε τους χρωματικούς συνδυασμούς των Tabs :



 Πηγαίνετε στην καρτέλα Σχεδιαστής προτύπων και  από εκεί επιλέγετε την ετικέτα Προηγμένη .
Κοιτάξτε προς το τέλος των επιλογών και εκεί θα δείτε τις επιλογές για τα Tabs .



Επιλέγετε από εκεί τους χρωματικούς συνδυασμούς που ταιριάζουν στο πρότυπό σας και αποθηκεύετε τις αλλαγές !

Αυτό ήτανε όλο ... Τώρα έχετε ένα υπέροχο Αυτόματο tabbed section στο sidebar σας !

Καλή επιτυχία σε όλους !!
Read More ►

Δευτέρα, Ιουλίου 12

3

Show/Hide HTML στοιχεία με JavaScript



togglecomments
Show/Hide HTML στοιχεία με JavaScript

Σήμερα θα δούμε πως μπορούμε να κάνουμε απόκρυψη και εμφάνιση ενός HTML στοιχείου πολύ απλά χρησιμοποιώντας JavaScript .
Ένα πολύ χρήσιμο trick , ειδικά για αυτούς που χρησιμοποιούν πολλά HTML/JavaScript gadgets στην πλαϊνή τους μπάρα .
Με αυτό το Script μπορούμε να αποκρύψουμε τα gadgets μας ,εξοικονομώντας έτσι χώρο και τα gadgets μας θα εμφανιστούν μόνο όταν κάνουμε κλικ στον τίτλο του gadgets μας .

Δείτε το σε λειτουργία στην πλαϊνή μου μπάρα [ +/- Τα banners των φίλων μου! ] , για να καταλάβετε καλύτερα για τι πρόκειται .

Για να το εγκαταστήσουμε στο blog μας ακολουθούμε τα εξής απλά βήματα :

ΒΗΜΑ 1ο :

1 . Συνδεθείτε στο Blogger λογαριασμό σας και πηγαίνετε  Σχεδίαση >> Επεξεργασία HTML και πατήστε στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων

2 . Βρείτε στο πρότυπό σας την ετικέτα  ]]></b:skin>  και επικολλήστε τις παρακάτω γραμμές του κώδικα ακριβώς από πάνω :


.commenthidden {display:none}
.commentshown {display:inline}

 3 . Τώρα βρείτε στο πρότυπό σας την ετικέτα  </head> και επικολλήστε τον παρακάτω κώδικα ακριβώς από πάνω

<!-- togglecomments script --> 
<script type='text/Javascript'>
function togglecomments (postid) { 
var whichpost = document.getElementById(postid); 
if (whichpost.className==&quot;commentshown&quot;) { whichpost.className=&quot;commenthidden&quot;; } else { whichpost.className=&quot;commentshown&quot;; } 
}  
</script>

 ΒΗΜΑ 2ο :

Τώρα , όποιο HTML/JavaScript gadget  θέλουμε να αποκρύψουμε απλά θα το εισάγουμε  ανάμεσα στους παρακάτω κωδικούς :

<a aiotitle="click to expand" href="javascript:togglecomments(' Ε δω το id του gadget ')" 
><h2> +/- ΕΔΩ Ο ΤΙΤΛΟΣ ΤΟΥ GADGET ΜΑΣ </h2></a><br /> 
<div class="commenthidden" id="Εδω παλι το ιδιο  id του gadget  "> 

 Εδώ θα εισάγουμε τον κώδικα για το HTML/JavaScript gadget    

</div>

 Δείτε ένα παράδειγμα χρήσης για καλύτερη κατανόηση :

 Ας πούμε ότι θέλω να αποκρύψω το ShoutMix gadget , τότε ο κώδικας μου θα μοιάζει κάπως έτσι : 


<a aiotitle="click to expand" href="javascript:togglecomments(' ShoutMix ')">
<h2>+/- Πείτε τα όλα εδώ  ! </h2></a><br /> 
<div class="commenthidden" id=" ShoutMix ">

<!-- Begin ShoutMix - http://www.shoutmix.com -->  
 <iframe scrolling="auto" width="300" frameborder="0"  
src="XXXXX" height="400" title="χχχ">  
 <a href="http://shoutmix./?χχχχ">View shoutbox</a> </iframe> <br /> 
 <a href="http://www.shoutmix " title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a> 
 <br /> <!-- End ShoutMix -->

</div>


Τώρα αποθηκεύουμε το HTML/JavaScript gadget μας και έχουμε τελειώσει !

Αυτό είναι όλο !!!  Εύκολο δεν είναι ?!!

Σημαντικό :  Στο παραθυράκι Διαμόρφωση HTML/JavaScript  δεν θα εισάγουμε ξανά τίτλο για το HTML/JavaScript gadget μας .
Αφήνουμε το πεδίο για τον τίτλο κενό ! Γιατί έχουμε ορίσει ήδη τίτλο μέσα στον κώδικα που χρησιμοποιήσαμε !




Για όποιες  απορίες , αφήστε το σχόλιό σας !

Καλή επιτυχία σε όλους  ...


Read More ►

Σάββατο, Ιουλίου 10

4

Royale Noir - Stylish dark Blogger template





Έχει περάσει καιρός απο τότε που κυκλοφόρησα ενα Blogger πρότυπο .
Σήμερα όμως , έχω να σας παρουσιάσω κάτι ιδιαίτερο για μένα , γιατί είναι το πρώτο πρότυπο για την Blogger πλατφόρμα , που σχεδιάστηκε και δημιουργήθηκε απο μένα .

Royale Noir είναι ένα σκούρο μοντέρνο πρότυπο με 2 στήλες , με widgetized τμήματα στο υποσέλιδο και στην πλαϊνή μπάρα, για οποιαδήποτε gadgets θέλετε να συμπεριλάβετε.
Αυτό το πρότυπο χρησιμοποιεί αρκετά CSS3 στοιχεία, για να δημιουργηθεί πιο καινοτόμος σχεδιασμός χωρίς τη χρήση εικόνων φόντου .

Συμβατότητα :

Το έχω δοκιμάσει σε Internet Explorer (7-8), Opera και Safari.
Ενώ οι στρογγυλεμένες γωνίες και text-shadow αποτελέσματα ενδεχετε να μην λειτουργούν στα προγράμματα περιήγησης που δεν υποστηρίζουν CSS3, χωρίς όμως να δημιουργούν άσχημα η ανεπιθύμητα αποτελέσματα.

Creative Commons Attribution

Αυτό το έργο διανέμεται υπό την Creative Commons Attribution 3.0 License που σημαίνει ότι είστε ελεύθεροι να χρησιμοποιήσετε , να διανέμετε , να παρουσιάσετε στο κοινό το Έργο , να το τροποποιήσετε για οποιοδήποτε σκοπό. Με μόνη προϋπόθεση να μην αφαιρεθούν οι σύνδεσμοι προς δημιουργούς από το footer .
Δε μπορείτε να χρησιμοποιήσετε το έργο αυτό για εμπορικούς σκοπούς.


Κύρια χαρακτηριστικά του Royale Noir
  • Fixed width
  • 2 columns
  • Widget ready
  • Modern  theme
  • 125x125 Banners Ready
  • Όμορφα σχεδιασμένο Comment Section 
  • Αυτόματα Sidebar tabs 
  • Page Navigation
Έχω προσπαθήσει να μην επιβαρω πολυ αυτό το σχέδιο με πολλά χαρακτηριστικά γνωρίσματα , γιατί θα ήθελα να προσφέρει μια καθαρή σχεδίαση που φορτώνει αρκετά γρήγορα και μπορεί εύκολα να προσαρμοστεί για να τις ιδιαίτερες προτιμήσεις σας.

Ρυθμίσεις


Για να ρυθμίσετε το Header NavBar :


1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
 

<!--Navigation Menu-->

 <div id='menu_navigation'> 
 <ul class='menu'>
           <li><a class='on' href='/'>Home</a></li>
    <li class='cat-item-1'><a href='YOUR-LINK-HERE' title='Text 1'>YOUR Text</a>
         </li>
    <li class='cat-item-2'><a href='YOUR-LINK-HERE' title='Text 2'>YOUR Text</a>
        </li>
           <li class='cat-item-3'><a href='YOUR-LINK-HERE' title='Text 3'>YOUR Text</a>
        </li>
    <li class='cat-item-5'><a href='YOUR-LINK-HERE' title='Text 4'>YOUR Text</a>
       </li>
           <li class='cat-item-6'><a href='YOUR-LINK-HERE' title='Text 5'>YOUR Text HERE</a>
       </li>
    <li class='cat-item-7'><a href='YOUR-LINK-HERE' title='ΑΡΧΕΙΑ'>ΑΡΧΕΙΑ</a>
       </li>
    <li class='cat-item-8'><a href='feeds/posts/default' title='Subscribe to our feeds'>Post RSS</a>
       </li>
    <li class='cat-item-9'><a href='feeds/comments/default' title='Subscribe to our Atom feeds'>RSS Atom</a>
       </li>
    </ul>      
    </div> 
<!--End Navigation Menu-->  

2 . Και αλλάξτε τα url με τα δικά σας .

Για να ρυθμίσετε τα αυτοματα Sidebar tabs :


<!-- Tabs -->
<div class='widgets' id='tabzine'>
<ul class='tabnav'>
<li class='Foll'><a href='#tab1'>Followers</a></li>
<li class='Σχολ'><a href='#tab2'>Σχόλια</a></li>
<li class='Προσφ'><a href='#tab3'>Πρόσφατα</a></li>

Απλά αλλάξτε τα σημεία με έντονο κόκκινο χρώμα με τις ονομασίες απο τα gadgets που θα εισάγετε στα tabs .


Για να ρυθμίσετε το Comment Reply Option :


1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply]</a></span>

2 . Και αλλάξτε το YOUR-BLOG-ID με το ID του blog σας
3 . Για να βρείτε το ID του blog σας , απλά πατήστε Ανάρτηση -> Νέα Ανάρτηση και δείτε πάνω στην σελίδα το addres bar, εκεί θα δείτε κάτι σαν αυτό : http://blogger.com/post-create.g?blogID= χχχχχχχχχχχχ




Αντιγράφετε τα νούμερα ( χχχχχχχχχχχχ ) που θα δείτε στο τέλος και αντικαταστήστε τοYOUR-BLOG-ID με το ID του blog σας 


Για να εισαγετε gadgets στα tabs : 



Αυτό θα το κάνετε κανονικά , όπως θα το κάνατε αν θέλατε να εισάγετε στο  πρότυπό σας κάποιο gadget .
Απλά πατήστε Προσθήκη gadget και εισάγετε όποιο gadget θέλετε, η μετακινήστε στα Tabs απο οποιοδήποτε σημείο του προτύπου κάποια gadget .

Δείτε την φωτογραφία για να καταλάβετε καλύτερα :


Για να ρυθμίσετε τα 125x125 Banners:


1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :


<div class='ads125'>
 <a href='YOUR-LINK-HERE'><img alt='Ad' src='http://3.bp.blogspot.com/_Q6tRnBVZnko/TAY3Ipw0VAI/AAAAAAAAA84/Uq5ezql5BJg/s1600/33.jpg'/></a>
 <a href='YOUR-LINK-HERE'><img alt='Ad' src='http://3.bp.blogspot.com/_Q6tRnBVZnko/TAY3Ipw0VAI/AAAAAAAAA84/Uq5ezql5BJg/s1600/33.jpg'/></a>
 <a href='YOUR-LINK-HERE'><img alt='Ad' src='http://3.bp.blogspot.com/_Q6tRnBVZnko/TAY3Ipw0VAI/AAAAAAAAA84/Uq5ezql5BJg/s1600/33.jpg'/></a>
 <a href='YOUR-LINK-HERE'><img alt='Ad' src='http://3.bp.blogspot.com/_Q6tRnBVZnko/TAY3Ipw0VAI/AAAAAAAAA84/Uq5ezql5BJg/s1600/33.jpg'/></a>
 <a href='YOUR-LINK-HERE'><img alt='Ad' src='http://3.bp.blogspot.com/_Q6tRnBVZnko/TAY3Ipw0VAI/AAAAAAAAA84/Uq5ezql5BJg/s1600/33.jpg'/></a>
 <a href='YOUR-LINK-HERE'><img alt='Ad' src='http://3.bp.blogspot.com/_Q6tRnBVZnko/TAY3Ipw0VAI/AAAAAAAAA84/Uq5ezql5BJg/s1600/33.jpg'/></a>
</div>
<!-- /ADS ends Here-->

2 . Και αλλάξτε τα links με τα δικά σας .

Για να ενεργοποιήσετε τα post share buttons :


 Πηγαίνετε   Σχεδίαση >> Στοιχεία Σελίδας και στο πλαίσιο Αναρτήσεις ιστολογίου (ακριβώς απο κάτω ) πατήστε  Επεξεργασία  .


Θα ανοίξει ενα παραθυράκι Διαμόρφωση αναρτήσεων ιστολογίου  και εκει επιλέξτε Εμφάνιση κουμπιών κοινής χρήσης 
 

Για να ρυθμίσετε το Sidebar Follow :


1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :

<!-- /Follow -->
<div class='follow'>
    <img alt='rss' height='39' src='http://3.bp.blogspot.com/_Q6tRnBVZnko/TAATHaHz5JI/AAAAAAAAA5k/gEdU67ojadQ/s320/follow.png' width='93'/>
<!-- /RSS -->
    <a href='/feeds/posts/default'><img alt='rss' height='48' src='http://4.bp.blogspot.com/_Q6tRnBVZnko/TAATMvSkFmI/AAAAAAAAA50/tyzGob0-VDg/s1600/rss.png' width='48'/></a>
<!-- /Twitter -->
    <a href='http://twitter.com/bloggertrics'><img alt='twitter' height='48' src='http://4.bp.blogspot.com/_Q6tRnBVZnko/TAATP4QWpfI/AAAAAAAAA58/Ve7xjyyQfAQ/s320/twit.png' width='48'/></a>
<!-- /Email_RSS -->
 <a href='http://feedburner.google.com/fb/a/mailverify?uri=bloggertrics&amp;loc=en_US'><img alt='mail' height='48' src='http://2.bp.blogspot.com/_Q6tRnBVZnko/TATdqHr3x5I/AAAAAAAAA6U/JXUAv1cLBmc/s1600/1268343221_Social_Email_RSS.png' width='48'/></a>
 </div>           
                   

α )  Αλλάξτε το link http://twitter.com/bloggertrics με το twitter url σας .
β )  Στο Email_RSS βρείτε το σημείο bloggertrics και αλλάξτε το με το Email feed username σας

Για να ρυθμίσετε το Blogger date calendar  :


Πηγαίνετε Ρυθμίσεις -> Διαμόρφωση -> Μορφή Timestamp και επιλέξτε την μορφή :




Αν αντιμετωπίσετε κάποιο πρόβλημα η για όποιες απορίες σας ,παρακαλώ αφήστε τα σχόλιά σας .
Read More ►

0

Modern feel - Blogger Template






Modern Feel είναι ένα ελεύθερο Modern Premium multi purpose Blogger πρότυπο
Ένα πρότυπο με μοντέρνο σχεδιασμό , όπως μπορείτε να δείτε , με απαλά ζεστά χρώματα :
  • Fixed width
  • 2 columns
  • Widget ready
  • Modern multi purpose theme
  • 125x125 Banners Ready
  • Πανέμορφα σχεδιασμένο Comment Section
Wordpress Theme Design από www.thebookish.info και μετατροπή για blogger έγινε από εμένα .

Αυτό το έργο διανέμεται υπό την Creative Commons Attribution 3.0 License που σημαίνει ότι είστε ελεύθεροι να χρησιμοποιήσετε , να διανέμετε , να παρουσιάσετε στο κοινό το Έργο , να το τροποποιήσετε για οποιοδήποτε σκοπό. Με μόνη προϋπόθεση να μην αφαιρεθούν οι σύνδεσμοι προς δημιουργούς από το footer .
Δε μπορείτε να χρησιμοποιήσετε το έργο αυτό για εμπορικούς σκοπούς.

ρυθμίσεις


Για να ρυθμίσετε το Header NavBar :
1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :

<!-- Header NavBar -->
 <ul>
      <li class='first'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
     <li class='page_item page-item-2'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Post RSS'>Post RSS </a></li>
      <li class='page_item page-item-3'><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='RSS Atom'> RSS Atom</a></li>
      <li class='page_item page-item-4'><a href='#' title='About'>About</a></li>
      <li class='page_item page-item-5'><a href='#' title='Edit'>Edit</a></li>
      <li class='page_item page-item-6'><a href='#' title='Edit 2'>Edit 2</a></li>            
                   </ul>
                         <!-- Header NavBar Ends-->            
                   

2 . Και αλλάξτε τα url με τα δικά σας .

Για να ρυθμίσετε τα 125x125 Banners:

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :


<!-- 125X125 AdBar-->
<ul class='adBar clearfix'>
    <li><a href='YOUR-LINK-HERE'><img alt='' src='http://1.bp.blogspot.com/_Q6tRnBVZnko/S-b_bftfxYI/AAAAAAAAAzs/gEGnGy6D5-Y/s1600/28.jpg'/></a></li>
    <li><a href='YOUR-LINK-HERE'><img alt='' src='http://1.bp.blogspot.com/_Q6tRnBVZnko/S-b_bftfxYI/AAAAAAAAAzs/gEGnGy6D5-Y/s1600/28.jpg'/></a></li>
    <li><a href='YOUR-LINK-HERE'><img alt='' src='http://1.bp.blogspot.com/_Q6tRnBVZnko/S-b_bftfxYI/AAAAAAAAAzs/gEGnGy6D5-Y/s1600/28.jpg'/></a></li>
    <li><a href='YOUR-LINK-HERE'><img alt='' src='http://1.bp.blogspot.com/_Q6tRnBVZnko/S-b_bftfxYI/AAAAAAAAAzs/gEGnGy6D5-Y/s1600/28.jpg'/></a></li>
    </ul>

2 . Και αλλάξτε τα links με τα δικά σας .

Για να ενεργοποιησετε τα post share buttons :

 Πηγαινετε  Σχεδίαση >> Στοιχεία Σελίδας και στο πλαισιο Αναρτήσεις ιστολογίου (ακριβος απο κατω ) πατηστε  Επεξεργασία  .



Θα ανοιξει ενα παραθυρακι Διαμόρφωση αναρτήσεων ιστολογίου  και εκει επιλεξτε Εμφάνιση κουμπιών κοινής χρήσης 
 

Για να ρυθμίσετε τις Ετικέτες :

Για να διασφαλυσετε οτι οι ετικετες θα εμφανιστουν σωστα απλα ακολουθηστε τα εξης βηματα :

1 . Πατηστε το εικονιδιο επεξεργασιας Διαμόρφωσης Ετικετών



  οταν θα ανοιξει το παραθυρακι επιλογων, καταργηστε την επιλογη Προβολή αριθμού αναρτήσεων ανά ετικέτα και αποθηκευετε το gadget


Αν χρειαστείτε οποιαδήποτε βοήθεια αφήστε το σχόλιο σας .
.
Read More ►

Πέμπτη, Ιουλίου 8

8

Digg-Digg social bookmarking widget για Blogger


Digg-Digg social bookmarking widget
Digg-Digg social bookmarking widget για Blogger

 Πριν από κάποιες μέρες σερφάροντας στο Διαδίκτυο βρήκα ένα πολύ όμορφο social bookmarking widget , το οποίο είναι WordPress plugin και ονομάζετε Digg-Digg ! ( Για όσους χρησιμοποιούν WordPress , μπορούν να το κατεβάσουν εδώ )
Λοιπόν , μου τράβηξε την προσοχή και άρεσε τόσο πολύ που αποφάσισα να πειραματιστώ και να φτιάξω κάτι παρόμοιο για την Blogger πλατφόρμα .

Το συγκεκριμένο social bookmarking widget έχει διάφανο φόντο ,ώστε να ταιριάζει με όλα τα πρότυπα και περιλαμβάνει όλες τις πιο δημοφιλείς social bookmarking υπηρεσίες , επίσης έχω προσθέσει  ένα κουμπί και πατώντας το μπορείτε  να βρείτε ακόμη περισσότερες  social bookmarking υπηρεσίες   

Δείτε το αποτέλεσμα σε λειτουργία εδώ


Για να το εγκαταστήσετε στο blog σας :

1 . Πηγαίνετε Σχεδίαση >> Επεξεργασία HTML και πατήστε στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων

2 . Βρείτε στο πρότυπό σας την ετικέτα  ]]></b:skin>  και κολλήστε τον παρακάτω κώδικα ακριβώς από πάνω :


/* Postshare-Box by bloggertrics
----------------------------------------------- */
#postshare {
left:0;
position:fixed;
top:700px;
}
#postshare_Box {
left:0;
position:fixed;
top:700px;
width:80px;
}
#share_butt {
border-top-right-radius:8px;
border-bottom-right-radius:8px;
-moz-border-radius-topright:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-top-right-radius:8px;
-webkit-border-bottom-right-radius:8px;
background:rgba(13, 13, 13, 0.2);
border:1px solid rgba(0,0,0, 0.5);
bottom:40px;
margin-top:10px;
position:fixed;
width:70px;
}
#butt {margin:7px;}

div.devid{background-color:rgba(0,0,0 ,0.5); height:1px; width:38px; margin:5px auto;}

Τώρα βρείτε την ετικέτα   <body>  και κολλήστε ακριβώς από κάτω τον παρακάτω κώδικα  :


<!-- Postshare-Box by bloggertrics.blogspot.com start -->
  <div id='postshare'>
<div id='postshare_Box'>
<div id='share_butt'>
<div class='butt'>
<a class='google-buzz-button' data-button-style='normal-count' data-locale='el' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</div>
<div class='devid'/>
<div class='butt'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='devid'/>
<div class='butt'>
<script src='http://bloggertrics.googlecode.com/files/fshare.js'/>
<div class='clear'/></div>
<div class='devid'/>
<div class='butt'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
<div class='devid'/>
<div class='butt'><a class='DiggThisButton'/><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>
<div class='devid'/>

<div class='butt'>
<a class='addthis_button_more'><img alt='More' height='20' src='http://s7.addthis.com/static/t00/logo1414.gif' width='20'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a65e1d93cd75e94' type='text/javascript'/>
<span style='font-size:10px;'> <a href='http://bloggertrics.blogspot.com/2010/07/digg-digg-social-bookmarking-widget.html' target='_blank'>Take This</a></span>
</div>
</div>
</div>
Αποθηκεύετε το πρότυπό σας και είστε έτοιμοι να μοιραστείτε τα άρθρα σας με όλο το κόσμο. Σε περίπτωση που αντιμετωπίσετε κάποιο πρόβλημα η έχετε κάποια ερώτηση αφήστε το σχόλιό σας !
Read More ►

8

Και άλλο βραβείο !!!



Καλησπέρα σε όλους !!!

Σας άφησα να ξεκουραστείτε από μένα χι χι ....για λίγες μέρες και αφού έκανα τα μπανακια μου, επιστρέφω δριμύτερη με ένα πολύ όμορφο βραβείο από την Λένα και το Potpouriart .
Τους ευχαριστώ μέσα από την καρδιά μου που με τίμησαν με  το βραβείο του καλύτερου blog !

Κ' εγώ με την σειρά μου , (όπως έμαθα πρόσφατα από την Λένα , ομολογώ ότι δεν το ήξερα ) πρέπει να το δώσω σε άλλα blogs όπως ορίζουν "οι κανόνες "  .

Ή επιλογή ήταν πολύ δύσκολη , επειδή όλα τα blog είναι το κάθε ένα ξεχωριστό και μοναδικό και όλα είναι εξίσου αξιόλογα , για αυτό αποφάσισα να δώσω βραβείο σε πολλά blog τα οποία είναι τα εξής:



Ξέρω ότι υπάρχουν και πολλά άλλα αξιόλογα blogs  και λυπάμαι που δεν μπορώ να το δώσω σε όλους σας ....

Read More ►

Παρασκευή, Ιουλίου 2

8

Ενσωματομενα Blogger Stats απο το Blogger in Draft


CSS3 border radius
Blogger Stats από το Blogger in Draft

 Σήμερα, μπαίνοντας στο Blogger Λογαριασμό μου, είδα μια ευχάριστη έκπληξη.
 Είχε προστεθεί μια νέα καρτέλα .
Αναφέρομαι βέβαια, στην καρτέλα  Στατιστικές


 Όπως χαρακτηριστά αναφέρει το Blogger :

Παρά το γεγονός ότι κάποιοι από εσάς μπορεί να χρησιμοποιείτε Google Analytics ή άλλα εργαλεία τρίτων για να παρακολουθείτε την κυκλοφορία του blog σας , πολλοί από εσάς ζήτησαν μια ευκολότερη στη χρήση , πλήρως ενσωματωμένο stats χαρακτηριστικό για το Blogger .
Και συγκινημένοι σας αναγγείλουμε ότι το Blogger in Draft έχει πλέον ενσωματωμένα στατιστικά. 

 Πιστεύω , ότι μετά από αρκετές νέες δυνατότητες που έχει προσθέσει το Blogger , αυτό το χαρακτηριστικό είναι το πιο σημαντικό και το πιο χρήσιμο !
 Αυτη η νέα δυνατότητα προς το παρόν μπορεί να χρησιμοποιηθεί μόνο από το Πίνακα Ελέγχου του Πρόχειρο Blogger
Για να αρχίσετε να τα χρησιμοποιείτε ,απλά πηγαίνετε στο Πρόχειρο Blogger , και θα παρατηρήσετε μια νέα καρτέλα  " Στατιστικά ".
Δεν χρειάζεται να εγκαταστήσετε ή να ρυθμίσετε τίποτα για να αρχίσετε την χρήση των Stats .

Το πιο σημαντικό πράγμα στα νέα Blogger Stats είναι ότι παρακολουθεί και αναλύει την κυκλοφορία των επισκεπτών σας , σχεδόν σε πραγματικό χρόνο .
Μπορείτε να δείτε ποιες αναρτήσεις δέχονται όλο και πιο πολλές επισκέψεις και ποιοι άλλοι δικτυακοί τόποι στέλνουν κυκλοφορία προς το ιστολόγιό σας τώρα .
Φυσικά , πολλά περισσότερα δεδομένα κίνησης και στοιχεία είναι διαθέσιμα όπως βλέπετε .



Υπάρχει επίσης δυνατότητα να παρακολουθείται πολλά περισσότερα δεδομένα , όπως τις πιο δημοφιλείς λέξεις-κλειδιά αναζήτησης που αποστέλλουν οι επισκέπτες στο blog σας , από ποια χώρα έρχονται οι επισκέπτες σας , και ποια προγράμματα περιήγησης χρησιμοποιούν.
Ουσιαστικά , με τα νέα Στατιστικά , ξέρετε τι συμβαίνει με το blog σας κάθε στιγμή  .




 Επειδή Στατιστικά είναι μέρος του Blogger , δεν χρειάζεται να εγγραφείτε για οποιαδήποτε άλλη υπηρεσία , ή να ενσωματώσετε οποιοδήποτε κώδικα σε κάποιο gadget .

  Σημειώστε ότι τα δεδομένα της σελίδας σας στο Blogger Στατιστικά και στα Google Analytics μπορεί να διαφέρουν , λόγω των διαφορετικών μηχανισμών που χρησιμοποιούνται.
Και το πιο σημαντικό , τα Blogger Στατιστικά δεν μπορείτε να χρησιμοποιήσετε από το Κανονικό Πίνακα Ελέγχου  , Είναι διαθέσιμα για τώρα μόνο από το Πρόχειρο Blogger .

Ρίξτε μια ματιά στο νέο χαρακτηριστικό γνώρισμα Stats τώρα , και πείτε τη γνώμη σας στο Blogger.

Read More ►

Τετάρτη, Ιουνίου 30

7

Επίσημα share Buttons από το Blogger



Blogger δίνει τη δυνατότητα να δοκιμάσουμε ένα σύνολο πέντε share posts social εικονίδια ,που περιλαμβάνουν : Blogger, Twitter, Facebook και το Google Buzz .
Στην περίπτωση του Twitter χρησιμοποιεί μια υπηρεσία shortened url .
Τα επίσημα share Buttons από το Blogger είναι πλεον διαθέσιμα στο "κανονικό" Blogger πάνελ,χωρίς να χρειάζεται να μεταβείτε στο Πρόχειρο Blogger

Τα κουμπιά θα είναι, όπως βλέπετε στην παρακάτω εικόνα και περιλαμβάνουν hover effect και με το πέρασμα του κέρσορα θα εμφανίζονται όλα τα χρώματα .



Αν και ακόμα είναι σε δοκιμαστική λειτουργία, μπορούμε να αρχίσουμε να χρησιμοποιήσετε τα share Buttons ακόμα κaι σε παλαιοτέρα σχεδιασμένα πρότυπα και γενικά σε όλα τα πρότυπα, υπό την προϋπόθεση ότι θα προσθέσουμε στο πρότυπο μας τον απαραίτητο κώδικα για τα κουμπιά του Blogger.

Τα βήματα που πρέπει να ακολουθήσετε για να ενεργοποιήσετε τα share Buttons είναι τα έξης:

1 . Πηγαίνετε Σχεδίαση >> Στοιχεία Σελίδας και στο πλαίσιο Αναρτήσεις ιστολογίου (ακριβώς απο κάτω ) πατήστε Επεξεργασία .



2 . Θα ανοίξει ενα παραθυράκι Διαμόρφωση αναρτήσεων ιστολογίου και εκεί πρέπει να δείτε την επιλογή: Εμφάνιση κουμπιών κοινής χρήσης . Εφόσον υπάρχει στο πρότυπό σας αυτή η επιλογή , τότε επιλέξτε το κουτάκι δίπλα και αποθηκεύετε τις επιλογές σας .


Τώρα , αν στο πρότυπό σας δεν υπάρχει η επιλογή Εμφάνιση κουμπιών κοινής χρήσης . Τότε πρέπει να εγκαταστήσετε εσείς στο πρότυπό σας τον απαραίτητο κώδικά για να εμφανιστούν τα share Buttons.

Τα βήματα που πρέπει να ακολουθήσετε είναι τα εξής :

[1 ] Πηγαίνετε Σχεδίαση >> Επεξεργασία HTML και επιλέξτε το κουτάκι Επέκταση προτύπων γραφικών στοιχείων.

[ 2 ]
Τώρα βρείτε στο πρότυπό σας τον παρακάτω κώδικα :

<div class='post-footer-line post-footer-line-3'>


Και κολλήστε ακριβώς από κάτω τους παρακάτω κωδικούς :


<!-- share buttons -->

      <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div>


Αν δεν θέλετε να εμφανίζονται τα share Buttons στην αρχική σελίδα, απλά αντί για τον κώδικά που σας δίνω πάνω ,προσθέστε τον παρακάτω κώδικά :


<b:if cond='data:blog.pageType == "item"'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>


Και αποθηκεύετε το πρότυπό σας .

[ 3 ] Τώρα ακολουθήστε τα βήματα για να ενεργοποιήσετε τα share Buttons ,που σας περιγραφω στην αρχή της ανάρτησης και πλέον έχετε και εσείς τα Επίσημα share Buttons από το Blogger.

Αυτή η διαδικασια δεν χρειαζετε να γινει βεβαια , σε καινουργια επισημα προτυπα του Blogger , αυτο που πρεπει να κανετε για να τα χρισημοπιησετε ειναι απλά να τα ενεργοποιήσετε ( δείτε τις οδηγίες στην αρχή της ανάρτησης )

Σας έχω όμως κάτι καλύτερο !

Όπως είπα στην αρχή το blogger προσφέρει μόνο πέντε share Buttons ,Blogger, Twitter, Facebook και το Google Buzz .
Όμως τώρα μπορείτε να προσθέσετε και άλλα 6 δημοφιλής share Buttons αν θέλετε, τα οποία είναι Yahoo , Google, Stumbleupon ,Delicious , Digg και Reddit , προσθέτοντας τον παρακάτω κώδικα στο πρότυπο σας,πάνω από την ετικέτα ]]></b:skin>


/* Share Buttons --bloggertrics.blogspot.com----- */
.post-share-buttons {width:290px;}
.share-button2 {
display:block;
width:21px;
height:22px;
float:left;
background:url("http://2.bp.blogspot.com/_TNNQpsSXiP8/TBu4A0z9UPI/AAAAAAAAGQc/4xkaS0IAmDQ/s1600/share_buttons2.png") no-repeat left !important;
overflow:hidden;
margin-left:-1px;
}

.sb-yahoo {background-position:-21px 0 !important;}
a:hover.sb-yahoo {background-position:-21px -22px !important;}
a:active.sb-yahoo {background-position:-21px -44px !important;}
.sb-google {background-position:-84px 0 !important;}
a:hover.sb-google {background-position:-84px -22px !important;}
a:active.sb-google {background-position:-84px -44px !important;}
.sb-stumbleupon {background-position:-105px 0 !important;}

a:hover.sb-stumbleupon {background-position:-105px -22px !important;}
a:active.sb-stumbleupon {background-position:-105px -44px !important;}
.sb-delicious {background-position:-126px 0 !important;}

a:hover.sb-delicious {background-position:-126px -22px !important;}
a:active.sb-delicious {background-position:-126px -44px !important;}
.sb-digg {background-position:-147px 0 !important;}
a:hover.sb-digg {background-position:-147px -22px !important;}
a:active.sb-digg {background-position:-147px -44px !important;}
.sb-reddit {background-position:-168px 0 !important; width:22px;}
a:hover.sb-reddit {background-position:-168px -22px !important;}
a:active.sb-reddit {background-position:-168px -44px !important;}


Τώρα βρείτε στο πρότυπό σας την παρακάτω γραμμή :

<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>


Και αντικαταστήστε αυτήν την γραμμή με τον παρακάτω κώδικά :


<a class='share-button2 sb-yahoo' expr:href='&quot;http://bookmarks.yahoo.co.jp/action/bookmark?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' target='_blank' title='Yahoo!'> 
        <span class='share-button-link-text'>Yahoo!</span></a> 
      <a class='share-button2 sb-google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google bookmarks'> 
        <span class='share-button-link-text'>Google bookmarks</span></a> 
      <a class='share-button2 sb-stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='stumbleupon'> 
        <span class='share-button-link-text'>stumbleupon</span></a> 
      <a class='share-button2 sb-delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='del.icio.us '> 
        <span class='share-button-link-text'>del.icio.us </span></a> 
      <a class='share-button2 sb-digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='digg '> 
        <span class='share-button-link-text'>digg </span></a> 
      <a class='share-button2 sb-reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='reddit '> 
        <span class='share-button-link-text'>reddit</span></a>  
        <span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>


Τώρα αποθηκεύετε το πρότυπό σας και το αποτέλεσμα που θα έχουμε είναι :



Read More ►

6

Τίτλος ως υποχρεωτικό πεδίο για τα gadgets

Κατά την τελευταία ενημέρωση του Blogger , όλα τα gadgets απαιτούν τώρα έναν τίτλο, προκειμένου να αποθηκευτούν .
 Δηλαδή αν θέλετε να αλλάξει και να αποθηκεύσετε κάποιο gadget χωρίς να έχετε βάλετε ένα τίτλο για αυτό, δεν θα& μπορέσετε να το κάνετε.
 Αλλά αυτό θα επιλυθεί σύντομα , όπως μας ενημερώνει το Blogger

 Σίγουρα έχετε δει περισσότεροι αυτό το το μήνυμα : Το πεδίο δεν πρέπει να είναι κενό.




Το Blogger κατάλαβε από τα τα σχόλια των χρηστών ,ότι ήταν λάθος να απαιτεί ως υποχρεωτικό πεδίο τον τίτλο για τα gadgets και όπως μας ενημερώνει θα το λύσει το πρόβλημα , ας ελπίσουμε μόνο ότι θα το κάνουν γρήγορα .
Μπορείτε να επισκεφτείτε αυτή την σελίδα,όπου θα βρείτε ενημερώσεις σε Γνωστά θέματα για Blogger

Μέχρι τότε, ενώ περιμένετε ποτέ θα λύσει αυτό το πρόβλημα το blogger σας δίνω ένα μικρο trick που χρησιμοποιώ εγώ .
Σε περίπτωση που θα χρειάζεται να αλλάξετε κάποιο gadget και δεν θέλετε να θέσετε τίτλο για το gadget σας , τότε στο πλαίσιο αντί για κάποιο τίτλο , απλά εισάγετε τα παρακάτω :
<h2> </ h2>



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


Read More ►

Πέμπτη, Ιουνίου 24

6

Εισαγωγή στο CSS3 - Μέρος 4ο: Τext shadow


CSS3Τext shadow
CSS3 Τext shadow

Σε αυτό το κείμενο θα κάνουμε μια μικρή εισαγωγή σε άλλο ένα css property που ονομάζετε text-shadow . Αν και αυτή η δυνατότητα δεν είναι καινουργια στο CSS3. Είχε αρχικά προταθεί στο CSS2 όμως ήταν πολύ χρονοβόρα διαδικασία  .
Τώρα όμως έχει γίνει πάρα πολύ απλή διαδικασία και στην ουσία αυτό που έχουμε να κάνουμε μόνο είναι, να δώσουμε την εντολή text-shadow στο επιλεγμένο μας κείμενο και όλα τα υπόλοιπα γίνονται αυτόματα .
Αυτό που μου αρέσει πάρα πολύ ,είναι ότι μας δίνει την δυνατότητα να δημιουργήσουμε όμορφα εφέ και σκίαση στο κείμενο μας , χωρίς να χρησιμοποιήσουμε Photoshop .

Σε αυτό το άρθρο θα περιγράψουμε τους τρόπους με τους οποίους δουλεύει το text-shadow  και τι μπορείτε να κάνετε με αυτό .
Στο τέλος αυτού του άρθρου θα δείτε και  μερικά παραδείγματα και να παρέχει μια λίστα με χρήσιμους πόρους.

1 . Σε τι μας χρησιμεύει το text-shadow  :


Ο κύριος στόχος αυτής της ιδιότητάς  είναι να δώσει στους σχεδιαστές και προγραμματιστές css ένα εργαλείο για να δημιουργήσουν εφέ κειμένου, το οποίο θα μπορούσε να γίνει πριν μόνο με την χρήση κειμένου και εικόνων με όλες τις παρενέργειες του . Κείμενα που παρέχονται ως μια εικόνα δεν είναι ανιχνεύσιμα και επομένως οι μηχανές αναζήτησης δεν τα πολυσυμπαθουν. Μια άλλη παρενέργεια είναι το γεγονός ότι οι εικόνες μπορεί να είναι πολύ πιο μεγαλύτερες και καταλαμβάνουν πολύ χώρο απο μία μικρή γραμμή κώδικα όσον αφορά το μέγεθος του αρχείου.
Όπως ίσως γνωρίζετε οι περισσότεροι τα CSS αρχεία είναι εκείνα, που περιλαμβάνουν ολόκληρο το σχεδιάγραμμα ενός δικτυακού τόπου, έχουν  μικρότερο όγκο από μία εικόνα για τις περισσότερες ιστοσελίδες. Έτσι αν το δούμε από λειτουργική πλευρά ,είναι πραγματικά πιο έξυπνο να χρησιμοποιηθεί μια CSS λειτουργία αντί για τις εικόνες για τη μείωση των περιττών μεταφορών.

2 . Ποια browsers υποστηρίζουν αυτήν την ιδιότητα :



Safari 3.1 (Mac/Win) : Ναι, όμως όχι τα  multiple shadows
Safari 4 (Mac/Win) : Ναι, full υποστήριξη
Opera 10.5 (Mac/Win/Lin) : Ναι, full υποστήριξη
Firefox 2/3 (Mac/Win/Lin) : Όχι
Firefox 3.1/3.6 (Mac/Win/Lin) : Ναι, full υποστήριξη
Google Chrome 1 (Win) : Όχι
Google Chrome  (Win) : Ναι, full υποστήριξη
IE 7/8 (Win) :Όχι
Shiira (Mac) : Ναι, όμως όχι τα  multiple shadows
Konqueror (Lin/Mac/Win) : Ναι, full υποστήριξη
Safari iPhone : Ναι, όμως όχι τα  multiple shadows
Nokia Symbian-Smartphones (Series 60) :Ναι
Opera Mini 4.1 : Ναι, όμως όχι το blur radius



3 . Πως λειτουργεί και πως χρησιμοποιείται :


 Όταν ορίζουμε στο css-stylesheet την ιδιότητα text-shadow πρέπει να μοιάζει με αυτό:

h1 { text-shadow: 1px 1px 1px #000; }

Οι δύο πρώτες δυο τιμές καθορίζουν το μήκος αντιστάθμισης της σκιάς . Η πρώτη τιμή καθορίζει την οριζόντια απόσταση και η δεύτερη προσδιορίζει την κάθετη απόσταση από τη σκιά. Η τρίτη τιμή καθορίζει την ακτίνα θαμπάδα και η τελευταία τιμή περιγράφει το χρώμα της σκιάς:

Εναλλακτικά , για WebKit  προγράμματα περιήγησης, μπορείτε να χρησιμοποιήσετε τις τιμές RGBA αντί του δεκαεξαδικού κώδικα χρωμάτων, ως τέταρτη τιμή .
Ο τελευταίος αριθμός αντιπροσωπεύει τη διαφάνεια και μπορεί να ρυθμιστεί μεταξύ 0,0 και 1,0 για να μπορείτε να κάνετε το text-shadow πιο διακριτικά :

p { text-shadow: 1px 1px 1px rgba(255,255,255, .5); }  

Δείτε ένα παράδειγμα χρήσης στο πραγματικό κώδικα στα πρότυπά μας :


.post h3{
margin:4px 0 6px 0;
font:29px gramond,'times new roman';
line-height:1.4em;
font-weight:bold;
font-variant:small-caps;
letter-spacing:0;

text-shadow:1px 1px 0 #dcd6d5;
}


Φυσικά την ιδιότητα text-shadow μπορούμε να χρησιμοποιήσουμε σε όποιο στοιχείο εμείς θέλουμε και τα αποτελέσματα που μπορεί να έχουμε με αυτή την τιμή, συχνά εξαρτάται από το χρώμα του κειμένου μας και τα background μας, οπότε τώρα ας ρίξουμε μια ματιά στο τι μπορούμε να κάνουμε με όλους τους συνδυασμούς.


4. Παραδείγματα με κωδικούς και Demos :


Έχω κάνει  μερικά παραδείγματα για να σας δείξω τις δυνατότητες αυτού του css property .
Κάθε κωδικός  ακολουθείται από ένα παράδειγμα κειμένου που αποδίδεται από τον browser σας. Κάτω από αυτό θα βρείτε ένα μικρο screenshot  με το αποτέλεσμα tου , ώστε και οι χρήστες του Internet Explorer να  μπορέσουν να δουν το αποτέλεσμα.


 Apple style - Χαραγμένα κείμενο


Με αυτές τις γραμμές του κώδικα μπορείτε να έχετε αυτό το αποτέλεσμα , που χρησιμοποιείται συχνά από την Apple.
Θα πρέπει να χρησιμοποιείτε ένα γκρι η σκούρο φόντο και ένα σκοτεινό χρώμα του κειμένου για αυτό , για να έχουμε αυτό το αποτέλεσμα . Στην πραγματικότητα δεν είναι τίποτα περισσότερο από ένα λευκό φως ή γκρι σκιά, η οποία τοποθετείται 1px κάτω από το κείμενο. Μπορείτε να χρησιμοποιήσετε μια θαμπάδα 1px  γύρο από το κείμενο, για να φανεί περισσότερο:
Αυτό το αποτέλεσμα φαίνεται υπέροχο σε σκούρο background όπως θα δείτε . 


color: #222;
text-shadow: 0px 2px 3px #555;



Είμαι χαραγμένο κείμενο

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας








Αυτό λειτουργεί ακόμη και με άλλους τρόπους ,πάνω σε μαύρο φόντο με γκρι κείμενο η πάνω γκρι φόντο με γκρι κείμενο σε , ρυθμίζοντας απλά μόνο τις τιμές χρωμάτων:


color: #999; 
text-shadow: 0px 3px 8px #2a2a2a;



Είμαι χαραγμένο κείμενο

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας









Χαραγμένο κείμενο σε πολύ σκούρο φόντο και ανοιχτόχρωμη θαμπάδα :
 

color: #666;
background: #000;
text-shadow: 0px 1px 0px #ccc;



Χαραγμένο κείμενο σε μαύρο

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας



Κλασικοί τρόποι


Με τις ακόλουθες γραμμές του css κώδικα μπορείτε να δημιουργήσετε ένα μπλε κείμενο σε λευκό φόντο, με ομαλή  μαύρη σκίαση .
Η σκιά τοποθετείται δεξιά 2 pixels και 2 pixels κάτω από το κείμενο και έχει μια θαμπάδα ακτίνας 3:


color:#006699;
background: #fff;
text-shadow: 2px 2px 3px #999;



Είμαι ένα κείμενο με ομαλή σκίαση

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας



Χρησιμοποιώντας κάποιες αρνητικές τιμές , μπορείτε να το κάνετε να δείχνει την σκιά  σαν να είναι αντανάκλαση  από το κείμενο:


color: #000;
background: #fff;
text-shadow: 2px -2px 3px #999;



Η Σκιά ως αντανάκλαση κείμενου

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας




Η χρησιμοποιώντας μόνο μια τιμή π.χ . θαμπάδα ακτίνας 8px , η σκιά τοποθετείται ακριβώς πίσω και γύρο από το κείμενο .


color: #ffcc00;
text-shadow: 0 0 8px #000;



Είμαι ένα κείμενο με μαύρη σκιά 

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας




Μultiple shadows


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

Σε αυτή τη περίπτωση χρησιμοποιούμε μόνο 2 αρνητικές τιμές , αγνοώντας τη θαμπάδα ακτίνας , δημιουργούμε αυτό το όμορφο εφέ . 


color: #CCC;
text-shadow: -1px -1px #666, 1px 1px #FFF;



Έχω πολλαπλές σκιές !


Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας



Παρακάτω είναι ένας τρόπος χρήσης , με RGB αντί του δεκαεξαδικού κώδικα χρωμάτων .

color:#999999;
background: none repeat scroll 0% 0% rgb(153, 153, 153);
text-shadow: 1px 1px 3px rgb(102, 102, 102), -1px -1px 3px rgb(255, 255, 255),
1px 1px rgb(102, 102, 102), -1px -1px rgb(255, 255, 255);



           Μultiple shadows

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας



Μπορούμε να δημιουργήσουμε ένα σκούρο κείμενο σε ανοιχτόχρωμο φόντο και να τονίσουμε το κείμενό μας δημιουργώντας σκιές από πάνω και από κάτω με διαφορετικά χρώματα , απλά προσαρμόζοντας τις τιμές στις ανάγκες μας


color: #999; 
text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;



    Ξεχωρίζω από το φόντο !

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας



Εδώ είναι άλλο ένα παράδειγμα . Απλα δείτε πόσο όμορφο φαίνεται .


color: #EEE; 
text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;



Κείμενο με μαύρο περίγραμμα !

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας




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


color: #000;
text-shadow: 1px 0 #F33, -1px 0 #33F;



  Είμαι ένα πολύ funky κείμενο!

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας




Εδώ τι να πω !!! Απλα υπέροχο !
Πραγματικά είναι δύσκολο να πιστέψει κανείς ότι αυτό το εφέ έχει γίνει μόνο με CSS και όμως εδώ δεν έχουμε χρησιμοποιήσει ούτε εικόνα ούτε javascript .



color: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80,
2px -18px 18px #f20;



Δεν είναι απλά υπέροχο ?

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας





Εδώ το κείμενο μας είναι πιο θολό .


color:#fff;
text-shadow: 0 6px 4px #33F, -3px -5px 4px #F00, 3px -5px 4px #0F0;



 Έχω πολύχρωμες σκιές !

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας




Μπορούμε να κάνουμε αρκετά μυστηριώδες πράγματα , χρησιμοποιώντας το ίδιο χρώμα για το κείμενο και το φόντο και τονίζοντας απλά παραπάνω την ακτίνα θαμπάδας .


color: #fff;
text-shadow: 0 0 24px #C00, 0 0 4px #C00, 1px 1px 2px #333;



     Είμαι πολύ όμορφο έτσι ?

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας




Glowing Text


Με τη χρησιμοποίηση της τιμής blur radius , μπορούμε  να επιτύχουμε κάποια ενδιαφέροντα αποτελέσματα.
Ακολουθούν μερικά παραδείγματα  με λαμπερό λευκό κείμενο σε μαύρο φόντο:


color: #fff;
background: #000;
text-shadow: 1px 1px 6px #fff;



Είμαι ένα λαμπερό κείμενο !

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας








Μπορείτε επίσης να κάνετε όλο το κείμενο πιο θολό, χρησιμοποιώντας το ίδιο χρώμα για το κείμενο και για τη σκιά , χωρίς αντιστάθμιση :


color: #fff;
background: #000;
text-shadow: 0px 0px 3px#fff;



Είμαι λαμπερό και θολό κείμενο !

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας








Ή δείτε άλλους δυο τρόπος , πως μπορούμε να κάνουμε σε ένα κείμενο στο ίδιο χρώμα με το φόντο μας να φαίνεται πιο φωτεινό και ... μυστηριώδες :


color: #000;
background: #000;
text-shadow: 1px 1px 4px #fff;



Φωτεινό και μυστηριώδες κείμενο

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας








Δείτε το και σε άσπρο φόντο με άσπρο κείμενο :


color: #fff;
background: #fff;
text-shadow: 1px 1px 4px#000;



Είμαι ασυνήθιστο κείμενο !

Και αυτό είναι το screenshot , σε περίπτωση που δεν υποστηρίζει CSS3 το Web browser σας








Αυτά ήταν μόνο μερικά δείγματα με το τι μπορείτε να κάνετέ με το Τext shadow property .
 Πειραματιστείτε με τους συνδυασμούς για να δημιουργήσετε απίστευτα πράγματα !

Λοιπόν , ελπίζω να είδατε όλοι τα όμορφα μαγικά που μπορούμε να κάνουμε με αυτό το CSS3 property.
Και το καλύτερο απ'ολα είναι ότι , δεν επιβαρύνουμε το style sheet μας με άχρηστους κωδικούς , ογκώδης φωτογραφικά αρχεία  και javascript , επομένως βελτιώνουμε έτσι τον χρόνο φόρτωσης της σελίδας μας .

Μείνετε συντονισμένοι


Έχουμε να δούμε ακόμη πιο πολλά ενδιαφέροντα κολπάκια γι 'αυτό μείνετε συντονισμένοι  .
Στο επόμενο άρθρο θα δούμε Opacity / Transparency

Μέχρι τότε μπορείτε να διαβάσετε τα προηγούμενα άρθρα για αυτήν την ενότητα :





Read More ►
 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS