Blogger Tricks

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

noreply@blogger.com (Σοφία) — Mon, 26 Jul 2010 11:21:00 +0000

Κάντε το 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 λοιπόν !

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

noreply@blogger.com (Σοφία) — Mon, 19 Jul 2010 11:35:00 +0000

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

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

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

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

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

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

noreply@blogger.com (Σοφία) — Tue, 13 Jul 2010 13:32:00 +0000

Δημιουργήστε αυτόματα 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 σας !

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

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

noreply@blogger.com (Σοφία) — Mon, 12 Jul 2010 08:48:00 +0000

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 μας .
Αφήνουμε το πεδίο για τον τίτλο κενό ! Γιατί έχουμε ορίσει ήδη τίτλο μέσα στον κώδικα που χρησιμοποιήσαμε !

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

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

Royale Noir - Stylish dark Blogger template

noreply@blogger.com (Σοφία) — Sat, 10 Jul 2010 10:14:00 +0000

» Learn More Royale Noir A stylish dark template with 2 columns.

Preview Download

Έχει περάσει καιρός απο τότε που κυκλοφόρησα ενα 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 και επιλέξτε την μορφή :

Μορφή Timestamp

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

Modern feel - Blogger Template

noreply@blogger.com (Σοφία) — Sat, 10 Jul 2010 10:12:00 +0000

Modern Feel Blogger Template είναι ένα ελεύθερο Modern Premium multi purpose Blogger πρότυπο.

View Demo Download

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

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

Digg-Digg social bookmarking widget για Blogger

noreply@blogger.com (Σοφία) — Thu, 08 Jul 2010 16:42:00 +0000

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>





Αποθηκεύετε το πρότυπό σας και είστε έτοιμοι να μοιραστείτε τα άρθρα σας με όλο το κόσμο.



Σε περίπτωση που αντιμετωπίσετε κάποιο πρόβλημα η έχετε κάποια ερώτηση αφήστε το σχόλιό σας !



Και άλλο βραβείο !!!
noreply@blogger.com (Σοφία) — Thu, 08 Jul 2010 13:27:00 +0000




 
 » Learn More
 
Από την Λένα και το Potpouriart  .
Τους ευχαριστώ που με τίμησαν με το βραβείο του καλύτερου blog !
 



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



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

Τους ευχαριστώ μέσα από την καρδιά μου που με τίμησαν με  το βραβείο του καλύτερου blog !



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



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




http://mitsobonos.blogspot.com/   


http://aesthetics-soo.blogspot.com/  


http://kanthar0s.blogspot.com/  


http://otrelostouxwriou.blogspot.com/


http://ektakto-parartima.blogspot.com/


http://lenalyk.blogspot.com/  


http://hamomilaki.blogspot.com/  


http://diomidis69.blogspot.com/


http://aboutmylamia.blogspot.com/


http://opeiratis.blogspot.com/


http://crazygreekblogger.blogspot.com/


http://ramnousia.blogspot.com/


http://animationaris.blogspot.com/


http://pansofix.blogspot.com/


http://solidaritymit.blogspot.com/


http://konserbokoyti.blogspot.com/





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



        



Ενσωματομενα Blogger Stats απο το  Blogger in Draft
noreply@blogger.com (Σοφία) — Fri, 02 Jul 2010 10:24:00 +0000



 


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.




        



Επίσημα share Buttons από το Blogger
noreply@blogger.com (Σοφία) — Wed, 30 Jun 2010 18:26:00 +0000



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>




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









        



Τίτλος ως υποχρεωτικό πεδίο για τα gadgets
noreply@blogger.com (Σοφία) — Wed, 30 Jun 2010 13:22:00 +0000
Κατά την τελευταία ενημέρωση του Blogger , όλα τα gadgets απαιτούν τώρα έναν τίτλο, προκειμένου να αποθηκευτούν .

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

 Αλλά αυτό θα επιλυθεί σύντομα , όπως μας ενημερώνει το Blogger



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










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

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



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

Σε περίπτωση που θα χρειάζεται να αλλάξετε κάποιο gadget και δεν θέλετε να θέσετε τίτλο για το gadget σας , τότε στο πλαίσιο αντί για κάποιο τίτλο , απλά εισάγετε  τα παρακάτω :

<h2> </ h2>









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

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

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





        



Εισαγωγή στο CSS3 - Μέρος 4ο: Τext shadow
noreply@blogger.com (Σοφία) — Thu, 24 Jun 2010 11:36:00 +0000



 


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



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




Εισαγωγή στο CSS3 - Μέρος 1ο: Τι είναι το CSS3 
Εισαγωγή στο CSS3 - Μέρος 2ο: CSS3 border properties
Εισαγωγή στο CSS3 - Μέρος 3ο:  Box shadow









        



Εισαγωγή στο CSS3 - Μέρος 3ο:  Box shadow
noreply@blogger.com (Σοφία) — Wed, 23 Jun 2010 10:22:00 +0000



 


CSS3 Box shadow



To css3 property box-shadow μας επιτρέπει να δημιουργήσουμε σκιές χωρίς χρήση εικόνας η javascript σε επιλεγμένο  elements.

Αν λοιπόν θέλουμε διάφορα elements της σελίδας μας να έχουν σκιές , αλλά ταυτόχρονα δεν θέλουμε να φορτώσετε τα site μας με επιπλέον γραφικά,  περίπλοκους styling κανόνες και markup. Με την έλευση του CSS3 η λύση είναι πολύ απλή και λειτουργική και ονομάζεται box-shadow.

Απλά θα επιλέξουμε κάποιο element το οποίο θέλουμε να έχει σκιά και η rendering μηχανή του εκάστοτε browser αναλαμβάνει όλη την βρώμικη δουλειά !

Χάρη στις διαφορετικές τιμές από το box-shadow , μπορούμε να διευκρινίσουμε αν  η σκιά είναι τοποθετημένη στα αριστερά / δεξιά ή πάνω / κάτω στην εξωτερική πλευρά του στοιχείου, το gradient of blur και το χρώμα του.

Αυτή η CSS3 ιδιότητα μπορεί να συνδυαστεί πολύ όμορφα με άλλες ιδιότητες, όπως  css3 border-radius



Η δομή για το  box shadow  property μπορεί να είναι  : x-offset, y-offset, blur, και  color .



Το box-shadow  χρειάζεται τουλάχιστον 3 τιμές η  4 κατ 'ανώτατο όριο: 


Η οριζόντια αντιστάθμιση της σκιάς 

Η τιμή μπορεί να είναι  αρνητική ,η οποία θα μετακινήσει την σκιά πιο αριστερά η μπορεί να είναι θετική η οποία θα μετακινήσει την σκιά πιο δεξιά από το element στο οποίο εφαρμόζουμε τον box shadow κανόνα.

  Παράδειγμα :   box-shadow: 20px 10px 20px gray; 

                           box-shadow: -20px 10px 20px gray; 


Η κάθετη μετατόπιση της σκιάς

Και εδώ η τιμή μπορεί να είναι  αρνητική , η οποία  θα μετακινήσει την σκιά πιο πάνω η μπορεί να είναι θετική η οποία  θα μετακινήσει την σκιά πιο κάτω από το element στο οποίο εφαρμόζουμε τον box shadow κανόνα.

Παράδειγμα :   box-shadow:20px 10px 20pχ gray; 


                         box-shadow:20px -10px 20px gray; 


Το χρώμα της σκιάς (shadow’s color)

Παράδειγμα : box-shadow:20px 10px 20px #000000;
                       box-shadow:20px 10px 20px black; 

                      box-shadow:20px 10px 20px rgb(0,0,0); 


Το  blur radius  (θολούρα ακτίνας ) 

Εάν η τιμή οριστεί σε 0 τότε η σκιά θα είναι απότομη, όσο υψηλότερος είναι ο αριθμός, τόσο πιο θολή θα είναι και η σκιά .

Παράδειγμα : box-shadow:20px 10px 20px black; 

                        box-shadow:20px 10px 10px black; 

                        box-shadow:20px 10px  0px black;




Σημείωση : υπάρχουν άλλες 2 τιμές  διαθέσιμες για  το css3 box-shadow , που όμως στην πραγματικότητα δεν στηρίζονται σε κανένα προγράμματα περιήγησης:



 - Η τιμή  ’spread radius’ για να προσθέσετε σκιά σε όλες  τις κατευθύνσεις του στοιχείου 


 - Η τιμή ‘inset’ για να προσθέσουμε  μια εσωτερική σκιά αντί για μία εξωτερική 






Τα προθέματα:



-moz ( -moz-box-shadow) δουλεύει σε  FireFox.

-webkit ( -webkit-box-shadow) δουλεύει σε Safari & Google Chrome. 

-khtml ( -khtml-box-shadow) δουλεύει σε Konqueror

border-( box-shadow ) δουλεύει σε Opera & IE9 Preview



Το IE 8 υποστηρίζει Box shadow, χρησιμοποιώντας το φίλτρο :



  -ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=DarkGray, offX=5, offY=5, positive=true)"; /* >= IE8 */



Και για τα IE 5 - IE 7 



 filter : progid:DXImageTransform.Microsoft.dropShadow(color=DarkGray, offX=5, offY=5, positive=true);  /* <= IE7 */



Όμως εκτός από το ότι , το prefix είναι τεράστιο, δίνει τόσο άσχημα και περίεργα αποτελέσματα που προτιμω να μην τα χρησιμοποιησω 



Δεν υποστηρίζει βέβαια , όλες τις δυνατότητες ,τις οποίες θα δούμε παρακάτω .

Καλό θα ήταν να επισκεφτείτε το MSDN Library  για να το κατανοήσετε καλύτερα .



Αλλά ας δούμε με μερικά παραδείγματα καλύτερα . 



 Παραδείγματα Box shadow



Ο πιο βασικός τρόπος καθορισμού σκιάς σε ένα στοιχείο  χρησιμοποιεί box-shadow: [x offset] [y offset] [color] :




box-shadow:10px 10px  #000;
-webkit-box-shadow:10px 10px  #000;
-moz-box-shadow: 10px 10px  #000;
-goog-ms-box-shadow: 10px 10px  #000;
-khtml-box-shadow: 10px 10px  #000;





Και το αποτέλεσμά μας είναι : 








        

               Το κουτί μας έχει σκιά ! 


Και αυτό είναι το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :














Προσθέτοντας άλλη μια τιμή , τότε μας επιτρέπει να καθορίσουμε το blur radius .



Παράδειγμα :box-shadow: 10px 10px 20px black; 





CSS κώδικας :




box-shadow:10px 10px 20px #000;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow: 10px 10px 20px #000;
-goog-ms-box-shadow: 10px 10px 20px #000;
-khtml-box-shadow: 10px 10px 20px #000;





Και το αποτέλεσμά μας είναι :










        

           Box-shadow με blur radius! 


Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :












Μπορούμε επίσης να ορίσουμε ακόμη και μια τιμή spread radius (αυτή η τιμή έχει την ιδιότητα να επεκτείνει την σκιά):  

Παράδειγμα : box-shadow: 0 0 8px 5px #000; 



CSS κώδικας :




box-shadow: 0 0 8px 8px #000;
-webkit-box-shadow: 0 0 8px 8px #000;
-moz-box-shadow: 0 0 8px 8px #000;
-goog-ms-box-shadow: 0 0 8px 8px #000;
-khtml-box-shadow: 0 0 8px 8px #000;



Και το αποτέλεσμά μας είναι :










        

           Box-shadow με spread radius! 


 Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :












Αρνητικές τιμές εξάπλωσης σκιάς είναι δυνατόν επίσης να εφαρμοστούν :  

Παράδειγμα : box-shadow:-8px -8px 5px #000; 



CSS κώδικας :




box-shadow:-8px -8px 5px #000;
-webkit-box-shadow:-8px -8px 5px #000;
-moz-box-shadow: -8px -8px 5px #000;
-goog-ms-box-shadow: -8px -8px 5px #000;
-khtml-box-shadow: -8px -8px 5px #000;



Και το αποτέλεσμά μας είναι :










        

           Box-shadow με αρνητική τιμή! 


 Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :












Η μπορούμε να εφαρμόσουμε μια Negative spread τιμή  

Παράδειγμα : box-shadow: 0 8px 8px -3px #000; 



CSS κώδικας :




box-shadow: 0 8px 8px -3px #000;
-webkit-box-shadow: 0 8px 8px -3px #000;
-moz-box-shadow: 0 8px 8px -3px #000;
-goog-ms-box-shadow:0 8px 8px -3px #000;
-khtml-box-shadow: 0 8px 8px -3px #000;





Και το αποτέλεσμά μας είναι :










        

      Box-shadow με Negative spread τιμή ! 


  Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :












Ένα άλλο ενδιαφέρον χαρακτηριστικό είναι η δυνατότητα να ορίσουμε πολλαπλά box shadows, που χωρίζονται με κόμμα, ξεκινώντας από τη βασική σκιά:  

