Hi! Welcome...

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

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

1

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

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

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

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

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

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

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

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


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



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

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


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

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

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

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

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


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

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

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


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

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

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


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

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


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

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


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

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


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

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


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

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


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

Μειώστε τα HTTP Requests


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

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

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


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


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


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

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

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

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

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

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


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

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

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

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


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

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

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

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

5

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

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

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


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

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


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

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

28

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

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

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

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

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

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

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


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

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


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

  

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


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


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

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

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



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


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


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

<div id='sidebar-wrapper'>

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


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


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

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

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



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

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

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



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



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

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

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

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

2

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



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

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

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

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

ΒΗΜΑ 1ο :

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

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


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

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

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

 ΒΗΜΑ 2ο :

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

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

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

</div>

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

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


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

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

</div>


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

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

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




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

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


Read More ►

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

4

Royale Noir - Stylish dark Blogger template





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

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

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

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

Creative Commons Attribution

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


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

Ρυθμίσεις


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


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

<!--Navigation Menu-->

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

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

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


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

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


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


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

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

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




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


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



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

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


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


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


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

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

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


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


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

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


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

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

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

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


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




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

© 2010 Bloggertrics

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

ΑΡΧΙΚΗ| Sitemap| Posts RSS