Παράδειγμα :  box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;. 



CSS κώδικας :




box-shadow:0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
  -20px -15px 30px blue,20px -15px 30px red;
-webkit-box-shadow: 0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
  -20px -15px 30px blue,20px -15px 30px red;
-moz-box-shadow: 0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
  -20px -15px 30px blue,20px -15px 30px red;
-goog-ms-box-shadow: 0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
  -20px -15px 30px blue,20px -15px 30px red;
-khtml-box-shadow: 0 0 20px black,20px 15px 30px yellow,-20px 15px 30px lime,
  -20px -15px 30px blue,20px -15px 30px red;





Και το αποτέλεσμα μας είναι :












 Box-shadow με πολλαπλά box shadows! 


  Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :












Inset Box Shadows


Η χρήση του inset box shadows είναι πολύ εύκολη υπόθεση .

Δεν έχουμε πάρα να προσθέσουμε το inset κλειδί στο box shadow layer. 



Παράδειγμα : box-shadow: inset 3px 2px 5px grey; 



CSS κώδικας :




box-shadow: inset 3px 2px 5px grey;
-webkit-box-shadow: inset 3px 2px 5px grey;
-moz-box-shadow:inset 3px 2px 5px grey;
-goog-ms-box-shadow: inset 3px 2px 5px grey;
-khtml-box-shadow: inset 3px 2px 5px grey;



Και το αποτέλεσμα μας είναι :










        

             Box με inset box shadow! 
  Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :












Η μπορούμε να χρησιμοποιήσου με συνδυασμούς Inset και outset shadows μαζί .  

Παράδειγμα : box-shadow: inset 2px 2px 5px black, 2px 2px 5px black; 



CSS κώδικας :




box-shadow:inset 2px 2px 5px black, 2px 2px 5px grey;
-webkit-box-shadow:inset 2px 2px 5px black, 2px 2px 5px grey;
-moz-box-shadow:inset 2px 2px 5px black, 2px 2px 5px grey;
-goog-ms-box-shadow: inset 2px 2px 5px black, 2px 2px 5px grey;
-khtml-box-shadow: inset 2px 2px 5px black, 2px 2px 5px grey;



Και το αποτέλεσμα μας είναι :










 Box με Inset και outset shadows ! 
  Το screen shot , σε περίπτωση που το προγράμματα περιήγησης σας δεν υποστηρίζει το CSS3 :











Τώρα, η χρησιμότητα των multiple shadow layers γίνεται πραγματικά εμφανής όπως βλέπετε.

Μπορείτε να χρησιμοποιήσετε inset box shadows για να δημιουργήσετε  gradients, highlights, 3D borders κλπ., καθώς μπορούμε ελεύθερα  να κολλήσουμε το ένα πάνω στο άλλο. Είναι ακριβώς όπως χρησιμοποιούμε έναν απεριόριστο αριθμό των  “inner shadow” layer styles σε Photoshop! 




Box-shadow  συνδιασμος με border-radius :


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

όπου έχουμε συνδυάσει Box-shadow με border-radius




 background-color: magenta;
-webkit-box-shadow: 10px 10px 5px #888; 
-moz-box-shadow:10px 10px 5px #888;
 box-shadow:10px 10px 5px #888;
-khtml-box-shadow:10px 10px 5px #888; 
-goog-ms-box-shadow:10px 10px 5px #888;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}



Και το αποτέλεσμα μας είναι : 








   Γεια σας , είμαι ένα όμορφο κουτί με σκίαση και στρογγυλεμένες γωνίες .


Δημιουργήθηκα αποκλειστικά με CSS3 .

Δεν είναι φοβερό ?! 



                 






Καταπληκτικό έτσι ?!!



Και φυσικά αυτή η CSS3 εντολή μπορεί να εφαρμοστεί σε όποιο στοιχείο στα styles μας θέλουμε πολύ απλά. 

Αν παρατηρήσετε ,αυτή την τεχνική χρησιμοποιώ κ'εγώ στις φωτογραφίες στις αναρτήσεις μου .

Οι ημέρες του ακατάστατων και περίπλοκων CSS  hacks για  να δημιουργήσει σκιές έχουν περάσει στο παρελθόν ευτυχώς !



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



Ας πούμε , ότι θέλουμε να εφαρμόσουμε την ιδιότητα Box shadow στις φωτογραφίες στο blog μας.

Αυτό που πρέπει να κάνουμε είναι , να βρούμε τον CSS κώδικα που καθορίζει το στυλ των φωτογραφιών στις αναρτήσεις του blog μας . 

Ο κώδικας αυτός μπορεί να είναι κάτι σαν αυτό : 


.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }



Τωρα , για να δημιουργησουμε σκιαση γυρο απο τις φωτογραφιες μας ,αυτο που πρεπει να κανουμε ειναι να επικολλησουμε τΙς CSS3 ιδιοτητες που δημιουργουν σκιες ,σε αυτον τον κωδικα .

Και ο κωδικας μς θα γινει :




.post-body img {
  padding:4px;
  border:1px solid $bordercolor;
-webkit-box-shadow: 1px 1px 5px #888; 
-moz-box-shadow:1px 1px 5px #888;
 box-shadow:1px 1px 5px #888;
-khtml-box-shadow:1px 1px 5px #888; 
-goog-ms-box-shadow:1px 1px 5px #888;
  }



Και το αποτέλεσμα μας θα μοιάζει με αυτό : 








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


Θα ακολουθήσουν ακόμη πιο ενδιαφέροντα άρθρα  , όπου θα δούμε και να μάθουμε περισσότερα για το CSS3  .

Έτσι στο επόμενο άρθρο , θα ασχοληθούμε με το πως δημιουργούμε Σκιά στα επιλεγμένα μας κείμενα - Τext shadow 



Μέχρι τότε υπομονή  : )




        



Εισαγωγή στο CSS3 - Μέρος 2ο: CSS3 border properties
noreply@blogger.com (Σοφία) — Mon, 21 Jun 2010 09:42:00 +0000







CSS3 border properties



Συνεχίζοντας την ενότητα μας , στο δεύτερο μέρος της σειράς μας για 
CSS3, θα ρίξουμε μια ματιά στις άκρες ( borders ).

Όσοι χρησιμοποιούν CSS και είναι εξοικειωμένοι με τα border property ξέρουν ότι είναι ένα πολύ καλός τρόπος για τη δομήση του περιεχομένου, δημιουργίας αποτελεσμάτων γύρω από τις εικόνες και για την βελτίωση διάταξης της σελίδας.



Τώρα CSS3 μεταφέρει τα borders σε ένα νέο επίπεδο με την ικανότητα να χρησιμοποιεί 
gradients, rounded corners και border images . Θα εξετάσουμε κάθε ένα από αυτά με περισσότερη 
λεπτομέρεια, χρησιμοποιώντας παραδείγματα όπου είναι δυνατόν.
























Στρογγυλεμένες άκρες (rounded corners)
Η 
επίτευξη στρογγυλοποίησης των ακρων χρησιμοποιώντας
 την τρέχουσα CSS κωδικοποίηση μπορεί να είναι δύσκολη υπόθεση .

Αν και υπάρχουν αρκετοί τρόποι να το κάνουμε , όπως χρησιμοποιώντας εικόνες για να πετύχουμε την στρογγυλοποίηση
 των ακρων , άλλη μέθοδος είναι με την χρήση javascript όπως το curvycorners.js ,είτε επισημοποιώντας έτοιμα εργαλεία , που μας επιτρέπουν να δημιουργήσουμε rounded 
corners , όμως κανένας από αυτούς τους τρόπους δεν είναι εύκολη υπόθεση .



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





Τα 
προθέματα:



-moz
  ( -moz-border-radius) δουλεύει σε  FireFox.

-webkit  ( 
-webkit-border-radius) δουλεύει σε Safari & Google Chrome.


-khtml ( -khtml-border-radius) δουλεύει σε Konqueror

 border-radius δουλεύει σε Opera and IE9 Preview 


  

Έτσι λοιπόν, με το παρακάτω παράδειγμα το div  και με  "border_radius" 
θα έχουμε  borders που θα στρογγυλεύουν κατά 12 pixels στις 
άκρες του!






.border_radius{background-color:#f4f4f4;
-moz-border-radius:12px;/* Gecko */ 
-webkit-border-radius:12px;/* Safari and Chrome */
-khtml-border-radius: 12px;/* for (old) Konqueror */ 
border-radius:12px;/* W3C, Opera and IE9 Preview */ 
border:2px solid # 3a6b8c;
padding:40px;
width:310px;
}


Και το HTML για  το box μας θα είναι : 



<div class="my-box"> Είμαι ένα όμορφο rounded box </div>







Είμαι ένα όμορφο rounded box




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






Rounded Corner CSS3 Boxes





















Δεν θέλετε να είναι και οι τέσσερις γωνίες στρόγγυλες ?

Δεν υπάρχει κανένα πρόβλημά ! Χρησιμοποιήστε το radious σε 
συγκεκριμένες γωνίες μόνο , όπως για παράδειγμα :




.custom_box_radius {
     border-top-right-radius: 20px;
     border-bottom-left-radius: 20px;
    -moz-border-radius-topright: 20px;
     -moz-border-radius-bottomleft: 20px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    border: 1px solid  #000;
     padding: 45px;
    background-color: #ccc;
   width: 310px;
} 










Το box μας έχει μόνο δυο rounded corners




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



















Και το HTML για το box μας θα είναι : 



<div class="custom_box_radius"> Το box μας έχει μόνο δυο rounded corners</div>




Δείτε ένα παράδειγμα για το πως μπορούμε να χρησιμοποιήσουμε την  εντολή border_radius για να δημιουργήσουμε ένα απλό αλλά όμορφο Web2 button μόνο με CSS3  .






a.button {
 border: 1px solid  #96d1f8;
 padding: 10px 20px 10px;
 color: #f2f2f2;
 text-decoration: none;
 font-size:19px;
 font-family: Georgia, serif;
 line-height: 30px;
 background: #a2ceeb;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
} 




Και το HTML για το button μας θα είναι : 



<a class="button" href="#">I'm a pretty button</a>




Έτσι το αποτέλεσμα μας θα είναι αυτό το όμορφο button .






I'm a pretty button








Και αυτό είναι το screenshot.

















Ας δούμε άλλο ένα παράδειγμα με μια φωτογραφία :




.rounded-foto {
width: 250px;
height: 120px;
background: url(http://2.bp.blogspot.com/_L116RpGjEMY/TBerxsatb0I/AAAAAAAAB2s/SZsuBkLEvdQ/s1600/pool.jpg);
-moz-border-radius-topleft: 35px;
-moz-border-radius-bottomright:35px;
-webkit-border-top-left-radius: 35px;
-webkit-border-bottom-right-radius: 35px;
border-radius-topleft: 35px;
radius-bottomright:35px;
border-top-left-radius: 35px;
border-bottom-right-radius: 35px;
}




Και θα έχουμε αυτό το αποτέλεσμα :













Αυτό είναι το screenshot.

























Όπου θέλουμε να εμφανιστεί αυτή η φωτογραφία μας απλά θα επικολλήσουμε τον  HTML κώδικα:




<div class="rounded-foto">
</div>




Βέβαια, η εντολή border-radius μπορεί να χρησιμοποιηθεί για οτι θελήσουμε εμείς και σε όποιο στοιχείο θέλουμε, είτε για τις εικόνες μας ,είτε για το κύριο τμήμα των αναρτήσεων μας είτε για οτι άλλο μας αρέσει.



Παράδειγμα χρήσης της εντολής border-radius στο style sheet μας :



#container {
width: 900px;
margin: 0 auto;
background-color: #777;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
}


Αρκετά εντυπωσιακό έτσι ?....













































































































Gradient Borders
Gradient borders είναι άλλο ένα πολύ χρήσιμο border property .

Αλλά τι είναι το καινούργιο σε αυτό ? Το νέο στοιχείο είναι ότι, μπορείτε να καθορίσετε πολλές τιμές χρώματων στα borders για το κάθε pixel. Ας πούμε ότι έχουμε borders με πλάτος 6 pixel, τότε μπορούμε να ορίσουμε 6 διαφορετικά χρώματα .



Δυστυχώς σήμερα,μόνο το Firefox υποστηρίζει αυτό το property .

Και χρησιμοποιεί την σύνταξη : -moz-border-top-colors: value;  ,για το top border , πρέπει να κάνετε το ίδιο για το κάτω μέρος , αριστερά και δεξιά .



Η τιμή μπορεί να οριστεί σε pixel. Για παράδειγμα :  -moz-border-left-colors: 10px;



Gradient borders μπορεί να φαίνονται φανταστικά και αποτελεσματικά αν χρησιμοποιηθεί σωστά ο κωδικας .

Αυτός ο κωδικός είναι λίγο πιο περίπλοκος , γιατι απαιτεί να ορίσετε κάθε χρώμα απο τα borders ξεχωριστά  .



Όπως θα δείτε το χρώμα των borders αρχίζουν με σκούρο χρώμα και ανοίγουν σταδιακά προς το τέλος.Αυτό το κάνουμε για να δώσουμε στα borders την ψευδαίσθηση οτι χρησιμοποιείται Gradient .





Ο κωδικός CSS είναι:




.content {
width: 400px;
background-color: #f4f4f4;
border: 9px solid #000;
-moz-border-bottom-colors: #5C680C #8A9A24 #ACBA4C #BCCA63 #C7D476 #D7E28B #DAE49B #E7EFB6;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #4F39BD #486DD1 #5F82E2 #7692DF #99ADE4 #ABBCEC #B5C3EB #CBD5F3;
-moz-border-right-colors: #A22452 #BD3969 #E66464 #EF8383 #F09A9A #F5ADAD #F5C0C0 #F3D7D7;
padding: 5px 5px 35px 15px;
}














Box με πολύχρωμα gradient border.





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


























Και άλλο ενα παράδειγμα με  gradient border σε συνδυασμό με rounded corners 




 #content_radius {
      border: 10px solid #c4c8cc;
      -moz-border-radius: 15px;
      border-radius: 15px;
      -webkit-border-radius: 15px;
      -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A;
      -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A;
      -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A;
      -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A;
      padding: 5px 5px 35px 15px;
    }












Box με  πολύχρωμα gradient border




Και αυτό είναι το screenshot.

































































CSS3 Border Image
Border images είναι μια από τις πιο χρήσιμες προσθήκες .

CSS έχει τη δυνατότητα να κάνει  repeat, η stretch στα  Border images , όπως εσείς επιλέξετε.



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



Για να εφαρμόσουμε τα Border images , χρησιμοποιούμε το CSS





border-image: url(border.png) 25 25 25 27 round round;


Τα 
προθέματα:





-moz
  ( -moz-border-image) δουλεύει σε  FireFox.

-webkit
  ( 
-webkit-border-image) δουλεύει σε Safari & Google Chrome.


-khtml ( -khtml-border-image) δουλεύει σε Konqueror


 border-( border-image  ) δουλεύει σε Opera & IE9 Preview











































Border Image (round)


Θα χρησιμοποιήσουμε την παρακάτω εικόνα για τα border μας .









Χρησιμοποιώντας το border-image round, η εικόνα μας θα πρέπει να επαναληφθεί, κλιμακωτά/ γύρο από το στοιχείο μας.



 CSS κώδικας μας θα μοιάζει :






-moz-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 round; border: 15px solid rgb(196, 200, 204); 
-khtml-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 round; border: 15px solid rgb(196, 200, 204); 
border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 round; border: 15px solid rgb(196, 200, 204); 
-webkit-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 round; border: 15px solid rgb(196, 200, 204); 





Και το αποτέλεσμα θα είναι αυτό : 





Πρώτα απ'ολα πρέπει να δημιουργήσουμε τα βασικά borders και αυτά θα γεμίσουν αυτόματα απο τα border images που θα χρησιμοποιήσουμε.




Και αυτό είναι το screenshot.













































CSS 3 Border Image (stretch)


Ενναλακτικα , χρησιμοποιώντας το border-image stretch, η εικόνα μας θα πρέπει να επεκταθει ,να επαναληφθεί η πλευρά των borders με το μήκος και το ύψος του στρώματος που περιέχει .





-moz-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 40 40 40 40 stretch; border: 15px solid rgb(196, 200, 204); 
-khtml-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 40 40 40 40 stretch; border: 15px solid rgb(196, 200, 204); 
border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 40 40 40 40 stretch; border: 15px solid rgb(196, 200, 204); 
-webkit-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 40 40 40 40 stretch; border: 15px solid rgb(196, 200, 204);





Και θα έχουμε αυτό το αποτέλεσμα :






Πρώτα απ'ολα πρέπει να δημιουργήσουμε τα βασικά borders και αυτά θα γεμίσουν αυτόματα από τα border images που θα χρησιμοποιήσουμε.




Και αυτό είναι το screenshot.

















Σε αυτή την περίπτωση απλά αλλάζοντας την τιμή από τα borders (border-top, border-right, border-bottom, border-left) από 40 σε 30  θα έχουμε αυτό το αποτέλεσμα  




-moz-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 stretch; border: 15px solid rgb(196, 200, 204); 
border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 stretch; border: 15px solid rgb(196, 200, 204);
-khtml-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 stretch; border: 15px solid rgb(196, 200, 204);
-webkit-border-image: url(http://3.bp.blogspot.com/_L116RpGjEMY/TBwcGAq9xfI/AAAAAAAAB4Q/7k--M6YpjyE/s200/borderi.png) 30 30 30 30 stretch; border: 15px solid rgb(196, 200, 204);






Πρώτα απ'ολα πρέπει να δημιουργήσουμε τα βασικά borders και αυτά θα γεμίσουν αυτόματα από τα border images που θα χρησιμοποιήσουμε.




Και αυτό είναι το screenshot.





















Για να μάθετε περισσότερα και να κατανοήσετε καλύτερα τις border-image ιδιότητες , θα ήταν καλό να επισκεφτείτε την ιστοσελίδα  lrbabe.com , όπου θα δείτε πολλά ενδιαφέροντα παραδείγματα .







































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


Το ξέρω οτι σας άνοιξα την όρεξη να δείτε και να μάθετε περισσότερα για το τι άλλο μπορεί να κάνει για μας το CSS3  , όμως κάντε υπομονή μέχρι το επόμενο άρθρο , όπου θα δούμε πως δημιουργούμε 
Σκιά γύρο από κάποιο στοιχείο μας  - box shadow



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

        



Εισαγωγή στο CSS3 - Μέρος 1ο: Τι είναι το CSS3
noreply@blogger.com (Σοφία) — Wed, 16 Jun 2010 15:16:00 +0000






Από καιρό ήθελα να γράψω ένα άρθρο με θέμα τις νέες δυνατότητες του CSS 3 και τώρα που τελείωσε η εξεταστική μου και έχω λίγο παραπάνω χρόνο ,νομίζω ότι είναι η πιο κατάλληλη στιγμή να το κάνω  !



Το άρθρο αυτό σηματοδοτεί την αρχή για τα υπόλοιπα άρθρα που θα ακολουθήσουν, στα οποία θα δούμε τι είναι το νέο CSS3 πρότυπο το οποίο εδώ και λίγο καιρό έχει αντικαταστήσει το CSS2.



  
Θα ξεκινήσουμε από την αρχή - για όλους αυτούς που μπορεί να μην έχουν καν ακούσει για CSS3, για να κατανοήσετε όλοι και δείτε με παραδείγματα αργότερα τι είναι και τι το διαφορετικό έχει το CSS3.













Τι είναι το CSS3 .
CSS3 είναι η επόμενη γενιά του CSS το οποίο
 βρίσκεται σε μια συνεχή φάση ανάπτυξης και αναμένεται να αλλάξει όλο τον παγκόσμιο ιστό όταν οριστικοποιηθεί .

Είναι σε εξέλιξη από το 2002 και δεν έχει ακόμη ολοκληρωθεί.

Τα περισσότερα προγράμματα περιήγησης (με εξαίρεση το IE ) υποστηρίζουν σε μεγάλο βαθμό τις ιδιότητες του CSS 3.



Χρησιμοποιώντας CSS3 μπορούμε να δημιουργήσουμε όμορφα εφέ, που με τις κλασικές μεθόδους χρειαζόμαστε αρκετό κόπο, javascript και περισσότερο γράψιμο xHTML/CSS.

Αντί να χρησιμοποιήσουμε λοιπόν τις εικόνες και πολύπλοκο CSS μπορούμε να καθορίσουμε έναν νέο CSS3 κανόνα πχ. στρογγυλεμένες γωνίες και τα δεδομένα να παράγονται από τα browsers , μειώνοντας έτσι χρόνο φόρτωσης και sever requests.

CSS3 ιδιότητες  επιτρέπουν  να γίνει μια πολύ καλύτερη διαδικασία το 
web design και αν ρίξετε μια μάτια σε ξένες ιστοσελίδες θα δείτε ότι ήδη οι περισσότεροι web designers βασίζονται αποκλειστικά η εν-μέρη στο CSS3 για την κατασκευή ιστοσελίδων .



   Οι περισσότερες CSS3 τεχνικές μπορεί ήδη να εφαρμόζονται στα πρότυπά σας .

Το σίγουρο είναι πάντως ,ότι τα καινούργια πρότυπα που διαθέτει το Blogger σίγουρα χρησιμοποιούν CSS3 .













Το CSS3 Σήμερα : 


Αυτήν τη στιγμή - Safari, Chrome, Firfox, Opera 10.5 alpha και  IE9 Preview υποστηρίζουν μεγάλη ποικιλία από συγκεκριμένες CSS3  μορφές.

Το μειονέκτημα με το CSS3 όπως με όλα τα web design είναι ότι IE δεν τα υποστηρίζει πλήρως . ( και τι υποστηρίζει να μου πείτε,αλλά άλλο κεφάλαιο αυτό )

Η τρέχουσα σταθερή έκδοση του IE8 browser έχει ελάχιστη υποστήριξη για CSS3 , Όμως το IE9 που είναι σήμερα σε εξέλιξη θα υποστηρίζει πλήρως το CSS3.

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













Τα 
χαρακτηριστικά και τα οφέλη του CSS3


CSS3 
προσφέρει κάποια σπουδαία  νέα  selectors , τα  οποία θα δώσουν στους web designers, 
όχι μόνο καλύτερη εμφάνιση από τις εικόνες, αλλά και πολλές δυνατότητες εξοικονόμηση 
χρόνου  για να έχουν το επιθυμητό τελικό αποτέλεσμα .

Τα κύρια οφέλη του CSS3 είναι ότι επιτρέπει την δημιουργία  λειτουργιών  του στυλ  Javascript , χωρίς όμως να χρησιμοποιείται .

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













Τι Μπορούμε να κάνουμε με  CSS3 


Εδώ είναι μια μικρή λίστα από CSS3 selectors   




Στρογγυλεμένες  γωνίες  (rounded corners) 
Gradients
Σκιά σε κείμενο (text shadow)
Animations
Διαφάνεια (Opacity)
 Box shadow
Χρήση πολλαπλών εικόνων φόντου (Multiple background images )
RGB τιμές χρωμάτων (RGB color values)
Χρήση οποιαδήποτε γραμματοσειράς επιθυμούμε με  @font-face  
Border image  και Multiple borders  
Opacity  
User 
interfaces,όπως box sizing και  resizing
Multi –column

Και αρκετά άλλα .



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



















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


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






Στην επόμενη ανάρτηση θα δούμε εντολές για  Στρογγυλεμένες  γωνίες  (rounded corners) .



Γι 'αυτό μείνετε συντονισμένοι και δεν θα χάσετε !

        



100%  CSS οριζόντιο  Drop Down Menu
noreply@blogger.com (Σοφία) — Tue, 15 Jun 2010 14:35:00 +0000






Στην προηγούμενη ανάρτηση είχαμε δει πως δημιουργούμε  ένα όμορφο CSS Image rollover menu .

 Σήμερα , θα δούμε άλλη μια παραλλαγή του  rollover menu .Θα προσθέσουμε σε αυτό το  μενού , Drop Down στοιχεία υπομενού  .



Χρησιμοποιώντας Pure Drop Down Menu CSS, μπορείτε να προσθέσετε όσα πολυεπίπεδα στοιχεία υπομενού θέλετε  .



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



Πρώτα ας δούμε το  HTML.



Σημείωση : Τοποθετήστε τον παρακάτω κώδικα  μέσα στο  </body> ετικέτα της ιστοσελίδας σας, όπου θέλετε να εμφανιστεί το μενού η πηγαίνετε Προσθήκη gadget >> HTML/JavaScript  και εισάγετε τον κώδικα εκεί  :  




<!-- Αρχίζει το Menu -->

<ul id='topnav'>

<li class='current_page_item'><a href='/'>Home</a></li>



<li><a href='http://bloggertrics.blogspot.com/' title='Blogger Tricks'>Blogger Tricks</a></li>

<li><a href='http://loneeagle110.blogspot.com/' title='Στάλες στο γαλάζιο'>Στάλες στο γαλάζιο</a>

</li>

<li><a href='http://bloggertrics.blogspot.com/search/label/My%20blogger%20templates' title='Blogger Templates'>Templates</a>

<!-- Εδώ αρχίζει το SubMenu -->

<ul>

<li><a href='#' title='Τιτλος 1'>Τιτλος 1</a></li>

<li><a href='#' title='Τιτλος 2'>Τιτλος 2</a></li>



<li><a href='#' title='Τιτλος 3'>Τιτλος 3</a></li>

<li><a href='#' title='Τιτλος 4'>Τιτλος 4</a></li>

<li><a href='#' title='Τιτλος 5'>Τιτλος 5</a></li>

<li><a href='#' title='Τιτλος 6'>Τιτλος 6</a></li>

<li><a href='#' title='Τιτλος 7'>Τιτλος 7</a></li>



<li><a href='#' title='Τιτλος 8'>Τιτλος 8</a></li>

</ul>

<!-- Εδώ τελειώνει το SubMenu -->

</li>

<li><a href='http://bloggertrics.blogspot.com/search/label/blogger%20tips' title='Blogger Tips'>Tips</a>

<!-- Εδώ αρχίζει το SubMenu -->

<ul>

<li><a href='http://bloggertrics.blogspot.com/search/label/Image%20Effects' title='Image Effects'>Image Effects</a></li>



<li><a href='#' title='Τιτλος 2'>Τιτλος 2</a></li>

<li><a href='#' title='Τιτλος 3'>Τιτλος 3</a></li>

<li><a href='#' title='Τιτλος 4'>Τιτλος 4</a></li>

<li><a href='#' title='Τιτλος 5'>Τιτλος 5</a></li>

<li><a href='#' title='Τιτλος 6'>Τιτλος 6</a></li>

<li><a href='#' title='Τιτλος 7'>Τιτλος 7</a></li>

<li><a href='#' title='Τιτλος 8'>Τιτλος 8</a></li>

</ul>

<!-- Εδώ τελειώνει το SubMenu -->

</li>

   <li><a href='http://bloggertrics.blogspot.com/search/label/Blogger%20Widgets' title='Widgets'>Widgets</a>



<li><a href='#' title='Τιτλος 1'>Τιτλος 1</a></li>

<li><a href='#' title='Τιτλος 2'>Τιτλος 2</a></li>

<li><a href='#' title='Τιτλος 3'>Τιτλος 3</a></li>

<li><a href='#' title='Τιτλος 4'>Τιτλος 4</a></li>

<li><a href='#' title='Τιτλος 5'>Τιτλος 5</a></li>

<li><a href='#' title='Τιτλος 6'>Τιτλος 6</a></li>

<li><a href='#' title='Τιτλος 7'>Τιτλος 7</a></li>

</ul>

<!-- Εδώ τελειώνει το SubMenu --></li>

</ul>

<!-- Τελειώνει το Menu -->




Μπορείτε να προσθέσετε όσες ετικέτες  και οσα  Drop Down στοιχεία υπομενού εσείς θέλετε  .





Το επόμενο βήμα είναι να γράψουμε  το CSS , για να πάρει σχήμα το μενού μας .



Ο βασικός μας CSS κώδικας :




#topnav {

margin: 0px;

padding: 5px 5px 5px 5px;

float: left;

z-index:8;

background-color:#000;

}



#topnav ul {

float: left;

list-style: none;

margin: 0px;

padding: 0px;

}



#topnav li {

float: left;

list-style: none;

margin: 0px;

padding: 0px;



}



#topnav li a, #topnav li a:link {

color: #FFFFFF;

display: block;

font-family: Arial, Tahoma, Verdana;

font-size: 12px;

font-weight: bold;

margin: 0px 5px 0px 0px;

padding: 8px 15px 8px 15px;

text-decoration: none;

text-transform: uppercase;

-moz-border-radius-topleft: 5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-bottomright: 5px;

-moz-border-radius-bottomleft: 5px;

-khtml-border-radius: 5px;

-webkit-border-top-left-radius: 5px;

-webkit-border-top-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

border-radius: 5px;

}



#topnav li a:hover {

background-color: #F76C10;

color: #FFFFFF;

margin: 0px 5px 0px 0px;

padding: 8px 15px 8px 15px;

-moz-border-radius-topleft: 5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-bottomright: 5px;

-moz-border-radius-bottomleft: 5px;

-khtml-border-radius: 5px;

-webkit-border-top-left-radius: 5px;

-webkit-border-top-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

border-radius: 5px;

}



#topnav li li a, #topnav li li a:link, #topnav li li a:visited {

background-color:#000;

width: 150px;

color: #FFFFFF;

float: none;

margin: 0px 0px 0px -1px;

padding: 7px 10px 7px 10px;

border-bottom: 1px dashed #222;

border-left: 1px dashed #222;

border-right: 1px dashed #222;

-moz-border-radius-topleft: 0px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 0px;

-moz-border-radius-bottomleft: 0px;

-khtml-border-radius: 0px;

border-radius: 0px;

-webkit-border-top-left-radius: 0px;

-webkit-border-top-right-radius: 0px;

-webkit-border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 0px;

}



#topnav li li a:hover {

background:#f08c34;

color: #FFFFFF;

margin: 0px 0px 0px -1px;

padding: 7px 10px 7px 10px;

-moz-border-radius-topleft: 0px;

-moz-border-radius-topright: 0px;

-khtml-border-radius: 0px;

-webkit-border-top-left-radius: 0px;

-webkit-border-top-right-radius: 0px;

-webkit-border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 0px;

}



#topnav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 180px;

margin: 0px;

padding: 0px;

}



#topnav li li { 

}



#topnav li ul a { 

width: 150px;

}



#topnav li ul a:hover, #topnav li ul a:active { 



}



#topnav li ul ul {

margin: -30px 0 0 171px;

}



#topnav li:hover ul ul, #topnav li:hover ul ul ul{

left: -999em;

}



#topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul{

left: auto;

}



#topnav li:hover {

position: static;

}



#topnav .current_page_item a {

background-color: #F76C10;

color: #FFFFFF;

-moz-border-radius-topleft: 5px;

-moz-border-radius-topright: 5px;

-khtml-border-radius: 5px;

-webkit-border-top-left-radius: 5px;

-webkit-border-top-right-radius: 5px;

-webkit-border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 0px;

}


Σημείωση : Εισάγετε  τον παραπάνω CSS κώδικα πάνω από την ετικέτα  ]]></b:skin>  στο πρότυπο σας .



Δείτε το μενού σε λειτουργία



 Κατανόηση του κώδικα που μπορείτε να επεξεργαστείτε :  



background-color:#000; -  -> Το χρώμα υπόβαθρου από το μενού , το οποίο σε αυτή την περίπτωση είναι το μαύρο



 color: #FFFFFF; -> Το χρώμα της γραμματοσειράς



background-color: #F76C10; -> Το hover χρώμα κάθε στοιχείου li  του μενού , το οποίο είναι το πορτοκαλί . 



background:#f08c34;  -> Το hover χρώμα κάθε στοιχείου li  από το SubMenu  του μενού .



Επεξεργαστείτε το κάθε στοιχείο , μέχρι να  βρείτε αυτό που σας αρέσει . 



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

        



10 χρήσιμα Screen capture εργαλεία για να κανετε λήψη screenshots
noreply@blogger.com (Σοφία) — Fri, 11 Jun 2010 11:18:00 +0000
Screen capture είναι προγράμματα που μας δίνουν την  δυνατότητα λήψης screenshots , ολόκληρης της οθόνης ,ενός ολόκληρου παραθύρου, με όλα τα περιεχόμενα που εμφανίζει ακόμη κι αν χρειάζεται scroll, η συγκεκριμένη περιοχή που θα επιλέξει ο χρήστης .

Περισσότερα από αυτά έχουν ενσωματωμένα Image editor για γρήγορη επεξεργασία του screenshot.

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



Ας ρίξουμε μια ματιά σε 10  από τα καλύτερα εργαλεία για τη λήψη screenshots.

Απολαύστε τα!



1. ScreenHunter 5







Το εργαλείο αυτό είναι καλό για όσους από εσάς ψάχνουν για ένα βασικό  Screen capture εργαλείο .

Είναι ένα δωρεάν εργαλείο  για την  εύκολη λήψη των screenshots ,όμως το μειονέκτημά του είναι ότι δεν υποστηρίζει png output .



2. EasyCapture







EasyCapture Screen Capture είναι ένα ισχυρό και εύκολο στη χρήση ελεύθερο Screen capture εργαλείο . Επιτρέπει τη λήψη των screenshot, ολόκληρου  παράθυρου οθόνης , scrolling windows screen capture η επιλεγμένες περιοχές οθόνης . Επίσης,  επιτρέπει την επεξεργασία των screenshots και την πρόσθεση των balloon stamps .



5. PicPick







 Είναι  πραγματικά ένα πολυεργαλείο για τη λήψη screenshots

 Το PicPick εκτός από την δυνατότητα λήψης screenshots ,επίσης διαθέτει πολλά ενδιαφέροντα χαρακτηριστικά όπως


Image editor για γρήγορη επεξεργασία του screenshot.
Επιλογέας χρωμάτων (color picker) και παλέτα χρωμάτων (color palette)
Χάρακας (pixel ruler)
 Απευθείας ζωγραφική πάνω στην οθόνη (Whiteboard)
Μεγεθυντικό φακό 



4 . Jing Free Version









Άλλο ένα πολύ κάλο εργαλείο είναι το Jing για Windows και Mac .

Το ιδιαίτερο χαρακτηριστικό του  Jing είναι ότι λειτουργεί γρήγορα.



5 . Bug Shooting







Είναι πολύ καλό Screen capture εργαλείο .

Εκτός από την δυνατότητα για capture εικόνας ,για ένα εντελώς δωρεάν πρόγραμμα , προσφέρει πάρα πολλά ενσωματωμένα εργαλεία και πολλές δυνατότητες .



6 . SCREENPRESSO 





 Είναι ένα δωρεάν εργαλείο που προσφέρει πολλές δυνατότητες και επιλογές , που προσφέρουν τα εμπορικά Screen capture εργαλεία  .



7. Lightshot 







 Lightshot είναι άλλο ένα δωρεάν εργαλείο για την λήψη screenshots το οποίο διατίθεται με τρεις διαφορετικούς τρόπους  Firefox Add-on, IE Add-on, αλλά και ως desktop application. Ένα από τα καλύτερα χαρακτηριστικά του LightShot είναι ότι μπορείτε να μοιραστείτε αμέσως τις εικόνες με τους φίλους σας ή στα κοινωνικά δίκτυα



8. Jet Screenshot 

















Ένα ελεύθερο  εργαλείο  για να κάνετε λήψη screenshots, να τα επεξεργαστείτε  και να τα μοιραστείτε στο διαδίκτυο μέσα σε λίγα δευτερόλεπτα.



9 .  Screenshot Studio











Άλλο ένα πολύ χρήσιμο  εργαλείο , το οποίο επίσης διατίθεται με τρεις διαφορετικούς τρόπους  Firefox Add-on, IE Add-on, αλλά και ως desktop application με πολλές δυνατότητες .



10 . SnapaShot 







 Ο πιο εύκολος και γρήγορος τρόπος για να κάνετε λήψη screenshots .



Αν έχετε και εσείς κάποιο άλλο  Screen capture εργαλείο που χρησιμοποιείται και δεν  είναι στη λίστα, μπορείτε πάντα να το μοιραστείτε μαζί μας .

        



Πράγματα που πρέπει να αποφεύγονται !!!Αυτά που με εκνευρίζουν όταν διαβάζω ενα  blog
noreply@blogger.com (Σοφία) — Mon, 07 Jun 2010 17:29:00 +0000




Κάθε νέος blogger που ξεκινάει ένα καινούργιο blog , απ 'ότι βλέπω μου φαίνεται ότι  όλοι τους κάνουν τα  ίδια λάθη  και πέφτουν στην ίδια παγίδα !

Λοιπόν, έτσι αποφάσισα να δημιουργήσω αυτή τη γρήγορη λίστα με πράγματα που με ενοχλούν  ως αναγνώστης (μπορεί πολλοί από εσάς να σκέφτονται το ίδιο δεν ξέρω ), όταν διαβάζω ένα blog και πράγματα που πρέπει  να αποφεύγονται  σε ένα blog / ιστολόγιo .

Δεν θα ασχοληθώ καθόλου με  το περιεχόμενο των αναρτήσεων ή τον τρόπο που οι άνθρωποι γράφουν και εκφράζονται . Αυτό που με ενδιαφέρει είναι  η τεχνική πλευρά των πραγμάτων καθαρά .



1 . Ενσωματωμένη μουσική  auto-play :



Απενεργοποιήσετε το σας παρακαλώ!!!!

Μουσικής σε μια ιστοσελίδα δεν είναι καθόλου καλή ιδέα!!!!!

Είναι τρομερά ενοχλητικό να μπαίνεις σε ένα blog και να παίζει μουσική αυτόματα.

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

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

Λύση :  Να δείχνετε σεβασμό στους αναγνώστες σας και  αν τόσο πολύ σας αρέσει να έχετε μουσική στο blog σας ,τότε χρησιμοποιήστε Media Players που δεν αναπαράγουν μουσική αυτόματα , έτσι οι αναγνώστες σας μπορούν να επιλέξουν αν θέλουν να ακούσουν η όχι κάποια  μουσική  .



2. Κατάχρηση των animations: 



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

Όλοι μας θέλουμε πιστεύω  να διαβάσουμε το περιεχόμενο ενός blog γρήγορα .

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

Θα πρέπει να ξέρετε ότι τα πολλά animations  αποσπούν την προσοχή
και είναι επιθετικά, κανείς δεν το εκτιμά.



3.  Αναδυόμενα κουτάκια καλωσορίσματος και κάθε "cool" πράγματα που έχετε θέσει για το blog σας



Απ 'ότι παρατηρώ τώρα τελευταία έχει πέσει επιδημία από αυτά τα κουτάκια καλωσορίσματος στην blogόσφαιρα μας :(

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

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

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



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



 4 . Πάρα πολλά scrolling  κείμενα και  scrolling τίτλοι 



Κάντε τα να σταματήσουν !!!!!!

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



Λύση :  Χρησιμοποιήστε τα σε μικρές δόσεις , σε ένα μικρο κομμάτι / μέρος του blog αν είναι τόσο απαραίτητο .



5 . Μηνύματα τύπου : " Κανένας δεν μου αφήνει σχόλια - λυπηθείτε με και επιβραβεύστε με με ένα σχόλιο "



 Όλα αυτά μου φαίνονται σαν κραυγή απελπισίας !

Καταλαβαίνω την ανάγκη σας για σχόλια, αλλά υπάρχουν πολλοί άνθρωποι που σας διαβάζουν χωρίς να αφήνουν ανούσια σχόλια .

Το ξέρω ότι οι παρατηρήσεις ενισχύουν  το γράψιμο και προσθέτουν  στο περιεχόμενο μας. Σχόλια παρακινούν  τον κάθε blogger για να συνεχίσει να  δημοσιεύσει περισσότερες αναρτήσεις και ας μην γελιόμαστε είναι μια επιβράβευση  . Ωστόσο, η διαμαρτυρία για το ότι δεν υπάρχουν σχόλια δεν πρόκειται να πείσει τους ανθρώπους να σχολιάσουν.

Αν ο αναγνώστης θέλει να σχολιάσει μια ανάρτηση , τότε ο αναγνώστης θα αφήσει ένα σχόλιο.

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



6 .Πάρα πολλά Blogs με το ίδιο περιεχόμενο και  Blogs χωρίς θεματολογία.



Παρατηρώ ότι  αν ένα blog  με μια  συγκεκριμένη θεματολογία αρχίζει και ξεχωρίζει , ξαφνικά εμφανίζονται 100 άλλα blogs με την ίδια ακριβώς θεματολογία .

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

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

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



Λύση :Μην γράφετε για πράγματα για τα οποία δεν γνωρίζετε μόνο και μόνο γιατί  βλέπετε ότι μια θεματολογία "πουλάει " και νομίζετε ότι αν γράψετε γι αυτό θα τραβήξετε περισσότερους αναγνώστες .

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





7.  Τεράστιες εικόνες στην ανάρτηση 



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

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



Λύση: Χρησιμοποιήστε  προγράμματα  επεξεργασίας εικόνας , desktop ή σε online σύνδεση για να μετατρέψετε τις εικόνες σας σε σωστό μέγεθος και να έχουν την ισορροπία ποιότητας και βάρους . Χρησιμοποιήστε εργαλείο συμπίεσης εικόνας ή να προσπαθήστε  όταν κάνετε αναζήτηση εικόνων να βρείτε εικόνες σωστού μεγέθους  .



 8. Κλεμμένο περιεχόμενο !



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

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



9 . Ελλείπεις στοιχεία επικοινωνίας και  Δεν υπάρχει σελίδα "Για μένα"  




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

Είναι πολύ ενοχλητικό να ψάχνεις τρόπους επικοινωνίας με ένα blogger και να μην μπορείς να βρεις .!



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

Οι επισκέπτες συχνά θέλουν να ανακαλύπτουν  το πρόσωπο πίσω από ένα blog.Κάποιες βασικές πληροφορίες σχετικά με εσάς (συμπεριλαμβανομένων των στοιχείων επικοινωνίας) και όλα αυτά  θα πρέπει να είναι μόνο ένα κλικ μακριά από την κύρια σελίδα σας.



Λύση :  Το Blogspot το κάνει αυτό αρκετά εύκολο - υπάρχει ένα widget "για μένα"  που συνδέεται αυτόματα στο blog σας . Αλλά υπάρχουν και άλλες επιλογές. Μπορείτε πολύ απλά να δημιουργήσετε μια στατική σελίδα με τα στοιχεία σας και  με μια φόρμα επικοινωνίας .





10 . Popup windows- ενοχλητικές διαφημίσεις



Δεν νομίζω ότι κάποιος θέλει πραγματικά τα pop-ups.

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



    Για να έχετε ένα όμορφα σχεδιασμένο blog , δεν χρειάζεται να είστε επαγγελματίες ούτε να γνωρίζετε από κωδικοποίηση .

Άπλα βρείτε άμορφα σχεδιασμένα και ποιοτικά πρότυπα για το blog σας και μην τα παραφορτώνετε με διάφορα άχρηστα widgets και JavaScript  .

Κρατήστε το blog σας "καθαρό " , απλό και εύχρηστο , αυτό πραγματικά θα το εκτιμήσουν και οι αναγνώστες σας.



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



Θα ήταν πολύ ενδιαφέρον να ακούσω και την άποψη σας για το θέμα  !



Μήπως με βρίσκετε λίγο υπερβολική ? .....



Αλήθεια , εσάς τι σας εκνευρίζει  και τι σας ενοχλεί ????





        



Όμορφο  Image rollover  menu Updated!
noreply@blogger.com (Σοφία) — Sat, 05 Jun 2010 10:49:00 +0000
Καλησπέρα σε όλους και καλό καλοκαιράκι  :) !



Σήμερα είπα να δούμε ένα όμορφο CSS Image rollover menu .



Πολλοί χρησιμοποιούν  επεξεργαστές εικόνας όπως Paint Shop Pro..  η παρόμοια προγράμματα για να δημιουργήσουν JavaScript image rollovers , όμως είναι πολύ πιο εύκολο να κάνετε  μια

rollover εικόνα  χωρίς JS, Χρησιμοποιώντας μόνο CSS.



Οι σύνδεσμοι πρέπει να είναι τοποθετημένοι σε ένα κατάλογο με την ανάλογη εντολή .



Σημείωση : Τοποθετήστε αυτό το div μέσα στο </body>
 ετικέτα της ιστοσελίδας σας, όπου θέλετε να εμφανιστεί  το μενού η πηγαίνετε Προσθήκη 
gadget >> HTML/JavaScript  και εισάγετε τον κώδικα εκεί  :  




<div id='navbar'>   

        <ul>

            <li><a class='home' href='#'>home</a></li>

            <li><a href='#'>About </a></li>

            <li><a href='#'>Widgets</a></li>

            <li><a href='#'>Freebies</a></li>

            <li><a href='#'>Forum</a></li>

            <li><a href='#'>Resources</a></li>

            <li><a href='#'>Contact</a></li>

            <li><a href='#'>Αρχεία</a></li>

        </ul><br class='spacer'/>

    </div>





Όπως βλέπετε παρακάτω , ακόμη το μενού μας δεν είναι και τίποτα το σπουδαίο .




home
About 
Widgets
Freebies
Forum
Resources
Contact
Αρχεία





Ο ακόλουθος CSS κώδικας όμως θα το μετατρέψει όμως σε ένα όμορφο image rollover μενού πλοήγησης και θα χρησιμοποιήσουμε μόνο 1 εικόνα .










#navbar ul{

    margin:0px;

    padding:0px;

   list-style:none;

   width:auto;   

    }

   

#navbar ul li{

    font:bold 13px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;

    color:#FFF8F0;

    text-align:center;

    background-color:#000;

    width:71px; 

    float:left;

    }   

#navbar ul li a{

    font:bold 13px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;

    color:#FFF8F0;

    text-align:center;

    text-decoration:none;

    display:block;

    text-transform:uppercase;

    background-color:#000;   

    }   

#navbar ul li a.home{

    background:url(http://2.bp.blogspot.com/_Q6tRnBVZnko/S-QYge0-cII/AAAAAAAAAyA/xoUE7XxpmGA/s1600/header_nav_bg.gif) no-repeat 0 0 #34160C;

    font:bold 13px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;

    color:#FFF8F0;

    text-align:center;

    text-decoration:none;

    display:block;

    text-transform:uppercase;   

    }

#navbar ul li a:hover{

    background:url(http://2.bp.blogspot.com/_Q6tRnBVZnko/S-QYge0-cII/AAAAAAAAAyA/xoUE7XxpmGA/s1600/header_nav_bg.gif) no-repeat 0 0 #34160C;

    color:#FFF8F0;

    }


Σημείωση : Εισάγετε  τον παραπάνω CSS κώδικα πριν την ετικέτα  ]]></b:skin>  στο πρότυπο σας .



Και το αποτέλεσμα είναι αυτό :








home
About 
Widgets
Freebies
Forum
Resources
Contact
Αρχεία









Όμορφο ,απλό και εύκολο και χωρίς να χρειάζεται JS .



Ίδιο μενού χωρίς εικόνα , μόνο με την χρήση CSS :

  

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

Έτσι παρακάτω θα δείτε άλλη μια έκδοση του συγκεκριμένου  menu που είναι ακριβώς ίδια , αλλά δεν χρησιμοποιείτε εικόνα , μόνο CSS  και υποστηρίζει μεγάλες λέξεις .



Εδώ είναι ο CSS κώδικας  που θα χρειαστείτε :

Σημείωση : Εισάγετε  τον παραπάνω CSS κώδικα πριν την ετικέτα  ]]></b:skin>  στο πρότυπο σας .




 #navbar ul{

margin:0px;

padding:0px; 

list-style:none;

width:auto; 

}



#navbar ul li{

font:bold 13px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;

color:#FFF8F0;

text-align:center;

background-color:#000; 

width:100px; 

float:left;

} 

#navbar ul li a{

font:bold 13px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;

color:#FFF8F0;

text-align:center;

text-decoration:none;

display:block;

text-transform:uppercase;

background-color:#000; 

} 

#navbar ul li a.home{

background-color: #F76C10;

-moz-border-radius: 8px; 

-khtml-border-radius: 8px; 

-webkit-border-radius: 8px; 

border-radius: 8px;

font:bold 13px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;

color:#FFF8F0;

text-align:center;

text-decoration:none;

display:block;

text-transform:uppercase; 

}

#navbar ul li a:hover{

 background-color: #F76C10;

-moz-border-radius: 8px; 

-khtml-border-radius: 8px; 

-webkit-border-radius: 8px; 

border-radius: 8px;

color:#FFF8F0;

}


  O κώδικας div μέσα στο </body> , για να ενεργοποιήσετε το μενού παραμένει ο ίδιος  . Θα το βρείτε στην αρχή αυτής της αναρτήσεις .



Και το αποτέλεσμα είναι αυτό :  









Αρχική 
Για μένα
Πληροφορίες
Αποτελέσματα
Επικοινωνία







Ακριβώς το ίδιο αποτέλεσμα και μόνο με CSS  : )



Κατανόηση του κώδικα :   





margin:0px; -> Αν θέλετε να μετακινήσετε το μενού προς τα δεξιά αλλάξτε το 0px σε 50px η σε 80px μέχρι να βρείτε την θέση που θέλετε να εμφανίζετε 

  

padding:0px; -> Αν θέλετε να ανεβάσετε το μενού προς τα επάνω αλλάξτε το 0px σε 50px η σε άλλο μέχρι να βρείτε την θέση που θέλετε να εμφανίζετε 



color:#FFF8F0;  -> Το χρώμα της γραμματοσειράς



background-color:#000;  -> Το χρώμα υπόβαθρου από το μενού , το οποίο σε αυτή την περίπτωση είναι το μαύρο



 width:100px;   -> Το πλάτος από κάθε στοιχείο li



background-color: #F76C10;   -> Το hover χρώμα κάθε στοιχείου li , το οποίο είναι το πορτοκαλί . 



Μπορείτε να επεξεργαστείτε το κάθε στοιχείο μέχρι να  βρείτε αυτό που σας αρέσει . 

        



Μην ξεχάσετε να καταχωρήσετε το ιστολόγιό σας στις Μηχανές Αναζήτησης
noreply@blogger.com (Σοφία) — Mon, 31 May 2010 16:57:00 +0000






 Σύμφωνα με τα στατιστικά, το 87% της κίνησης (traffic) στο internet, δημιουργείται από τις μηχανές αναζήτησης (search engines) .

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



Ενώ είναι πιθανό ότι οι μεγάλες μηχανές αναζήτησης κάποια στιγμή θα  το βρουν  το blog σας τελικά, γιατί να περιμένετε από  τις μηχανές αναζήτησης για το πότε και αν  αναζητήσουν την ιστοσελίδα σας / blog . Κάντε μόνοι σας την Υποβολή του blog  σας σε μηχανές αναζήτησης, πριν το κάνουν αυτόματα.



Μερικες από τις  πιο δημοφιλέστερες και μεγαλυτερες  μηχανές αναζήτησης είναι  :  Google, Yahoo, MSN, κλπ. Μπορείτε να υποβάλετε ακόμη Feed URL σας ή Sitemap σε ορισμένες μηχανές αναζήτησης. Αλλά καλο ειναι να βεβαιωθείτε πρωτα πριν από την υποβολή.

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



Κατάλογος των μηχανών αναζήτησης :



Παρακάτω αναφέρονται οι συνδέσεις από μερικές πιο δημοφιλείς μηχανές αναζήτησης.

Μπορείτε να υποβάλετε το URL του blog σας  σε αυτές τις μηχανές αναζήτησης δωρεάν  .




Google Search
Yahoo Search 
Bing Search
Alexa Web Search 
Exalead 



Υπηρεσίες καταχώρισης :



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

Κάποια από αυτά προσφέροντα να καταχωρήσουν  το URL σας σε περισσότερες από εκατό μηχανές αναζήτησης και προσφέρουν αρκετές υπηρεσίες παρακολούθησης .

Είναι ίσως ο πιο γρήγορος τρόπος να καταχωρίσετε το URL σας στις περισσότερες μηχανές αναζήτησης


AddMe 
PingMyBlog 
FastSubmit 
Searchengineoptimising 
Freewebsubmission 
Amfibi  
LocalSubmit 
Submit Express  

        



Recent posts widget για blogger με thumbnails
noreply@blogger.com (Σοφία) — Wed, 26 May 2010 14:13:00 +0000
Προσθέστε ένα όμορφο recen posts  widget στο blog σας εύκολα και γρήγορα .

 

Αυτό το συγκεκριμένο widget είναι βασισμένο στο Mlxperience's -- "Recent Posts Widget" .

Στο οποίο όμως έχουν προστεθεί μερικά χαρακτηριστικά , όπως το  Read More , Comment Bubble και  Ημερομηνία ανάρτησης .



 

Παρακάτω είναι ο πλήρες κώδικας.



Μπορείτε να το δείτε σε λειτουργία εδώ : 



Για να το βάλετε στο blog σας :



Πηγαίνετε  Στοιχεία Σελίδας –> Προσθήκη Gadget –> HTML/JavaScript και απλά αντιγράψτε και επικολλήστε αυτόν τον κώδικα στο περιεχόμενο widget , σε όποιο σημείο  εσείς θέλετε να εμφανιστεί .






<script language="JavaScript">
  
imgr = new Array(); 

imgr[0] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";
  
imgr[1] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";

  
imgr[2] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";

  
imgr[3] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";

  
imgr[4] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";

showRandomImg = true; 

tablewidth = 300;       

 cellspacing = 5;     
borderColor = "#f3f3f3";     

bgTD = "#f3f3f3";     

imgwidth = 40;     

imgheight = 40;     

fntsize = 12;     

acolor = "#073763";     

aBold = true;     

icon = " ";     

text = "";     

fsize= "11";     

showPostDate = true;     

summaryPost = 60;     

summaryFontsize = 11;     

summaryColor = "#0b3e61";     

icon2 = " ";     

numposts = 5;     

home_page =

"http://yourblog.blogspot.com/";

</script>

<script type="text/javascript" src="http://sites.google.com/site/mybloggerscripts/js/recentposts.js"></script>

<span style="font-size:10px;float:right;"> <a href="http://bloggertrics.blogspot.com/2010/05/recent-posts-widget-blogger-thumbnails.html" target="_blank">Take This widget</a></span>


Πριν αποθηκεύσετε το widget σας ίσως θέλετε να το επεξεργαστείτε :


Για να προσαρμόσετε το πλάτος (width) του widget  ανάλογα με το πλάτος (width) του sidebar  σας .

tablewidth = 300; 


Για να προσαρμόσετε το χρώμα του πλαισίου ( border ) και το χρώμα υπόβαθρου ( background ) του widget .

borderColor = "#f3f3f3";   

bgTD = "#f3f3f3";   


Για να προσαρμόσετε το width και το height από το thumbnail image .

imgwidth = 40;   

imgheight = 40;   


Για να προσαρμόσετε το χρώμα και το μέγεθος γραμματοσειράς Τίτλου .

fntsize = 12;   

acolor = "#073763";   


Για να προσαρμόσετε το χρώμα και το μέγεθος γραμματοσειράς Σχολίων και Ημερομηνίας 

fsize= "11"; 


Για να προσαρμόσετε το χρώμα και το μέγεθος γραμματοσειράς  Κειμένου .

summaryFontsize = 11;    

summaryColor = "#0b3e61"; 


Για να προσαρμόσετε το νούμερο των αναρτήσεων που θα εμφανίζονται 

 numposts = 5; 


Και το πιο σημαντικό :  Μην ξεχάσετε να αλλάξετε το http://yourblog.blogspot.com/  με το url του blog σας .

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

    


        



Canvas- Free Blogger Template
noreply@blogger.com (Σοφία) — Wed, 26 May 2010 11:27:00 +0000



Download  
 Demo



Canvas είναι ένα ελεύθερο Premium Modern Artistic  Blogger πρότυπο .

Ένα πρότυπο με μοναδικό σχεδιασμό , όπως μπορείτε να δείτε . Με απαλά χρώματα  και πολλά έξτρα πρόσθετα .

Είναι δοκιμασμένο σε Firefox, Safari , Opera και Internet Explorer 8 .( Αν και δεν είναι 100% συμβατό με το Internet Explorer 6 και Internet Explorer 7 )



Γενικές πληροφορίες για αυτό το πρότυπο :     



  - 2 στήλες     

  - Featured post   πρόσθετο     

  - Όμορφο Multilevel NavBar     

  - Accordion sidebar  

  - Tab Widget  με 3 tabs     

  - Numbered Page Navigation     

  - Automatic Read More Function     

  - Comment Reply Option 



Wordpress Theme έχει σχεδιαστεί από www.thebookish.info και μετατροπή για blogger έγινε από εμένα .



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







Οδηγίες ρυθμίσεις  :




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


<!-- NavBar -->    

                <ul id='navBar'>     

        <li class='current_page_item'><a href='http://YOUR-LINK-HERE'>Home</a></li>     

    <li class='page_item page-item-1'><a href='http://YOUR-LINK-HERE' title='About'>About</a></li>     

        <li class='page_item page-item-2'><a href='http://YOUR-LINK-HERE' title='Multilevel'>Multilevel</a>     

<ul>     

    <li class='page_item page-item-3'><a href='YOUR-LINK-HERE' title='SubPage'>SubPage</a></li>     

    <li class='page_item page-item-4'><a href='YOUR-LINK-HERE' title='SubPage2'>SubPage2</a></li>     

        <li class='page_item page-item-5'><a href='YOUR-LINK-HERE' title='SubPage3'>SubPage3</a></li>     

    <li class='page_item page-item-6'><a href='http://YOUR-LINK-HERE' title='SubPage4'>SubPage4</a></li>     

</ul>     

</li>     

       <li class='page_item page-item-7'><a href='http://YOUR-LINK-HERE' title='Sample Page'>Sample Page</a></li>     

       <li class='page_item page-item-8'><a href='http://YOUR-LINK-HERE' title='SecMultiLevel'>SecMultiLevel</a>     

<ul>     

    <li class='page_item page-item-9'><a href='http://YOUR-LINK-HERE' title='Sub Page'>Sub Page</a></li>     

    <li class='page_item page-item-10'><a href='http://YOUR-LINK-HERE' title='Sub Page 2'>Sub Page 2</a></li>     

    <li class='page_item page-item-11'><a href='http://YOUR-LINK-HERE' title='Sub Page 3'>Sub Page 3</a></li>     

    <li class='page_item page-item-12'><a href='http://YOUR-LINK-HERE' title='Sub Page 4'>Sub Page 4</a></li>     

    <li class='page_item page-item-13'><a href='http://YOUR-LINK-HERE' title='Sub Page 5'>Sub Page 5</a></li>     

</ul>     

</li>     

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





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


<!-- Bookmark -->    

  <ul class='clearfix' id='bookmark'>     

            <li><a href='http://feeds.feedburner.com/bloggertrics' title='Join RSS feed'><img alt='RSS' src='http://1.bp.blogspot.com/_Q6tRnBVZnko/S9CS3RRZW_I/AAAAAAAAAZ4/n0YB-Rd0dwM/s1600/rss_icon.png'/></a></li>     

            <li><a href='http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Add us to Stumble'><img alt='Stumble' src='http://4.bp.blogspot.com/_Q6tRnBVZnko/S9CS6COx_-I/AAAAAAAAAaA/V02aQIxQrPE/s1600/stumble_icon.png'/></a></li>     

            <li id='sep'><a href='http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Add us to Technorati'><img alt='technorati' src='http://1.bp.blogspot.com/_Q6tRnBVZnko/S9CS_oMUDoI/AAAAAAAAAaQ/RqVgBIldvOk/s1600/technorati_icon.png'/></a></li>     

               <li><a href='http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Add us to Digg'><img alt='Digg' src='http://3.bp.blogspot.com/_Q6tRnBVZnko/S9CSSbs7VvI/AAAAAAAAAZo/nxVhogJrobQ/s1600/digg_icon.png'/></a></li>     

            <li><a href='http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Add us to Delicious'><img alt='Delicious' src='http://3.bp.blogspot.com/_Q6tRnBVZnko/S9CSycMHLRI/AAAAAAAAAZw/0AGLPee6mhU/s1600/delicious_icon.png'/></a></li>     

            <li id='last'><a href='http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Click to send this page to Twitter!'><img alt='Twitter' src='http://2.bp.blogspot.com/_Q6tRnBVZnko/S9CSKp_pE1I/AAAAAAAAAZg/Eo3sO01iiQs/s1600/twitter_icon.png'/></a></li>                       

            </ul>
2 .  Και αλλάξτε το http://feeds.feedburner.com/bloggertrics  με το δικο σας RSS FEED url 







Για να ρυθμίσετε το 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, εκεί θα δείτε κάτι σαν αυτό : 



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





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


<!-- 125x125 AdBar -->    

<ul class='adBar clearfix'>     

                <li><a href='#'><img alt='#' class='adImage' src='http://i44.tinypic.com/2utnfwj.jpg'/></a></li>     

   <li><a href='#'><img alt='#' src='http://i44.tinypic.com/2utnfwj.jpg'/></a></li>     

   <li><a href='#'><img alt='#' src='http://i44.tinypic.com/2utnfwj.jpg'/></a></li>     

   <li><a href='#'><img alt='#' src='http://i44.tinypic.com/2utnfwj.jpg'/></a></li>     

               </ul>    
2 .  Και αλλάξτε τα link  με το δικα σας 





 




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


<!-- Tabbed Nav-->    

<div id='tabbed'>     

    <!-- The tabs -->     

    <ul class='tabnav clearfix'>     

    <li class='edge'><a href='#rposts'>Recent Posts</a></li>     

    <li><a href='#blogroll'>My Blogroll</a></li>     

        <li class='edge'><a href='#archives'>Archives</a></li>     

    </ul>     

    <!-- tab 1 -->      

    <div class='tabdiv' id='rposts'>       

    <ul>       

    <li><a href='http://YOUR-LINK-HERE' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>       

    <li><a href='http://YOUR-LINK-HERE' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>       

    <li><a href='http://YOUR-LINK-HERE' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>       

    <li><a href='http://YOUR-LINK-HERE' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>       

    <li><a href='http://YOUR-LINK-HERE' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>       

    <li><a href='http://YOUR-LINK-HERE' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>       

    <li><a href='http://YOUR-LINK-HERE' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>       

    </ul>       

    </div> 

    <!-- tab 2 -->      

    <div class='tabdiv' id='blogroll'>       

<ul>       

    <li><a href='http://BLOG1-LINK-HERE' title='BLOG1-TITLE-HERE'>BLOG1-TITLE-HERE</a></li>       

    <li><a href='http://BLOG2-LINK-HERE' title='BLOG2-TITLE-HERE'>BLOG2-TITLE-HERE</a></li>       

    <li><a href='http://BLOG3-LINK-HERE' title='BLOG3-TITLE-HERE'>BLOG3-TITLE-HERE</a></li>       

    <li><a href='http://BLOG4-LINK-HERE' title='BLOG4-TITLE-HERE'>BLOG4-TITLE-HERE</a></li>       

    <li><a href='http://BLOG5-LINK-HERE' title='BLOG5-TITLE-HERE'>BLOG5-TITLE-HERE</a></li>       

    <li><a href='http://BLOG6-LINK-HERE' title='BLOG6-TITLE-HERE'>BLOG6-TITLE-HERE</a></li>       

    <li><a href='http://BLOG7-LINK-HERE' title='BLOG7-TITLE-HERE'>BLOG7-TITLE-HERE</a></li>       

</ul>    </div> 

<!-- tab 3 -->      

    <div class='tabdiv' id='archives'>       

    <ul>       

    <li><a href='http://YOUR-LINK-HERE' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>       

    <li><a href='http://YOUR-LINK-HERE' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>       

    <li><a href='http://YOUR-LINK-HERE' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>       

    </ul>       

    </div>       

</div>    
2 .  Και αλλάξτε το lINKS  με το δικά σας





 




Για να ρυθμίσετε το Featured Content Gallery (FCG) plugin : 
1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα : 


<!-- Slider -->    

<b:if cond='data:blog.pageType != &quot;item&quot;'>     

<div id='slider'>     

<ul>     

<li>     

    <div class='post-1 post hentry category-featured ' id='post-1'>     

        <h2 class='headline'><a href='http://post-link.html' rel='bookmark' title='Post Title Here'>Post Title Here</a></h2>     

        <h4 class='date'>Post Date Here</h4>     

        <div class='entry clearfix'>     

                        <a class='postImage' href='http://post-link.html'><img alt='Post Title Here' src='http://i40.tinypic.com/25ibww4.jpg'/></a>     

                Consectetur adipiscing elit. Nullam elementum leo ac orci luctus accumsan. Pellentesque nibh metus, tristique eu venenatis vitae, euismod at justo. Suspendisse hendrerit augue urna. Fusce pellentesque varius nibh volutpat pellentesque. Fusce id tellus quam, quis gravida nisl. Suspendisse at tellus urna. Sed accumsan condimentum dapibus. Sed tristique tempor augue non vulputate. Curabitur nec tellus massa. Sed congue mattis arcu, sed ultrices ligula dapibus eget. Proin nec nibh eget velit aliquet semper nec in lacus. ...    </div>     

           <div class='postMeta'>     

        <h4 class='more'><a href='http://post-link.html' title='Read More'>Read More...</a></h4>     

        <h4 class='commentnum'><a href='http://post-link.html#comments' title='Comment on TemplateInfo'>Comments (4)</a></h4>     

        </div>     

        </div>     

</li>     

<li>     

    <div class='post-2 post hentry category-featured ' id='post-2'>     

        <h2 class='headline'><a href='http://post-link.html' rel='bookmark' title='Post Title Here'>Post Title Here</a></h2>     

        <h4 class='date'>Post Date Here</h4>     

        <div class='entry clearfix'>     

                        <a class='postImage' href='http://post-link.html'><img alt='Post Title Here' src='http://i42.tinypic.com/2vsixwo.jpg'/></a>     

                Consectetur adipiscing elit. Nullam elementum leo ac orci luctus accumsan. Pellentesque nibh metus, tristique eu venenatis vitae, euismod at justo. Suspendisse hendrerit augue urna. Fusce pellentesque varius nibh volutpat pellentesque. Fusce id tellus quam, quis gravida nisl. Suspendisse at tellus urna. Sed accumsan condimentum dapibus. Sed tristique tempor augue non vulputate. Curabitur nec tellus massa. Sed congue mattis arcu, sed ultrices ligula dapibus eget. Proin nec nibh eget velit aliquet semper nec in lacus. ...        </div>     

           <div class='postMeta'>     

        <h4 class='more'><a href='http://post-link.html' title='Read More'>Read More...</a></h4>     

        <h4 class='commentnum'><a href='http://post-link.html#comments' title='Comment on Post Title Here'>Comments (2)</a></h4>     

        </div>     

        </div>     

</li>    

</ul>     

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





Για οτιδήποτε θέλετε να ρωτήσετε, μπορείτε να αφήσετε τα σχόλια σας !!!

        



20 τρομεροί πόροι όπου μπορείτε να βρείτε δωρεάν εικονίδια
noreply@blogger.com (Σοφία) — Fri, 21 May 2010 11:37:00 +0000
Σε αυτήν την κατηγορία ας ρίξουμε μια ματιά στο Internet' να βρούμε κάποιες ιστοσελίδες που προσφέρουν μερικά από τα καλύτερα free graphics για κάθε μας έργο  .   
  
Οποιοσδήποτε θέλει να σχεδιάσει  ξέρει ότι πριν ξεκινήσετε ένα έργο, πρέπει να έχουμε  κάποια  εργαλεία και πόρους ώστε να εξοικονομήσουμε  χρόνο.   
Τα κύρια εργαλεία σε αυτό το άρθρο, είναι τα εικονίδια , τα οποία  μπορούν να διαδραματίσουν τεράστιο ρόλο στο σχεδιασμό Ιστού, οπότε γιατί να μην έχουν μια  βολική συλλογή ,έτοιμη να χρησιμοποιηθεί .  
  
Σε αυτό το άρθρο έχω συγκεντρώσει μερικούς  τρομερούς  πόρους για να βρείτε δωρεάν εικονίδια και γραφικά  για ότι και αν τα χρειάζεστε .   
  
  
  1.  WebsiteIcons.com
   
  
 Κάθε μήνα σχεδιάζουν τα εικονίδια ειδικά για τη χρήση στους ιστοχώρους ή στις εφαρμογές λογισμικού.   
Δίνει πρόσβαση σε πάνω από 2000 εικονίδια, τα οποία χωρίζονται σε 3 κατηγορίες :   
  
-> Vista Style icons   
-> All flags of the world   
-> Pixel icons   
  
  
  2.  100,000 Free Icons
  
  
   
Αν χρειάζεστε high quality free icons για το Web project σας , τότε δεν χρειάζεται να ψάξετε άλλο ....   
Σε αυτό το site  θα βρείτε τα πάντα , από "social media" icons μέχρι  emoticons και "Polaroid" style images .   
  
  
   3.  dryicons.com
   
  
  
  
  
Κάθε μήνα  προσφέρει υψηλής ποιότητας Free Icon Set και Free Vector Graphics για κάθε Web project .   
Τα γραφικά πραγματικά είναι καταπληκτικής ποιότητας και διαθέτει τεράστια γκάμα για να διαλέξετε αυτό που σας αρέσει .   
Go to top  
  4.  vector4free 
  
  
  
  
  
Είναι μια ιστοσελίδα αφιερωμένη στα free vectors γραφικά: Adobe Illustrator AI, EPS, PDF, SVG, Corel Draw CDR αρχεία για να κατεβάσετε δωρεάν - αυτό είναι που μπορείτε να βρείτε εδώ.   
Για να διευκολυνθεί η αναζήτησή σας στα αρχεία  , όλα τα είδη έχουν χαρακτηριστεί από ετικέτες.   
Μπορείτε επίσης να υποβάλετε τα δικά σας γραφικά στο vector4free.com.   
  
  
   5.  freesocialicons.com
   
  
  
  
  
FreeSocialIcons.com είναι είναι ένα site  που προσφέρει  αποκλειστικά free social networking icons και icon sets .   
Μπορείτε να χρησιμοποιήσετε αυτές τις ελεύθερες εικόνες χωρίς κανένα περιορισμό για την προσωπική χρήση και εμπορικά έργα, όπως στις ιστοσελίδες των επιχειρήσεων και των blogs.   
  
Go to top  
  6.  Iconshock 
  
  
  
Η ιστοσελίδα παρέχει, κατά την άποψή μου , την πιο επαγγελματική και ολοκληρωμένη συλλογή εικόνων στο Διαδίκτυο.   
Τα  πιο περιεκτικά , κομψά icon sets ειναι διαθέσιμα.  με Ποιότητα Brilliant και απίστευτη ποικιλία. Συνιστάται ανεπιφύλακτα !   
Go to top  
  
  
  7.  Ιcofree
  
  
  
  
Εδώ θα βρείτε τα  καλύτερα  ελεύθερα εικονίδια  από τους icon artists .   
Είναι δωρεάν για προσωπική και μη εμπορική χρήση / δωρεάν για δημόσια μη εμπορική χρήση .   
Εάν είστε σχεδιαστής εικονιδίων  και θέλετε να προβληθούν εικόνες σας το  icofree.com  είναι το καλύτερο μέρος!   
  
  
  8.  Iconspedia
  
  
  
  
Εδώ θα βρείτε τα πιο κατάλληλα εικονίδια για την σελίδα σας η για το έργο σας .   
Το καλύτερο είναι δεν χρειάζεται να κατεβάσετε ολόκληρα icon sets,  μπορείτε να κατεβάσετε μεμονωμένες εικόνες τις προτίμησής σας .   
  
Go to top  
  9.  Weloveicons
  
  
  
  
  
Ιδιαίτερα καλαίσθητα ,υψηλής ποιότητας εικονίδια για κάθε σας έργο !   
Πραγματικά αξίζει να το επισκεφτείτε !   
  
  10.  Ιconsgator
  
  
  
  
Ακόμη ψάχνετε εικονίδια ? ...Σταματήστε να ψάχνετε  γιατί εδώ θα  βρείτε όλα όσα ζητάτε και ακόμη περισσότερα !   
  
Go to top  
  
  11.  Ιconpaper
  
  
  
  
Ίσως η μεγαλύτερη συλλογή γραφικών !   
Εδώ  θα βρείτε τα πάντα  πραγματικά , από "social media" icons  , Screensavers και Docks μέχρι Wallpapers .   
  
  12.  Fast Icons     
  
  
  
Go to top  
  13.  VistaIcons.com 
  
  
  
  
  
VistaIcons.com είναι μια συλλογή των ελεύθερων εικονιδίων .Vista Style σειρές πάνω από 2500 υψηλής ποιότητας εικόνες σε png και τη μορφή ico.   
  
  
  14. icondock
  
  
  
  
  
Θα βρείτε μια αρκετά μεγάλη συλλογή από δωρεάν εικονίδια , υψηλής ποιότητας .   
  
Go to top  
  
  15 .  Webtreats
  
  
  
  
Σε αυτό το site θα βρείτε ότι μπορείτε να φανταστείτε .   
Patterns , Photoshop layer styles , Social Networking Icons ,Photoshop Brushes , Textures και πολλά άλλα .   
Πραγματικά αξίζει ...   
  
  
  16 .deviantart
  
  
  
  
  
Μην ξεχάστε  το  deviantart, έχουν τόσα πολλά καταπληκτικά εικονίδια , που μπορείτε να πραγματικά να χαθούμε μέσα στην   ιστοσελίδα.   
  
Go to top  
  
Όχι δεν τελειώσαμε ακόμη ..... Έχουμε να δούμε και άλλα !.....   
  
  
   Μηχανές Αναζήτησης για εικόνες : 
    
  17 . Findicons
  
  
  
  
Go to top  
  
  
  18. Iconseeker
  
  
  
  
Go to top  
  
  19.  Iconfinder 
  
  
  
  
Go to top  
  
  20.  IconLook.com 
  
  
  
  
Go to top  
  
Ελπίζω  αυτή η λίστα να σας βοηθήσει να βρείτε ότι ψάχνετε !   
  
Αν γνωρίζετε  κάποια άλλη σελίδα  που δεν συμπεριλαμβάνετε στην λίστα   ενημερώστε μας.    

        



Aλλο  ένα στιλάτο featured content slider στο Blogger με την χρήση jQuery UI
noreply@blogger.com (Σοφία) — Tue, 18 May 2010 16:15:00 +0000



Αυτό το script επιτρέπει  να επιδείξετε τα πιο δημοφιλή η πιο ενδιαφέροντα άρθρα και αναρτήσεις από το  blog σας .

Μπορείτε επίσης να αναδείξετε και κάποιες παλιές αναρτήσεις που δύσκολα τα βρίσκει ο επισκέπτης του blog σας

Το Featured contents συνήθως θα πρέπει να εμφανίζετε στην αρχική σελίδα του blog ,  διευκολύνοντας έτσι τους επισκέπτες  να βρούνε στην στιγμή τις πιο “hot αναρτήσεις ” από το blog σας. 

Επίσης , είναι κομψό και λειτουργικό .          
          


Click  εδώ για demo           












Τα βήματα που πρέπει να ακολουθηθούν είναι τα εξής  :
           
1. Κάνετε Login στο Blogger  Πίνακας Ελέγχου –> Σχεδίαση -> Επεξεργασία HTML             
            
2. Εισάγετε τον παρακάτω κώδικα  στο Html του πρότυπου σας  ακριβώς πάνω από την ετικέτα : ]]></b:skin>      


#featured{    

width:400px;     

padding-right:250px;     

position:relative;     

height:250px;     

background:#fff;     

border:5px solid #ccc;     

}     

#featured ul.ui-tabs-nav{     

    position:absolute;     

    top:0; left:400px;     

    list-style:none;     

    padding:0; margin:0;     

    width:250px;     

}     

#featured ul.ui-tabs-nav li{     

    padding:1px 0; padding-left:13px;     

    font-size:12px;     

    color:#666;     

}     

#featured ul.ui-tabs-nav li span{     

    font-size:11px; font-family:Verdana;     

    line-height:18px;     

}     



#featured .ui-tabs-panel{     

    width:400px; height:250px;     

    background:#999; position:relative;     

        overflow:hidden;     

}     

#featured .ui-tabs-hide{     

    display:none;     

}     



#featured li.ui-tabs-nav-item a{/*On Hover Style*/     

    display:block;     

    height:60px;     

    color:#333;  background:#fff;     

    line-height:20px;     

    outline:none;     

}     

#featured li.ui-tabs-nav-item a:hover{     

    background:#f2f2f2;     

}     

#featured li.ui-tabs-selected{ /*Selected tab style*/     

    background:url(' http://3.bp.blogspot.com/_L116RpGjEMY/S-3MJC5jdTI/AAAAAAAABuc/_-Lmjmgqelo/s1600/tabs-selected.gif') top left no-repeat;     

}     

#featured ul.ui-tabs-nav li.ui-tabs-selected a{     

    background:#ccc;     

}     



#featured ul.ui-tabs-nav li img{     

    float:left; margin:2px 5px;     

    background:#fff;     

    padding:2px;     

    border:1px solid #eee;     

}     

#featured .ui-tabs-panel .info{     

    position:absolute;     

    top:180px; left:0;     

    height:70px; width: 400px;  

    background: url('http://1.bp.blogspot.com/_L116RpGjEMY/S-3LQB_CsKI/AAAAAAAABuY/KipWcEpC2Zg/s1600/panel+.info.png');


}     

#featured .info h2{     

    font-size:18px; font-family:Georgia, serif;     

    color:#fff; padding:5px; margin:0;     

    overflow:hidden;     

}     

#featured .info p{     

    margin:0 5px;     

    font-family:Verdana; font-size:11px;     

    line-height:15px; color:#f0f0f0;     

}     

#featured .info a{     

    text-decoration:none;     

    color:#fff;     

}     

#featured .info a:hover{     

    text-decoration:underline;     

}



3. Τώρα ,εισάγουμε τον παρακάτω κώδικα ακριβώς  πάνω από την ετικέτα : </head>




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/> 

<script type='text/javascript'> 

$(document).ready(function(){      

$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);       

$("#featured").hover(       

function() {       

$("#featured").tabs("rotate",0,true);       

},       

function() {       

$("#featured").tabs("rotate",5000,true);       

}       

);       

});

</script>


4. Τώρα  πηγαίνετε  Στοιχεία Σελίδας  και δείτε κάτω από την επικεφαλίδα αν υπάρχει στοιχειό  Προσθήκη gadget , πατήστε το και  επιλέξτε  HTML/JavaScript , εισάγετε τον παρακάτω κώδικα στο κουτί και αποθηκεύετε












<div id="featured">      

          <ul class="ui-tabs-nav">       

            <li id="nav-fragment-1" class="ui-tabs-nav-item ui-tabs-selected"><a href="#fragment-1"><img alt="" src=" http://lh5.ggpht.com/_L116RpGjEMY/S89usJ-JIHI/AAAAAAAABkE/zwaCuelG7dw/image1-small.jpg "/><span>15+ Excellent High Speed</span></a></li>       

            <li id="nav-fragment-2" class="ui-tabs-nav-item"><a href="#fragment-2"><img alt="" src=" http://lh4.ggpht.com/_L116RpGjEMY/S89usWJvQeI/AAAAAAAABkM/nP98Bd62-y4/image2-small.jpg "/><span>20 Beautiful Long Exposure</span></a></li>       

            <li id="nav-fragment-3" class="ui-tabs-nav-item"><a href="#fragment-3"><img alt="" src=" http://lh5.ggpht.com/_L116RpGjEMY/S89wpzv-z_I/AAAAAAAABks/CuHLZemhd4s/image3-small.jpg "/><span>35 Amazing Logo Designs</span></a></li>       

            <li id="nav-fragment-4" class="ui-tabs-nav-item"><a href="#fragment-4"><img alt="" src="http://lh5.ggpht.com/_L116RpGjEMY/S89wqfhE9UI/AAAAAAAABk0/QVO8IYt9w2g/image4-small.jpg"/><span>Create a Vintage</span></a></li>       

          </ul> 

        <!-- First Content -->       

        <div id="fragment-1" style="" class="ui-tabs-panel">       

            <img alt="" src=" http://lh3.ggpht.com/_L116RpGjEMY/S89ur2bAB-I/AAAAAAAABkA/N22X9P1yf2Q/image1.jpg"/>       

             <div class="info">       

                <h2><a href="#">15+ Excellent High Speed</a></h2>       

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">read more</a></p>       

             </div>       

        </div> 

        <!-- Second Content -->                <div id="fragment-2" style="" class="ui-tabs-panel ui-tabs-hide">       

            <img alt="" src=" http://lh6.ggpht.com/_L116RpGjEMY/S89usCo-PLI/AAAAAAAABkI/vPQYRcUNn9c/image2.jpg "/>       

             <div class="info">       

                <h2><a href="#">20 Beautiful Long Exposure</a></h2>       

                <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">read more</a></p>       

             </div>       

        </div> 

        <!-- Third Content -->       

        <div id="fragment-3" style="" class="ui-tabs-panel ui-tabs-hide">       

            <img alt="" src=" http://lh3.ggpht.com/_L116RpGjEMY/S89wpo3di-I/AAAAAAAABko/UkEshdWie9M/image3.jpg"/>       

             <div class="info">       

                <h2><a href="#">35 Amazing Logo Designs</a></h2>       

                <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">read more</a></p>       

             </div>       

        </div> 

        <!-- Fourth Content -->       

        <div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">       

            <img alt="" src="http://lh5.ggpht.com/_L116RpGjEMY/S89wqDR9mJI/AAAAAAAABkw/fDRv5XJH9TM/image4.jpg"/>       

             <div class="info">       

                <h2><a href="#">Create a Vintage</a></h2>       

                <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">read more</a></p>       

             </div></div></div>


Αλλάζετε τα links και τις εικόνες με τα δικά σας και αποθηκεύετε






Σημείωση :  Αν δεν βρείτε κάτω από την επικεφαλίδα το στοιχειό  Προσθήκη gadget , τότε εισάγετε τον κώδικα μέσα στο  Html πρότυπο σας  .


Θα βρείτε στο πρότυπο σας την ετικέτα  <div id='main-wrapper'> και κολλάτε τον παραπάνω κώδικα ακριβώς από πάνω



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

 

        



wpTune |Free Blogger Template
noreply@blogger.com (Σοφία) — Mon, 17 May 2010 18:03:00 +0000
 

                          

                               Demo    Download 



wpTune είναι ένα καθαρό , μοντέρνο blogger πρότυπο , με απαλούς  ανοιχτόχρωμους συνδυασμούς .

Ένα φρέσκο και classy πρότυπο που ταιριάζει  σε κάθε τύπου blog   .



Είναι δοκιμασμένο σε Firefox, Safari , Opera και Internet Explorer 8 .



Οι στρογγυλεμένες γωνίες σε μερικά στοιχεία μπορεί να μην λειτουργούν σε Browsers που δεν υποστηρίζουν CSS3 elements .









Γενικές πληροφορίες για αυτό το πρότυπο :

2 στήλες 
Fixed Width 
Right Sidebar  
Μπλε , Άσπρο  
μοναδικός σχεδιασμός λίστας  σχόλιων 
Υποστήριξη Διαθέσιμη 









Οδηγίες ρυθμίσεις 
Για να ρυθμίσετε το Top menu :

  

 

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


<div id="top_menu" class="span-96 last">      

  <ul>       

    <li><a expr:href="data:blog.homepageUrl">Home</a> </li> 

    <li><a expr:href="data:blog.homepageUrl + &quot;feeds/posts/default&quot;">Posts RSS</a> </li> 

    <li><a expr:href="data:blog.homepageUrl + &quot;feeds/comments/default&quot;">Comments RSS</a> </li> 

    <li><a href="#">Text 1</a> </li> 

    <li><a href="#">Text 2</a> </li> 

    <li><a href="#">Edit</a> </li>      

  </ul>       

</div>       

<!-- end top_menu -->
2 .  Αλλάξτε τα Text 1 ,  Text 2 , Edit με τα δικά σας links 



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



 

 

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


<!-- Menu -->    

<div class='clear last' id='menu'>     

            <div id='menu_l'/>     

            <div id='menu_r'/>     

            <ul>     

     <li><a expr:href='data:blog.homepageUrl'>Home</a></li>     

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>     

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>     

       <li><a href='#'>Text 1</a></li>     

       <li><a href='#'>Text 2</a></li>     

        <li><a href='#'>Edit</a></li>   

            </ul>     

        </div><!-- end menu -->  
2 .  Αλλάξτε τα  με τα δικά σας links



Για να ρυθμίσετε το 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, εκεί θα δείτε κάτι σαν αυτό : 



       

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




















Συντελεστές και Άδεια Χρήσης :



 
Για το Wordpress σχεδιάστικε από  http://wpburn.com  και μετατροπή για blogger έγινε από εμένα





Αυτό το έργο διανέμεται υπό την  Creative Commons Attribution 3.0 License , που σημαίνει ότι    

είστε ελεύθεροι να χρησιμοποιήσετε , να διανέμετε , να παρουσιάσετε  στο κοινό το Έργο ,     

να το τροποποιήσετε για οποιοδήποτε σκοπό.     

Με μόνη προϋπόθεση να μην αφαιρεθούν οι σύνδεσμοι προς δημιουργούς από το footer .     

Δε μπορείτε να χρησιμοποιήσετε το έργο αυτό για εμπορικούς σκοπούς.



Εάν χρησιμοποιείτε αυτό το πρότυπο ή το προσφέρετε αυτό για download από το site σας , παρακαλούμε να συμπεριλάβετε μια σύνδεση πίσω στο http://bloggertrics.blogspot.com  ως απόδοση για το σχεδιασμό και διατηρείστε  τις πληροφορίες του συγγραφέα στο κώδικα του προτύπου. 

Σε όλες τις άλλες περιπτώσεις, μπορείτε να προσαρμόσετε και να χρησιμοποιήσετε  αυτό το πρότυπο για κάθε τύπου  blog .











Οι σκέψεις σας :



 
Ελπίζω να απολαύσετε τη χρήση του wpTune στα blogging έργα σας!





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

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

Blogger Tricks

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

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

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

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

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

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

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

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

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

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

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

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

Μειώστε τα HTTP Requests

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

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

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

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

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

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

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

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

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

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

Royale Noir - Stylish dark Blogger template

Ρυθμίσεις

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

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

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

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

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

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

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

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

Modern feel - Blogger Template

ρυθμίσεις

Digg-Digg social bookmarking widget για Blogger

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

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

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

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

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

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

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

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

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

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

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

Μultiple shadows

Glowing Text

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

Εισαγωγή στο CSS3 - Μέρος 3ο: Box shadow

Inset Box Shadows

Box-shadow συνδιασμος με border-radius :

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

Εισαγωγή στο CSS3 - Μέρος 2ο: CSS3 border properties

Στρογγυλεμένες άκρες (rounded corners)

Gradient Borders

CSS3 Border Image

Border Image (round)

CSS 3 Border Image (stretch)

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

Εισαγωγή στο CSS3 - Μέρος 1ο: Τι είναι το CSS3

Τι είναι το CSS3 .

Το CSS3 Σήμερα :

Τα χαρακτηριστικά και τα οφέλη του CSS3

Τι Μπορούμε να κάνουμε με CSS3

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

100% CSS οριζόντιο Drop Down Menu

10 χρήσιμα Screen capture εργαλεία για να κανετε λήψη screenshots

Πράγματα που πρέπει να αποφεύγονται !!!Αυτά που με εκνευρίζουν όταν διαβάζω ενα blog

Όμορφο Image rollover menu Updated!

Μην ξεχάσετε να καταχωρήσετε το ιστολόγιό σας στις Μηχανές Αναζήτησης

Recent posts widget για blogger με thumbnails

Canvas- Free Blogger Template

Οδηγίες ρυθμίσεις :

Για να ρυθμίσετε το Top navigation μενού :

Για να ρυθμίσετε το Bookmark social :

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

Για να ρυθμίσετε το 125χ125 ads Bar: