Blogger Tips – Tricks – Gadgets – Templates – Hacks

Στατικές και Δυναμικές Ιστοσελίδες



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Με την παγκόσμια άνθηση του διαδικτύου, τη χρήση του από όλο και περισσότερους ανθρώπους ως βασικό μέσο μαζικής επικοινωνίας, είναι πλέον προφανές ότι το κάθε νομικό ή φυσικό πρόσωπο, επιβάλλεται να έχει παρουσία σε αυτό. Ο συνηθέστερος τρόπος παρουσίασης των προϊόντων μιας επιχείρησης ή η προβολή ιδεών ενός ατόμου είναι μέσω μιας ιστοσελίδας. Τα είδη μιας ιστοσελίδας ποικίλουν, ανάλογα με τις ανάγκες του καθενός. Οι δυο μεγαλύτερες και βασικότερες κατηγορίες ιστοσελίδων είναι οι στατικές (static) και οι δυναμικές (dynamic). Στατικές ονομάζονται οι ιστοσελίδες, που έχουν μόνιμο περιεχόμενο. Αυτό δε σημαίνει ότι το περιεχόμενο τους πρέπει να είναι στατικό, αντιθέτως μπορεί να έχει πολλά κινούμενα γραφικά. Δυναμικές είναι οι ιστοσελίδες στις οποίες ο χρήστης-επισκέπτης αλληλεπιδρά με την ίδια τη σελίδα. Σήμερα κυριαρχεί μια λανθασμένη εντύπωση ότι οι στατικές ιστοσελίδες είναι ξεπερασμένες, κυρίως επειδή για να κατασκευαστούν βασίζονται σε παλαιότερες τεχνολογίες. Αυτή η εντύπωση όμως είναι άκρως λανθασμένη. Μερικές από τις πιο μοντέρνες ιστοσελίδες είναι στατικές, ενώ οι στατικές ιστοσελίδες προσφέρουν πλεονεκτήματα που δεν έχουν οι δυναμικές. Ο όρος “στατικές” αναφερέται στο μόνιμο περιεχόμενο των στατικών ιστοσελιδών και όχι σε κάποιο είδος κίνησης. Τα δεδομένα (κείμενο, φωτογραφίες κλπ.) για να αλλάξουν σε μια στατική σελίδα, θα πρέπει ο διαιχειριστής της σελίδας να τα αλλάξει χειροκίνητα, μέσω κάποιου ειδικού προγράμματος κατασκευής ιστοσελιδών. Αντίθετα στις δυναμικές ιστοσελίδες ο απλός χρήστης-επισκέπτης αλληλεπιδρά άμεσα-δυναμικά με την ίδια την σελίδα και αυτό σημαίνει ότι μπορεί να αλλάξει και το περιεχόμενό της. Για αυτό τον λόγο, οι δυναμικές ιστοσελίδες διαχειρίζονται από open source CMS (Content Management System), ότι δηλαδή το σύστημα διαχείρησης της σελίδας είναι ανοιχτό σε όλους τους χρήστες, οι οποίοι μπορούν να το αλλάξουν ή να το τροποποιήσουν. Το κατά πόσο έχει τη δυνατότητα να αλλάξει/τροποποιήσει το περιέχομενο μιας δυναμικής ιστοσελίδας ένας επισκέπτης, το ορίζει ο υπερδιαχειριστής της σελίδας (administrator). Αλλά ας τα πάρουμε από την αρχή:




Η πρώτες ιστοσελίδες πλησιάζουν περισσότερο τις σημερινές στατικές, παρά

τις δυναμικές, που εφευρέθηκαν αργότερα. Ο βρετανός Τιμ-Μπέρνες Λι, εφευρέτης

internet ή του world wide web το 1989, δημοσίευσε τον Αύγουστο του 1991 αυτό που,

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

βασίζονται σε γλώσσες και τεχνολογίες που ανακαλύφτηκαν πρόσφατα και

αναπτύσσονται συνεχώς. Οι δυναμικές ιστοσελίδες γράφονται στη γλώσσα προγραμματισμού php που αναπτύσσεται διαρκώς. Σήμερα χρησιμοποιείται η 4η κι η 5η έκδοση της php.



Για την ανάπτυξη και σχεδίαση δυναμικών ή στατικών ιστοσελίδων χρησιμοποιούνται πολλές γλώσσες. Η html χρησιμοποιείται ευρέως στις στατικές ιστοσελίδες και η php στις δυναμικές. Στις δυναμικές μπορεί όμως να χρησιμοποιηθεί και html γιατί η html δεν είναι γλώσσα προγραμματισμού σε αντίθεση με την php όπου είναι.



HTML (HyperText Markup Language):


H html δεν είναι γλώσσα προγραμματισμού. Είναι γλώσσα σήμανσης (markup language). Ανακαλύφτηκε από την IBM, η οποία ήθελε να λύσει το πρόβλημα της για μη τυποποιημένη εμφάνιση κειμένων στα διάφορα υπολογιστικά της συστήματα. Html υπάρχει και στις δυναμικές και στις στατικές ιστοσελίδες. Η html αποτελείται από διάφορα tags που δίνουν εντολές στον browser όπου ο τελευταίος απεικονίζει τα αποτελέσματα αυτών των εντολών στις οθόνες μας. Τα tags είναι εντολές που βρίσκονται μεταξύ των συμβόλων < και >. Π.χ. αν θέλουμε να δώσουμε εντολή στον browser μας να εμφανίσει κάποιο κείμενο μαρκαρισμένο σε bold, στην html γράφεται: <b>To_κείμενο_εδώ</b> Οι εντολές είναι case insensitive, δεν επηρεάζονται από το αν έχουν γραφτεί με πεζά (μικρά) ή κεφαλαία.

Αξιοσημείωτο είναι επίσης ότι η html είναι η πρώτη και πιο διαδεδομένη γλώσσα περιγραφής της δομής μιας ιστοσελίδας.



Η html έφερε τα πρώτα προβλήματα εμφάνισης ιστοσελιδών από τους διάφορους browsers.

Ειδικά όταν περιλαμβάνει (που περιλαμβάνει συχνά) εφαρμογές σε Javascript. Αρχικά είχαν θεσπιστεί κάποιες προδιαγραφές για τη html που κάλυπταν μέχρι τη html 2.0. Τα προβλήματα προέκυψαν όταν οι Microsoft κι η Netscape πρόσθεσαν στην html τέτοιες δυνατότητες που ήταν συμβατές να απεικονιστούν από ορισμένους browsers. Ακόμη και τώρα αλλιώς απεικονίζεται μια σελίδα από διαφορετικούς browsers. Χάρη σε αυτό εκθρονίστηκε ο explorer από τον firefox.



Μεγάλα προγράμματα στα οποία ο χρήστης συγγράφει κώδικα html και ταυτόχρονα μπορεί να βλέπει και το αποτέλεσμα των κωδικών που συγγράφει είναι το Dreamweaver της Adobe, το FrontPage της Microsoft και το Ace HTML.



PHP:



Η php είναι μια γλώσσα προγραμματισμού που χρησιμοποιείται κυρίως στην κατασκευή δυναμικών ιστοσελίδων.


Μια ιστοσελίδα γραμμένη σε php για να ανοίξει σε πραγματικό χρόνο στην οθόνη μας σε μορφή html μέσω του browser μας, επικοινωνεί και περνά από επεξεργασία από έναν συμβατό διακομιστή του ιστού (π.χ. Apache). Ο Apache είναι ο μεγαλύτερος και διασημότερος εξυπηρετητής (nameserver) του παγκόσμιου ιστού (world wide web). Ο Apache είναι ο δημοφιλέστερος εκ των εξυπηρετητών γιατί λειτουργεί και στα Linux, Unix ,Mac OS X εκτός από τα Windows. Η χρησιμότητα του Apache είναι γιατί όταν κάποιος χρήστης επισκέφτεται μια ιστοσελίδα από το πρόγραμμα περιήγησής του (browser), αυτό επικοινωνεί με τον διακομιστή-server μέσω του πρωτοκόλλου http, και έτσι δημιουργούνται οι ιστοσελίδες οι οποίες αποστέλλονται στο πρόγραμμα περιήγησης και από εκεί στην οθόνη του υπολογιστή μας σε μορφή κώδικα html. Ο Apache υποστηρίζει εξ’ ορισμού την εκτέλεση κώδικα php.


Η php ανακαλύφτηκε το 1995 από έναν φοιτητή τον Rasmus Lerdorf, ο οποίος δημιούργησε για απλή προσωπική χρήση ένα απλό script γραμμένο σε php. Το script αυτό είχε σαν σκοπό να διατηρεί μια λίστα στατιστικών για τα άτομα που έβλεπαν το online βιογραφικό του σημείωμα. Αργότερα αυτό το script το διέθεσε και σε φίλους του, οι οποίοι άρχισαν να του ζητούν να προσθέσει περισσότερες δυνατότητες και έτσι το εξέλιξαν. Η εξέλιξη της php βασίστηκε και στη γλώσσα προγραμματισμού C. Σήμερα, στους περισσότερους ιστότοπους χρησιμοποιείται η 4η κι η 5η έκδοση της php, ενώ η επερχόμενη 6η έκδοση είναι ακόμη σε δοκιμαστικά στάδια.



CSS (Cascading Style Sheets):


Τα αρχεία (φύλλα στυλ) CSS μας επιτρέπουν να διαχωρίσουμε το περιεχόμενο μιας ιστοσελίδας από το σχεδιαστικό κομμάτι της. Και αυτό συμβαίνει γιατί όλα τα στοιχεία σχεδίασης και μορφοποίησης μιας σελίδας μπορούν να αποθηκευτούν σε ένα μόνο ξεχωριστό αρχείο CSS, το οποίο θα συνδέεται/θα επικοινωνεί με όλα τα άλλα αρχεία της σελίδας, και θα τα αλλάζει σχεδιαστικά. Αυτό, όπως καταλαβαίνετε, είναι πολύ πρακτικό, γιατί αν για παράδειγμα θέλουμε να αλλάξουμε το φόντο (background color) μιας σελίδας, αρκεί να επέμβουμε στο αρχείο CSS και να κάνουμε εκεί την αλλαγή, και ΔΕΝ χρειάζεται να κάνουμε την αλλαγή σε όλα τα αρχεία μιας σελίδας ξεχωριστά. Έτσι γλιτώνουμε πολλές σειρές κώδικα.

Τα πλεονεκτήματα της CSS συνοπτικά είναι:

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

2. Ελαχιστοποίηση χρόνου γραφής κώδικα.

3. Προσβασιμότητα από όλους τους φυλλομετρητές-περιηγητές-web browsers (π.χ. Explorer).

4. Είναι πιστοποιημένο από το W3C, τον μεγαλύτερο οργανισμό Web Standards παγκοσμίως.

5. Ομοιόμορφη εμφάνιση όλων των σελιδών μιας ιστοσελίδας, αφού συνδέονται με το ίδιο αρχείο CSS.

6. Είναι SEO friendly, αφού ο κώδικας της σελίδας είναι πολύ καθαρότερος.

Η CSS είναι σχετικά πολύ εύκολη γλώσσα στην εκμάθησή της.



XML:



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



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





Πλεονεκτήματα και Μειονεκτήματα Στατικής και Δυναμικής Ιστοσελίδας




Η κατασκευή ιστοσελίδων (Web development-design) από τους σχεδιαστές (web designers-developers) είναι η διαδικασία δημιουργίας παρουσιάσεων περιεχομένου (συνήθως υπερκειμένου, ή πολυμέσων), οι οποίες προβάλλονται στον τελικό χρήστη του Διαδικτύου, μέσω ενός προγράμματος περιήγησης (browser).

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

Τα ηλεκτρονικά αρχεία μπορεί να είναι εικόνες (.jpeg, .gif, .png, .bmp) τα οποία τοποθετούνται στη σελίδα μας, με τη χρήση των κατάλληλων κωδικών σήμανσης, ώστε να αναγνωρίζονται από τον περιηγητή μας, ο οποίος με τη σειρά του θα μας τα απεικονίσει στην οθόνη μας. Οι “κατάλληλοι κωδικοί σήμανσης” που προανέφερα είναι html/xhtml/xml.

Βέβαια σήμερα τα πράγματα δεν είναι τόσο απλά. Έχουν εξελιχθεί σε μεγάλο βαθμό. Η απλή γλώσσα σήμανσης html, έχει συνδιαστεί με εφαρμογές Javascript και με CSS, και έτσι τα πράγματα έχουν γίνει πολύ πιο περίπλοκα.

Πάντως σε γενικές γραμμές, οι browsers ακολουθούν τα ενιαία πρότυπα και προδιαγραφές που έχει θέσει το W3C. Κι οι browsers σήμερα ενσωματώνουν πάνω τους τα πρόσθετα (plug-ins), που άλλωτε θα έπρεπε να τα εγκαταστήσουν οι χρήστες ξεχωριστά.





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

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



Οι στατικές ιστοσελίδες



Οι στατικές ιστοσελίδες χαρακτηρίζονται από την μονιμότητα του περιεχομένου τους και της διάταξής τους (layout), τα οποία μπορούν να αλλάξουν/να τροποποιηθούν μόνο με αίτημα για αναβάθμιση (update) από τον προγραμματιστή/διαχειριστή της σελίδας αυτης. Μια απλή σελίδα html (έγγραφο html) που περιλαμβάνει κείμενο, συνδέσμους και φωτογραφίες για παράδειγμα, είναι ένα απλό παράδειγμα στατικής σελίδας. Τα δεδομένα σε μια στατική ιστοσελίδα δεν αλλάζουν δυναμικά. Έχουν σταθερό, αμετάβλητο περιεχόμενο.



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

Μεγάλο πλεονέκτημα των στατικών ιστοσελιδών έναντι των δυναμικών είναι επίσης ότι πιο SEO friendly. To SEO σημαίνει Search engine optimization και στα ελληνικά “Βελτιστοποιήση Σελίδας για τις μηχανές αναζήτησης”. Οι στατικές σελίδες λοιπόν είναι πιο φιλικές προς τις μηχανές αναζήτησης. Αυτό συμβαίνει γιατί στις στατικές ιστοσελίδες υπάρχει δυνατότητα τοποθέτησης στον κώδικα html, των meta tags τα οποία αναγνωρίζουν οι μηχανές αναζήτησης και κατατάσσουν την στατική σελίδα πάνω από μια δυναμική που δεν έχει ακριβώς αυτη την δυνατότητα. Αυτό είναι πολύ ισχυρό πλεονέκτημα των στατικών ιστοσελιδών, γιατί όπως καταλαβαίνετε έχει άμεση σχέση με την επισκεψημότητά τους. Και η επισκεψημότητα σε έναν ιστότοπο μπορεί να μεταφραστεί σε κέρδος. Και όπως είναι γνωστό, οι μηχανές αναζήτησης είναι αυτες που παραπέμπουν τους χρήστες στις ιστοσελίδες. Οπότε όσο καλύτερα κατεταγμένη η σελίδα στις μηχανές αναζήτησης σε διάφορες λέξεις-κλειδιά, τόσο μεγαλύτερο πλεονέκτημα έχει έναντι των ανταγωνιστών της. Στην αγορά γίνεται σκληρή μάχη ανάμεσα στους SEO experts για διάφορες λέξεις-κλειδιά. Είναι αξιοσημείωτο, ότι μόνο στην ελληνική αγορά για λέξεις-κλειδιά όπως (fashion, gadgets, ρούχα), για να επιτευχθεί η πρώτη θέση στις μηχανές αναζήτησης, δαπανούνται μέχρι και 20 χιλιάδες ευρώ. Για αυτές τις φράσεις, στην παγκόμια αγορά τα ποσά εκτοξεύονται στα ύψη όπως είναι αντιληπτό. Εγώ έχω καταφέρει μετά από πολύ δουλειά στην στατική μου ιστοσελίδα (http://bloggertips.gr/) να εμφανίζομαι στα πρώτα δυο αποτελέσματα της Google, όταν αναζητά κάποιος με τη φράση “blogger tips”, η οποία είναι και συχνή φράση αναζήτησης.



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

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



Θα επιλέξετε μια στατική ιστοσελίδα αν δεν έχετε σκοπό να ανανεώνετε συχνά τις σελίδες σας, οι οποίες δεν θα ξεπεράσουν τις 15-20. Οι στατικές ιστοσελίδες ενδείκνυνται για μικρές επιχειρήσεις που θέλουν να κάνουν μια απλή παρουσιάση των προϊόντων τους στο διαδίκτυο, χωρίς να θέλουν να τα ανανεώνουν συχνά.



Η κατασκευή μιας στατικής ιστοσελίδας από τους web designers έχουν χαμηλότερο κόστος, σε σχέση με τις δυναμικές, και αυτό είναι λογικό γιατί είναι πιο απλή η κατασκευή τους. Ενδεικτικά οι τιμές για μια στατική ιστοσελίδα αρχίζουν από 60 εως 400 ευρώ σε γενικές γραμμές.



Δυναμικές ιστοσελίδες



Οι δυναμικές ιστοσελίδες προσαρμόζουν το περιεχόμενο τους και την εμφάνισή τους σύμφωνα με την καταχώρηση/αλληλεπίδραση ή τις αλλαγές του τελικού χρήστη στο περιβάλλον προγραμματισμού (χρήστης, ώρα, τροποποιήσεις στη βάση δεδομένων κτλ.). Το περιεχόμενο μπορεί να αλλάζει στον υπολογιστή του τελικού-χρήστη με τη χρήση των γλωσσών προγραμματισμού που εκτελούνται στον υπολογιστή του χρήστη (JavaScript, VBScript, Actionscript, etc.). Το περιεχόμενο στις δυναμικές σελίδες συχνά μεταφράζεται στον εξυπηρετητή (server), που εκεί αποστέλνεται μέσω του διακομιστή (Apache), μέσω γλωσσών προγραμματισμού που εκτελούνται στον εξυπηρετητή (Perl, PHP, ASP, JSP, ColdFusion, .NET κτλ). Πίσω από δυναμικά websites κρύβονται πάντα βάσεις δεδομένων (databases) οπού εκεί αποθηκεύονται δεδομένα και πληροφορίες του εν λόγω website. Και με εντολή του χρήστη, το website επικοινωνεί με την database, από όπου θα αντλήσει το περιεχόμενο που απαίτησε να δει ο χρήστης. Λόγω των databases καθιστάται εύκολη η προσθαφαίρεση περιεχομένου στις δυναμικές ιστοσελίδες, ακόμα και από τον πιο άσχετο (σε γνώσεις προγραμματισμού) χρήστη-επισκέπτη της σελίδας.

Διότι σε μια στατική σελίδα για να αλλάξει ή να τροποποιήσει κανείς το περιεχόμενο της σελίδας θα πρέπει να επέμβει στον κώδικα. Άρα πρέπει να ξέρει προγραμματισμό. Ενώ σε μια δυναμική σελίδα, απλά πρέπει να ξέρει πως να διαχειρίζεται το περιεχόμενο στη βάση δεδομένων και όλα τα υπόλοιπα γίνονται αυτοματοποιημένα από το πρόγραμμα. Όπως είπαμε οι στατικές σελίδες είναι απλά html έγγραφα. Οι δυναμικές ιστοσελίδες είναι εφαρμογές-προγράμματα. Για την δημιουργία ενός δυναμικού site χρειάζονται πολλές-πολλές γραμμές κώδικα προγραμματισμού. Παρόλο όμως που είναι σχετικά δύσκολο να κατασκευαστεί ένα δυναμικό site, είναι εύκολο να διαχειριστεί και να ανανεωθεί. Εδώ είναι και το μεγάλο πλεονέκτημα, έναντι των στατικών. Για να μπορεί ένας απλός χρήστης-επισκέπτης να διαχειρίζεται (να το αλλάζει, να το τροποποιεί ή να το διαγράφει) το περιεχόμενο μιας δυναμικής σελίδας εύκολα, χωρίς γνώσεις προγραμματισμού, υπάρχουν τα CMS! CMS (Content Managment System) είναι εύχρηστοι μηχανισμοί διαχείρησης περιεχομένου. Έτσι, στην περιοχή διαχείρησης της σελίδας, μπορούν να διαχειριστούν το περιεχόμενό της, απλά μέλη, συντάκτες, διαχειριστές κ.α. Ο καθένας έχει τον δικό του κωδικό πρόσβασης και το τι προνόμια έχει ο καθένας και κατα πόσο μπορεί να αλλάξει το περιεχόμενο της σελίδας, το ορίζει ο υπερδιαχειριστής της σελίδας.





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





Θα επιλέξετε μια δυναμική σελίδα αν θέλετε να ανεβάσετε πολύ περιεχόμενο σε αυτή (μιλάμε για πάνω από 20 σελίδες) και επίσης θέλετε να ανανεώνετε το περιεχόμενό της συχνά. Αν θέλετε οι αναρτήσεις σας και τα άθρα σας να είναι κατηγοριοποιημένα και αρχειοθετημένα. Αν θέλετε να έχετε συντάκτες όπου θα δημοσιεύουν νέο περιεχόμενο χωρίς να γνωρίζουν προγραμματισμό. Αν θέλετε να δίνετε τη δυνατότητα στους επισκέπτες σας να γίνουν ενεργά μέλη στη σελίδα σας και να έχουν δικό τους κωδικό πρόσβασης για να συνδέονται σε αυτην.



Στα κατά ενος δυναμικού site είναι αναμφίβολα το κατα πολύ υψηλότερο κόστος κατασκευής, αλλά και συντήρησης, γιατί λόγω των μεγαλύτερων απαιτήσεων, απαιτεί πολύ μεγαλύτερο χώρο φιλοξενίας σε webserver. Συνήθως φορτώνει πιο αργά από μια στατική σελίδα και για να κατασκευασθεί μια δυναμική σελίδα από κάποιον web designer ή από κάποιον προγραμματιστή απαιτείται πολύς χρόνος, γιατί όπως προείπα απαιτούνται πολλές-πολλές σειρές κώδικα.



Ενδείκνυνται για μεγάλες επιχειρήσεις, που θέλουν να φτιάξουν ηλεκτρονικό κατάστημα (e-shop), όπου θα διαθέτουν προς πώληση τα προϊόντα τους, για ξενοδοχεία τα οποία θέλουν ο επισκέπτης να κάνει ηλεκτρονικές κρατήσεις των δωματίων τους και γενικότερα για μεγάλα ειδησεογραφικά portals τα οποία ανανεώνουν συχνά το περιεχόμενό τους και θέλουν ο χρήστης-επισκέπτης να γίνεται μέλος στη σελίδα, να αφήνει σχόλια, να λαμβάνει newsletter και γενικότερα να αλληλεπιδρά με την σελίδα.



Οι δυναμικές ιστοσελίδες έχουν υψηλότερο κόστος κατασκευής από ότι οι στατικές και αυτό είναι λογικό, λόγω της πολυπλοκότητας του περιχομένου τους. Ενδεικτικά οι τιμές κυμαίνονται από 300 ευρώ, ενώ έχω δει να φτάνουν εως 5000, αν πρόκειται για ένα πολύ περίπλοκο site, π.χ. το site ενός πολύ μεγάλου e-shop.

Οι τιμές αυτές είναι ενδεικτικές, ενώ μεταβάλλονται διαρκώς.

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

Το δημοφιλέστερο, μεγαλύτερο και πιο διαδεδομένο σύστημα διαχείρησης περιεχομένου (CMS) είναι το Joomla που είναι και open source εφαρμογή, ενώ ακολουθεί και το Drupal, που ομολογουμένως είναι πιο δύσκολο, γιατί απαιτεί γνώσεις προγραμματιστή.



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



Η εφεύρεση των δυναμικών ιστοσελιδών αποτέλεσε σταθμό στη πορεία του internet. Με την ανακάλυψη αυτή, πλέον ο χρήστης από απλός αναγνώστης θα μπορούσε να γίνει μέλος σε μια σελίδα, να την προσαρμόσει στα μέτρα του, να προσθέσει τις δικές του πληροφορίες σε αυτή, και γενικώς με τις δυναμικές ιστοσελίδες δημιουργήθηκαν τα μεγαλύτερα σε επισκεψημότητα σημερινά sites. Αυτή η ανακάλυψη είχε σημαντικότατες επιπτώσεις σε διάφορους τομείς. Πλέον πολλοί σύλλογοι, ομάδες έχουν μόνο διαδικτυακή παρουσία. Ιδίως οι άνθρωποι με αναπηρίες μπορούν να κάνουν πράγματα, που δεν θα μπορούσαν να τα κάνουν με άλλον τρόπο. Με τις δυναμικές ιστοσελίδες, “ζωντάνεψε” το internet!



Μην ξεχνάμε ότι όλα τα ηλεκτρονικά καταστήματα (e-shops) και οι ηλεκτρονικές κρατήσεις ξενοδοχείων (online booking) είναι εφικτές μόνο απο δυναμικές σελίδες. Με τα δυναμικά websites, πλέον μπορούμε να κάνουμε οικονομικές συναλλαγές μέσω του internet, να δούμε τα e-mail μας και γενικότερα να κάνουμε πράγματα που παλαιότερα ήταν αδύνατα από το διαδίκτυο.



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



Παρακαλώ σεβαστείτε τα πνευματικά δικαιώματα (copyrights) στο παραπάνω άρθρο! Μου πήρε εβδομάδες για να το συγγράψω. Παρακάτω αναφέρω τις πηγές από τις οποίες άντλησα το περιεχόμενό του άρθρου.


Πηγές:
1. “Μαθαίνετε εύκολα Joomla” από Εκδόσεις Ξαρχάκος
Copyrights: για το http://bloggertips.gr/




Προσθέστε meta tags στο blog σας και βοηθήστε τις μηχανές αναζήτησης να το εντοπίσουν ευκολότερα



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr.



Σήμερα θα σας δείξω πως μπορείτε να “βοηθήσετε” κατά κάποιον τρόπο τις μηχανές αναζήτησης (π.χ. Google, Bing) έτσι ώστε να βρίσκουν με μεγαλύτερη επιτυχία το blog σας στις αναζητήσεις τους, “φέρνοντας” και αυτές με τη σειρά τους νέους επισκέπτες.

Αυτό θα το πετύχουμε μέσω HTML, χρησιμοποιώντας meta tags.



Παρακάτω θα δείτε τη διαδικασία και θα καταλάβετε περισσότερα:



1. Σύνδεση στο λογαριασμό blogger

2. Σχεδίαση

3. Επεξεργασία HTML

4. Με Ctrl + F αναζητούμε το <head> και μετά από αυτό, δηλαδή ακριβώς από κάτω επικολλούμε τα παρακάτω:


<meta content=’DESCRIPTION HERE‘ name=’description’/>

<meta content=’KEYWORDS HERE‘ name=’keywords’/>

<meta content=’AUTHOR NAME HERE‘ name=’author’/>



5. Προσαρμόζουμε τον κώδικα στα δικά μας δεδομένα, δηλαδή:



Αντικαθιστούμε:

το “DESCRIPTION HERE” με μια περιγραφή του blog μας

το “KEYWORDS HERE” με λέξεις-κλειδιά που είναι πιθανό να “τραβήξουν” επισκέπτες και σχετίζονται, φυσικά, με το περιεχόμενο του blog μας

το “AUTHOR NAME HERE” με το όνομα ή τα ονόματα αυτών που γράφουν στο blog



Ας πάρουμε ως πρόχειρο παράδειγμα το bloggertips.gr.

Θα προσαρμόζαμε τον κώδικα ώστε να φαίνεται κάπως έτσι:


<meta content=’Blog που ασχολείται με Web design – Web services – κατασκευή νέων ιστοσελίδων‘ name=’description’/>

<meta content=’bloggertips, blogger tips and hacks, blogger gadgets, web design, web services, make money online‘ name=’keywords’/>

<meta content=’Johnpatra‘ name=’author’/>



6. Αποθήκευση προτύπου, είμαστε έτοιμοι!





Δοκιμάστε το και πείτε μας τη γνώμη σας για αυτό το tip αφήνοντας το σχόλιό σας από κάτω.





Πηγές: http://zenplate.blogspot.com/

Copyrights: http://bloggertips.gr/




Post by Secra from Web in Greece




ΔΗΜΟΣΙΕΥΣΗ ΙΣΟΛΟΓΙΣΜΟΥ ΜΕ 30 ΕΥΡΩ ΜΕ ΔΙΚΟ ΣΑΣ DOMAIN



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Σύμφωνα με το άρθρο 232 του ν. 4072 ΦΕΚ(Α/86/11-4-2012) καταργήθηκε η υποχρέωση δημοσίευσης ισολογισμών σε οικονομικές και πολιτικές εφημερίδες και αντικαταστάθηκε με ανάρτηση των δημοσιευτέων πράξεων και στοιχείων στην ιστοσελίδα της εταιρίας.  



Αναλαμβάνουμε να σας φτιάξουμε μια ολοκληρωμένη ιστοσελίδα (με domain που εσείς επιλέγετε) για την επιχείρησή σας (όπου θα δημοσιεύετε τις οικονομικές καταστάσεις σας) μόνο με 30 ευρω, που είναι η οικονομικότερη της αγοράς!



Στείλτε μας e-mail στο help@bloggertips.gr για να μιλήσουμε τηλεφωνικά ή μέσω skype για περισσότερες λεπτομέρειες!




Ηλεκτρονική έκδοση Περιοδικού-Καταλόγου



Print Friendly and PDFPrintPrint Friendly and PDFPDF



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

Δημιουργήστε ένα λογαριασμό στη διεύθυνση FlipSnack

και στη συνέχεια ανεβάστε τα αρχεία pdf του περιοδικού σας ή του καταλόγου σας.

Ακολουθήστε τα βήματα που σας υποδεικνύει η ιστοσελίδα και το περιοδικό σας ή ο κατάλογός σας είναι έτοιμος!







Copyrights: /




Διαδραστικό Gadget



Print Friendly and PDFPrintPrint Friendly and PDFPDF





Δείτε το live εδώ



Απλά αντιγράψτε  τον παρακάτω κώδικα και επικολλήστε τον ως Gadget.

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











<div class=”container”>

    <div class=”labels”>

        <div id=”label1″ class=”label” ><a href=”link1″>Ζάντες</a>

            <span />

        </span></div>

        <div id=”label2″ class=”label”><a href=”link1″>Φώτα</a>

            <span />

        </span></div>

        <div id=”label3″ class=”label” ><a href=”link1″>Πινακίδα</a>

            <span />

        </span></div>

        <div id=”label4″ class=”label” ><a href=”link1″>Σήμα</a>

            <span />

        </span></div>

        <div id=”label5″ class=”label” ><a href=”link1″>Πόρτα</a>

            <span />

        </span></div>

        <div id=”label6″ class=”label” ><a href=””link1″>Καθρέφτης</a>

            <span />

        </span></div>

    </div>

   

    </div>





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

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





<style>

.container {

    background: url(http://oi49.tinypic.com/2h51kk4.jpg) no-repeat scroll center top transparent;

    color: #000000;

    height: 535px;

    margin: 20px auto;

    overflow: hidden;

    position: relative;

    width: 1030px;

}



.dialog {

    background-color: rgba(163, 154, 77, 0.9);

    color: #FFFFFF;

    display: none;

    height: 140px;

    left: 343px;

    line-height: 24px;

    padding: 100px 30px;

    position: absolute;

    text-align: center;

    top: 97px;

    width: 280px;

    z-index: 10;



    -moz-border-radius: 170px;

    -ms-border-radius: 170px;

    -o-border-radius: 170px;

    -webkit-border-radius: 170px;

    border-radius: 170px;

}

.dialog .close {

    color: black;

    background-color: #65683b;

    cursor: pointer;

    font-size: 22px;

    font-weight: bold;

    height: 36px;

    line-height: 36px;

    position: absolute;

    right: 10px;

    top: 60px;

    width: 36px;



    -moz-border-radius: 18px;

    -ms-border-radius: 18px;

    -o-border-radius: 18px;

    -webkit-border-radius: 18px;

    border-radius: 18px;

}

.labels p {

    display: none;

}

.labels div {

    background-color: rgba(203, 189, 58, 0.8);

    color: #FFFFFF;

    display: none;

    height: 50px;

    padding: 30px 0 0;

    position: absolute !important;

    text-align: center;

    text-decoration: none;

    width: 80px;



    -moz-border-radius: 40px;

    -ms-border-radius: 40px;

    -o-border-radius: 40px;

    -webkit-border-radius: 40px;

    border-radius: 40px;

}

.labels > div {

    background-color: rgba(203, 189, 58, 0.8);



    -moz-transition: .3s;

    -ms-transition: .3s;

    -o-transition: .3s;

    -webkit-transition: .3s;

    transition: .3s;

}

.labels div:hover {

    background-color: rgba(128, 128, 128, 0.8);

}

.labels div span {

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

    border-top: 15px solid rgba(203, 189, 58, 0.8);

    bottom: -14px;

    height: 0;

    left: 30px;

    position: absolute;

    width: 0;



    -moz-transition: .3s;

    -ms-transition: .3s;

    -o-transition: .3s;

    -webkit-transition: .3s;

    transition: .3s;

}

.labels div:hover span {

    border-top: 15px solid rgba(128, 128, 128, 0.8);

}

#label1 {

    left: 720px;

    top: 181px;

}

#label2 {

    left: 495px;

    top: 183px;

}

#label3 {

    left: 165px;

    top: 260px;

}

#label4 {

    left: 270px;

    top: 178px;

}

#label5 {

    left: 845px;

    top: 85px;

}

#label6 {

    left: 239px;

    top: 50px;

}

</style>





<script>



jQuery(function(){

    // initialize of labels

    $(‘.labels div#label1’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

        $(‘.labels div#label2’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

            $(‘.labels div#label3’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

                $(‘.labels div#label4’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

                    $(‘.labels div#label5’).fadeIn(100).effect(‘bounce’, { times:3 }, 300, function() {

                        $(‘.labels div#label6’).fadeIn(100).effect(‘bounce’, { times:3 }, 300);

                    });

                });

            });

        });

    });



    // dialog close

    $(‘.dialog .close’).click(function() {

        $(this).parent().fadeOut(500);

        return false;

    });



    // display dialog on click by labels

    $(‘.labels div’).click(function() {

        $(‘.dialog p’).html( $(this).find(‘p’).html() ).parent().fadeIn(500);

        return false;

    });



    // close dialog on click outside

    $(‘.container’).click(function() {

        $(‘.dialog’).fadeOut(500);

    });

});

</script>







Copyrights: /







Οριζοντιο blogger menu widget (και με search bar) με πολλα submenus (υποκατηγοριες-drop down menu)



Print Friendly and PDFPrintPrint Friendly and PDFPDF




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

μπορείτε να δείτε πως δουλεύει στο http://www.bet-master55giannis35.com/



πρέπει πρώτα να γίνουν κάποιες προεργασίες πριν προχωρήσουμε στην εγκατάσταση του menu



πάμε πανόπτης > πρότυπο > επεξεργασία html και με τη χρήση του ctrl+F ψάχνουμε για την ακόλουθη γραμμή:




<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>




ίσως βρούμε αυτή την γραμμή πολλές φορές

από όλες τις γραμμές διαγράφουμε το class='tabs'



στη συνέχεια ψάχνουμε να βρούμε στον κώδικα για το παρακάτω κομμάτι κώδικα’ για το παρακάτω section




/* Tabs


----------------------------------------------- */




και διαγράφουμε όλο τον κώδικα που υπάρχει ανάμεσα στον παραπάνω με τον παρακάτω κώδικα:




/* Headings


----------------------------------------------- */




δηλαδή από έτσι που ήταν πριν .. :




/* Tabs


----------------------------------------------- */


.tabs-outer {


overflow: hidden;


position: relative;


background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;


}





#layout .tabs-outer {


overflow: visible;


}





.tabs-cap-top, .tabs-cap-bottom {


position: absolute;


width: 100%;





border-top: 1px solid $(tabs.border.color);





}





.tabs-cap-bottom {


bottom: 0;


}





.tabs-inner .widget li a {


display: inline-block;





margin: 0;


padding: .6em 1.5em;





font: $(tabs.font);


color: $(tabs.text.color);





border-top: 1px solid $(tabs.border.color);


border-bottom: 1px solid $(tabs.border.color);


border-$startSide: 1px solid $(tabs.border.color);


}





.tabs-inner .widget li:last-child a {


border-$endSide: 1px solid $(tabs.border.color);


}





.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {


background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;


color: $(tabs.selected.text.color);


}


/* Headings


----------------------------------------------- */  




.. θα μείνει έτσι:




/* Tabs


----------------------------------------------- */





/* Headings


----------------------------------------------- */




τώρα εκεί που διαγράψατε προηγουμένως τον κώδικα ανάμεσα στο tabs section και στο headings section θα βάλετε τον παρακάτω κώδικα:




#crosscol ul {z-index: 200; padding:0 !important;}


#crosscol li:hover {position:relative;}


#crosscol ul li {padding:0 !important;}


.tabs-outer {z-index:1;}


.tabs .widget ul, .tabs .widget ul {overflow: visible;}




τελείωσαν οι προεργασίες και τώρα προχωρούμε στην εγκατάσταση του μενου μας



βρίσκουμε το



]]></b:skin>



και από πάνω του επικολλούμε τον παρακάτω κώδικα:




/* Horizontal drop down menu


----------------------------------------------- */


#menuWrapper {


width:100%; /* Menu width */


height:35px;


padding-left:14px;


background:#333; /* Background color */


border-radius: 10px;


}


.menu {


padding:0;


margin:0;


list-style:none;


height:35px;


position:relative;


z-index:5;


font-family:arial, verdana, sans-serif;


}


.menu li:hover li a {


background:none;


}


.menu li.top {display:block; float:left;}


.menu li a.top_link {


display:block;


float:left;


height:35px;


line-height:34px;


color:#ccc;


text-decoration:none;


font-family:"Verdana", sans-serif;


font-size:12px; /* Font size */


font-weight:bold;


padding:0 0 0 12px;


cursor:pointer;


}


.menu li a.top_link span {


float:left;


display:block;


padding:0 24px 0 12px;


height:35px;


}


.menu li a.top_link span.down {


float:left;


display:block;


padding:0 24px 0 12px;


height:35px;


}


.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }


.menu li:hover {position:relative; z-index:2;}


.menu ul,


.menu li:hover ul ul,


.menu li:hover ul li:hover ul ul,


.menu li:hover ul li:hover ul li:hover ul ul,


.menu li:hover ul li:hover ul li:hover ul li:hover ul ul


{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}





.menu li:hover ul.sub {


left:0;


top:35px;


background:#333; /* Submenu background color */


padding:3px;


white-space:nowrap;


width:200px;


height:auto;


z-index:3;


}


.menu li:hover ul.sub li {


display:block;


height:30px;


position:relative;


float:left;


width:200px;


font-weight:normal;


}


.menu li:hover ul.sub li a{


display:block;


height:30px;


width:200px;


line-height:30px;


text-indent:5px;


color:#ccc;


text-decoration:none;


}


.menu li ul.sub li a.fly {


/* Submenu Background Color */


background:#333 url(http://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif) 185px 10px no-repeat;}


.menu li:hover ul.sub li a:hover {


background:#515151; /* Background Color on mouseover */


color:#fff;


}


.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {


/* Background on Mouseover */


background:#646464 url(http://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;}





.menu li:hover ul li:hover ul,


.menu li:hover ul li:hover ul li:hover ul,


.menu li:hover ul li:hover ul li:hover ul li:hover ul,


.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {


left:200px;


top:-4px;


background: #333; /* Background Color of the Submenu */


padding:3px;


white-space:nowrap;


width:200px;


z-index:4;


height:auto;


}


#search {


width: 228px; /* Width of the Search Box */


height: 50px;


float: right;


z-index: 2;


text-align: center;


margin-top: 5px;


margin-right: 6px;


/* Background of the Search Box */


background: url(http://2.bp.blogspot.com/-kSPW07r2Ct8/UazXPD9DbfI/AAAAAAAADtE/UyopBgIPe-w/s1600/searchBar1.png) no-repeat;


}


#search-box {


margin-top: 3px;


border:0px;


background: transparent;


text-align:center;


}




Σε όλο τον παραπάνω κώδικα θα βρείτε επεξηγήσεις ανάμεσα σε “/*” , “*/” (π.χ. “/* Menu width */”), ώστε να το μορφοποιήσετε όπως θέλετε. Αν δεν έχετε μια Α’ εξοικείωση, τότε μην ασχοληθείτε γιατί θα τα μπερδέψετε.



Τώρα πατήστε Αποθήκευση Προτύπου



Έπειτα πάμε διάταξη > Προσθήκη gadget > HTML/JavaScript

και επικολλούμε τον παρακάτω κώδικα:




<div id='menuWrapper'>


<ul class='menu'>


<li class='top'><a class='top_link' href='Link URL'><span>Title 1</span></a></li>





<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 2</span></a><ul class='sub'><li><a class='fly' href='Link URL'>Submenu 2.1</a><ul>


<li><a href='Link URL'>Submenu 2.1.1</a></li>


<li><a href='Link URL'>Submenu 2.1.2</a></li>


<li><a href='Link URL'>Submenu 2.1.3</a></li>


</ul>


</li>


<li class='mid'><a class='fly' href='Link URL'>Submenu 2.2</a>


<ul>


<li><a href='Link URL'>Submenu 2.2.1</a></li>


<li><a href='Link URL'>Submenu 2.2.2</a></li>


<li><a href='Link URL'>Submenu 2.2.3</a></li>


<li><a class='fly' href='Link URL'>Submenu 2.2.4</a>


<ul>


<li><a href='Link URL'>Submenu 2.2.4.1</a></li>


<li><a href='Link URL'>Submenu 2.2.4.2</a></li>


<li><a href='Link URL'>Submenu 2.2.4.3</a></li>


</ul>


</li>


<li><a href='Link URL'>Submenu 2.2.5</a></li>


<li><a class='fly' href='Link URL'>Submenu 2.2.6</a>


<ul>


<li><a href='Link URL'>Submenu 2.2.6.1</a></li>


<li><a href='Link URL'>Submenu 2.2.6.2</a></li>


</ul>


</li>


</ul>


</li>


<li><a href='Link URL'>Submenu 2.3</a></li>


<li><a href='Link URL'>Submenu 2.4</a></li>


<li><a href='Link URL'>Submenu 2.5</a></li>


</ul>


</li>





<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 3</span></a>


<ul class='sub'>


<li><a href='Link URL'>Submenu 3.1</a></li>


<li><a href='Link URL'>Submenu 3.2</a></li>


<li><a href='Link URL'>Submenu 3.3</a></li>


<li><a href='Link URL'>Submenu 3.4</a></li>


</ul>


</li>





<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 4</span></a>


<ul class='sub'>


<li><a href='Link URL'>Submenu 4.1</a></li>


<li><a class='fly' href='Link URL'>Submenu 4.2</a>


<ul>


<li><a href='Link URL'>Submenu 4.2.1</a></li>


<li><a href='Link URL'>Submenu 4.2.2</a></li>


<li><a href='Link URL'>Submenu 4.2.3</a></li>


<li><a href='Link URL'>Submenu 4.2.4</a></li>


<li><a href='Link URL'>Submenu 4.2.5</a></li>


<li><a href='Link URL'>Submenu 4.2.6</a></li>


</ul>


</li>


<li><a href='Link URL'>Submenu 4.3</a></li>


<li><a href='Link URL'>Submenu 4.4</a></li>


<li><a href='Link URL'>Submenu 4.5</a></li>


<li><a href='Link URL'>Submenu 4.6</a></li>


</ul>


</li>





<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 5</span></a>


<ul class='sub'>


<li><a href='Link URL'>Submenu 5.1</a></li>


<li><a href='Link URL'>Submenu 5.2</a></li>


<li><a href='Link URL'>Submenu 5.3</a></li>


</ul>


</li>








<!-- Search Bar -->


<li>


<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>


<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Search here...";' onfocus='if (this.value == "Search here...") this.value = "";' size='28' type='text' value='Search here...'/></form>


</li>





</ul>


</div>




Κάντε αποθήκευση του gadget σας και είστε σχεδόν έτοιμοι!



Σχεδόν, γιατί πρέπει να προσθέσετε τα links που εσείς θέλετε.

Η διαδικασία είναι πάντα ίδια σε όλα τα menus. Μπορείτε να δείτε και μια παλιά μου ανάρτηση με blogger menu (π.χ. /2011/04/blogger-menu-3.html) για να καταλάβετε καλύτερα.



αν θέλετε να προσθέσετε άλλο ένα λινκ τότε πάνω από την search bar βάζετε το:




<li class="top"><a href="Link URL" class="top_link"><span>Title</span></a></li>




ενώ αν θέλετε άλλο ένα λινκ με υποκατηγορίες θα προσθέσετε το:




<li class="top"><a href="Link URL" class="top_link"><span class="down">Title</span></a>


<ul class="sub">


<li><a href="Link URL">Submenu Title</a></li>


<li><a href="Link URL">Submenu Title</a></li>


<li><a href="Link URL">Submenu Title</a></li>


</ul>


</li>




και τώρα ας πούμε πως σε μια υποκατηγορία (

<li><a href="Link URL">Submenu Title</a></li>

) θέλετε να τις βάλετε δικές της υποκατηγορίες, δηλαδή υποκατηγορία στην υποκατηγορία, τότε το

<li><a href="Link URL">Submenu Title</a></li>

θα πρέπει να γίνει έτσι:




<li><a href="Link URL" class="fly">Submenu Title</a>


<ul>


<li><a href="Link URL">Other Submenu</a></li>


<li><a href="Link URL">Other Submenu</a></li>


<li><a href="Link URL">Other Submenu</a></li>


</ul>


</li>




Τα σχόλιά σας, πάντα ευπρόσδεκτα!



Αν το bloggertips.gr σας έχει βοηθήσει, βοηθήστε το κι εσείς με ένα απλό like στο https://www.facebook.com/www.bloggertipstips.gr



Copyrights: /




ΠΟΛΛΑ ΚΑΙ ΔΙΑΦΟΡΑ BLOGGER WIDGETS (BEST BLOGGER GADGETS)



Print Friendly and PDFPrintPrint Friendly and PDFPDF




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

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





RSS TICKER NEWS



http://www.rsspump.com/



ΑΝΕΚΔΟΤΑ



http://asteiakia.gr/ticker.php

http://asteiakia.gr/widget.php



ΖΩΔΙΑ



http://zodia123.gr/widget1.php



ΣΥΝΤΑΓΕΣ ΜΑΓΕΙΡΙΚΗΣ



http://greekcook.gr/ticker.php



ΑΘΛΗΤΙΚΑ ΝΕΑ ΚΑΙ GADGETS ΓΙΑ ΣΤΟΙΧΗΜΑ



http://www.goalsgr.com/widgets/

http://www.bxpbet.com/bxpw.php

http://www.oddspower.com/widgets

http://agones.gr/ticker.php

http://www.novasports.gr/General.aspx?a_id=262850

http://www.novasports.gr/General.aspx?a_id=262852

http://www.oddsportal.com/widgets/next-matches/

/2010/07/gadget.html

http://www.mylivescores.com/live-scores-widgets

http://www.onsports.gr/widgets

http://www.gazzetta.gr/widgets



TV – ΤΗΛΕΟΡΑΣΗ



http://programmatileorasis.gr/ticker.php



ΣΑΝ ΣΗΜΕΡΑ ..



http://www.sansimera.gr/widgets



ΚΑΙΡΟΣ – ΜΕΤΕΟ



http://www.deltiokairou.gr/gr/widgets/

http://kairos123.gr/widget4.php

http://www.weather.gr/gr/gr/widgets/

http://freemeteo.com/default.asp?pid=183&la=1



CINEMA



http://cinema24.gr/widget1.php



ΠΡΩΤΟΣΕΛΙΔΑ – ΕΦΗΜΕΡΙΔΕΣ – ΕΠΙΚΑΙΡΟΤΗΤΑ



http://www.gazzetta.gr/newsstand/sport/18-09-2013

http://www.newsbeast.gr/newspapers/build-widget/

http://www.typosline.gr/widgets.php

http://news247.gr/tools/

http://newsgallery.gr/widget1.php

http://wm.loon.gr/demo/show/frontpages

http://www.protoselidaefimeridon.gr/widget.php

http://cebil.gr/newticker.php

http://www.frontpages.gr/tickerinstructions.php



SHOWBIZ NEWS



http://www.ishow.gr/webmasters-info.asp



ΜΕΤΡΗΤΕΣ ΕΠΙΣΚΕΨΗΜΟΤΗΤΑΣ



http://www.revolvermaps.com/?target=gallery

http://flagcounter.com/

http://whos.amung.us/showcase/

http://statcounter.com/

http://www.sitemeter.com/



GOOGLE GADGETS



http://www.google.com/ig/directory?synd=open&source=gghp

http://www.google.com/ig/directory?synd=open&q=maps



ΕΟΡΤΟΛΟΓΙΑ



http://www.eortologio.gr/html_code_UTF_el.php

http://www.eortologio.net/?ticker=1

http://eortologio.com2.gr/



RADIO



/2009/10/o-widget.html



ΧΡΙΣΤΟΥΓΕΝΝΙΑΤΙΚΑ GADGETS



/search/label/christmas



GAMES – ΠΑΙΧΝΙΔΙΑ



/2010/04/game-for-your-blog.html

/2010/11/sudoku-game-for-blogger.html



ONLINE ΚΟΜΠΙΟΥΤΕΡΑΚΙ



/2010/07/online-blog-html-calculator-for-your.html



ΨΗΦΙΑΚΑ ΡΟΛΟΓΙΑ



http://www.clocklink.com/gallery.php



CHAT24.GR



http://chat24.gr/chat.php



FACEBOOK GADGEGTS



http://developers.facebook.com/docs/plugins/



ΓΙΑ ΜΕΤΑΦΡΑΣΗ – TRANSLATE GADGETS



http://www.conveythis.com/

http://translate.google.com/manager/website/

/2010/03/flags-translator-widget.html

/2009/11/widgets-translate.html



ΔΙΑΦΟΡΑ GADGETS



/search/label/gadgets%20for%20your%20blog

http://www.widgetbox.com/widgets/

http://sidebar.gr/widgets/

http://wm.loon.gr/



Copyrights: /




Αυτοματο Slider των τελευταιων αναρτησεων – Automatic Slider for Blogger



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Ένα απλό και αυτόματο slider όπως φαίνεται στην παραπάνω εικόνα. 



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



Από την διάταξη επιλέγουμε προσθήκη gagdet, σκρολάρουμε μέχρι το HTML/JavaScript και εκεί επικολλούμε τον παρακάτω κώδικα:



<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>

<div id="slider-rotator" class="slider-rotator loading"></div>

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

<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>

<script type="text/javascript">

makeSlider({

    url: "" // Add your blog URL

});

</script>

Αλλάζετε το με τη διεύθυνση της δικής σας ιστοσελίδας.



Και αποθήκευση.



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



Copyrights: /




Αυτόματο Share αναρτήσεων σε Facebook,Twitter και Google+



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Η παρακάτω υπηρεσία προσφέρει τη δυνατότητα αυτόματης διαμοίρασης αναρτήσεων σε Facebook,Twitter και Google+ για να σας γλιτώσει από χρόνο και κόπο.



(1)Εγγραφείτε εδώ http://dlvr.it


(2)Βάλτε το link του FeedBurner σας εδώ :

(*)Εάν δεν έχετε FeedBurner link διαβάστε εδώ πως φτίαχνετε



(3)Επιλέξτε σε ποιά Social Media θέλετε να κάνετε Share τις αναρτήσεις σας

(4)Εάν,για παράδειγμα,κλικάρετε το Twitter,θα μεταφερθείτε στη σελίδα του Twitter από όπου κάνετε Login

(5)Μόλις ολοκληρωθεί η διαδικασία,ο λογαριασμός του Twitter σας θα προστεθεί στο Dashboard του dlvr.it .Αυτό σημαίνει ότι οι δημοσιεύσεις σας θα αναρτόνται αυτόματα στο Twitter.Εάν θέλετε να προσθέσετε και άλλα μέσα δικτύωσης πατήστε Add Route



Στη θέση Source βάζετε το link του Feedburner σας και στο destination το μέσω δικτύωσης.





Copyrights: /




Οριζοντιο menu-μπαρα με links



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πρόκειται για μια μπάρα-menu με links-συνδέσμους που τοποθετείται συνήθως κάτω από την επικεφαλίδα της σελίδας σας.



Εγκαθιστάται σαν απλό gadget.

 Ο κώδικας html του είναι:


<style type=”text/css”>
body {
margin:0;
padding:0;
font: bold 14px Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
margin: 0px;
padding: 0px 0px 0px 15px;
}
/*- Menu Tabs H————————— */
#tabsH {
float:left;
width:100%;
font-size:95%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:0px 5px 0 0px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/ctooem437d87yvdblwpns116496/files/tablefth.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url(https://lh5.googleusercontent.com/-muwyDaV_THM/T8mHdxUM2DI/AAAAAAAAU04/BCkIxTvkWHo/h86/tabrightH.gif) no-repeat right top;
padding:5px 5px 6px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
</style>
<div id=”tabsH”>
<ul>
<li><a href=”/” ><span>category 1</span></a></li>
<li><a href=”/” ><span>category 2</span></a></li>
<li><a href=”/” ><span>category 3</span></a></li>
<li><a href=”/” ><span>category 4</span></a></li>
<li><a href=”/” ><span>category 5</span></a></li>
<li><a href=”/” ><span>category 6</span></a></li>
<li><a href=”/” ><span>category 7</span></a></li>
<li><a href=”/” ><span>category 8</span></a></li>
</ul>
</div>



όπου βλέπετε / βάζετε το δικό σας link

και όπου λέει category βάζετε το όνομα που θέλετε να εμφανίζεται.



καταλαβαίνετε πως μπορείτε να προσθέσετε ή να αφαιρέσετε κατηγορίες



αν σας άρεσε κάντε ένα like στη σελίδα μας στο facebook



 Copyrights: /




ΑΡΧΕΙΟ ΑΝΑΡΤΗΣΕΩΝ GADGET – Blogger Archive with Pagination



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Ένα πολύ ωραίο και χρήσιμο gadget που συγκεντρώνει όλες σας τις αναρτήσεις σε μία μόνο ανάρτηση!

Δείτε πως λειτουργεί στο DEMO 

Αναρτήστε με μια ανάρτηση ή στατική σελίδα τον παρακάτω κώδικα:


<style type=”text/css”>
.post{
width:600px;
margin:50px auto 50px;
}
#toc-outer {
font:normal 11px/14px Arial,Sans-Serif;
color:black;
text-align:left;
margin:0px auto;
}
#loadingscript {
font-weight:bold;
font-size:20px;
text-align:center;
}
#loadingscript, .itemposts {
margin:0px 0px 2px;
height:auto;
overflow:hidden;
display:block;
background-color:#FDC20E;
border:1px solid #FC9B05;
padding:10px;
}
.itemposts h6 {
margin:0px 0px 10px;
font:normal 14px/16px Impact,Arial,Sans-Serif;
text-transform:uppercase;
color:black;
padding:0px 10px;
height:24px;
line-height:24px;
background-color:#FC9B05;
position:relative;
overflow:hidden;
}
.itemposts h6 a {
color:black;
text-decoration:none;
}
.itemposts h6:after {
content:””;
width:0px;
height:0px;
border:12px solid transparent;
border-top-color:black;
border-right-color:black;
position:absolute;
top:0px;
right:0px;
}
.itemposts img {
float:left;
height:72px;
width:72px;
margin:0px 10px 5px 0px;
padding:0px;
background-color:white;
border:none;
-webkit-border-radius:44px;
-moz-border-radius:44px;
border-radius:0px;
-webkit-box-shadow:0px 0px 0px 4px #E52117;
-moz-box-shadow:0px 0px 0px 4px #E52117;
box-shadow:0px 0px 0px 4px #E52117;
}
.itemposts .iteminside {}
.itemposts .itemfoot {
clear:both;
padding:5px 10px 5px 20px;
margin:10px 0px 0px;
background-color:#222;
color:white;
font-style:italic;
position:relative;
overflow:hidden;
}
.itemposts .itemfoot:after {
content:””;
width:0px;
height:0px;
border:10px solid transparent;
border-left-color:#E52117;
border-top-color:#E52117;
position:absolute;
top:0px;
left:0px;
}
.itemposts .itemfoot a.itemrmore {
font-weight:bold;
color:#4B9540;
float:right;
text-decoration:none;
}
.itemposts .itemfoot a.itemrmore:hover {
text-decoration:underline;
}
#itempager {
padding:30px 0px;
background-color:black;
background-image:-webkit-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-moz-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-ms-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-o-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
border:4px solid #ccc;
}
#pagination, #totalposts {
display:block;
color:white;
text-shadow:0px 1px 0px black;
font:bold 10px Verdana,Arial,Sans-Serif;
padding:0px;
text-align:center;
background-color:#FDC20E;
padding:10px 15px;
}
#pagination {border-top:4px solid black;}
#totalposts {border-bottom:4px solid black;border-top:1px solid #FC9B05;}
#pagination span, #pagination a {
color:white;
display:inline;
margin:0 1px;
padding:3px 5px;
text-indent:0px;
background-color:#316F27;
text-decoration:none;
text-shadow:none;
}
#pagination a:hover {background-color:#666;}
#pagination span.actual {background-color:black;}
#pagination span.hidden {display:none;}
</style>
<script type=”text/javascript”>
showPostDate = true;
showComments = true;
idMode = true;
sortByLabel = false;
var labelSorter = “JQuery”,
loadingText = “Loading…”,
totalPostLabel = “Total Posts:”,
jumpPageLabel = “Page”,
commentsLabel = “Comments”,
rmoreText = “Read more ►”,
prevText = “Preview”,
nextText = “Next”,
siteUrl = “ΤΟ URL ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ”,
postsperpage = 10,
numchars = 370,
imgBlank = “http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg”;
</script><br />
<script type=”text/javascript” src=”http://yourjavascript.com/4335152193/blogger-archive-with-pagination.js”></script>
<div style=’clear: both;’></div>



Το μόνο που έχετε να αλλάξετε είναι να βάλετε τη διεύθυνση της σελίδας σας εκεί που λέει “ΤΟ URL ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ”

επίσης στη δεύτερη σειρά μπορείτε να αλλάξετε το πλάτος-width 

αν γνωρίζετε λίγο html καταλαβαίνετε πως μπορείτε να αλλάξετε πολλά ακόμα..



Πηγή: http://www.bloggertipsandtricks.net/2013/05/blogger-archive-with-pagination.html
Copyrights: /




ΑΡΧΕΙΟ ΑΝΑΡΤΗΣΕΩΝ



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Βάλτε το παρακάτω στο δικό σας blog από ΕΔΩ !





Follow Buttons



Print Friendly and PDFPrintPrint Friendly and PDFPDF






Σε αυτό το ποστ θα σας δείξω μερικά υπέροχα κουμπιά ανακατεύθυνσης στο facebook,στο twitter αλλά και για εγγραφή στο rss feed.

Τα κουμπιά βρίσκονται στη σελίδα αυτή. Υπάρχουν 4 σελίδες με συνολικά 78 κουμπιά.Για να τα εγκαταστήσετε στο blog σας,επιλέγετε Add a Gadget –> Image –> Στο παράθυρο που εμφανίζεται αφήνουμε κενές τις 2 πρώτες επιλογές,δηλαδή το title και το caption.Η 3η επιλογή γράφει Link και εκεί πρέπει να επικολλήσετε το Link της σελίδας σας π.χ. του facebook ή του twitter.Η τέταρτη επιλογή αναγράφει image.Επιλέγετε From the web. Paste an image URL below και στη συνέχεια ανατρέχετε στη σελίδα με τα κουμπιά και αφού βρείτε αυτό που σας αρέσει πατάτε την επιλογή που έχει από κάτω του show codes.Εν συνεχεία αντιγράφετε το 2ο link,δηλαδή το Direct Link και κάνετε επικόλληση στην επιλογή From the web. Paste an image URL below .Η διαδικασία έχει και φωτογραφίες για την διευκόλυνσή σας.

















Copyrights: /




Αυξήστε την ταχύτητα του internet!



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Είναι κοινό μυστικό ότι οι πάροχοι(δηλαδή οι εταιρείες που μας προσφέρουν Internet) στην Ελλάδα τουλάχιστον έχουν τεράστιες αποκλίσεις στην ονομαστική ταχύτητα(δηλαδή αυτή που μας πουλάνε) και την πραγματική ταχύτητα.

Ένας απλός τρόπος για να το διαπιστώσει κανείς είναι να κάνει αυτό το σύντομο test εδώ .

Φυσικά υπάρχει τρόπος να αυξήσουμε την ταχύτητα του internet εγκαθιστώντας ένα πρόγραμμα από εδώ .

Αυτό που κάνει το πρόγραμμα αυτό,είναι να ενώνει ταχύτητες,για παράδειγμα εάν διαθέτουμε ασύρματο Wifi,που μας παρέχει πραγματική ταχύτητα 10Mbps,μπορούμε να συνδέσουμε ΚΑΙ το καλώδιο Ethernet με αποτέλεσμα να έχουμε 10Mbps από το Wifi και 10Mbps που το πρόγραμμα τα αθροίζει δίνοντάς μας συνολικά 20Mbps για να σερφάρουμε.

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







Copyrights: /




pop up facebook like box for blogger



Print Friendly and PDFPrintPrint Friendly and PDFPDF



Πρόκειται για ένα θαυμάσιο pop up facebook like box for blogger, το οποίο:



Με το που μπαίνει κάποιος επισκέπτης στη σελίδα σας θα εμφανίζεται ένα αναδυόμενο παράθυρο (pop up) το οποίο θα παροτρύνει τον επισκέπτη σας να κάνει like στη σελίδα σας στο facebook. Είναι πολύ διαδεδομένο τελευταία και σίγουρα θα το έχετε προσέξει σε άλλες ιστοσελίδες. Αυτό εγκαθιστά αυτόματα cookies στον υπολογιστή του επισκέπτη, ώστε αν σας επισκεφτεί κάποιος και δεύτερη φορά να μην του ξαναεμφανιστεί το pop up και καταντήσει από χρήσιμο και αποτελεσματικό να γίνει ένα σπαστικό widget.



Η διαδικασία προσθήκης του είναι πολύ εύκολη.



1. σύνδεση στο blogger.com

2. Διάταξη > Προσθήκη gadget > HTML/JavaScript

3. Eπικολλήστε εκεί τον παρακάτω κώδικα:


<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js’></script>

<script src=”http://yourjavascript.com/3093182329/btt_jquery.colorbox-min.js”></script>

<style>#colorbox, #cboxOverlay, #cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;}#cboxOverlay{position:fixed;width:100%;height:100%;}#cboxMiddleLeft, #cboxBottomLeft{clear:left;}#cboxContent{position:relative;}#cboxLoadedContent{overflow:auto;}#cboxTitle{margin:0;}#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;}#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}.cboxPhoto{float:left;margin:auto;border:0;display:block;}.cboxIframe{width:100%;height:100%;display:block;border:0;}#cboxOverlay{background:#000;opacity:0.5 !important;}#colorbox{/*box-shadow*/-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);box-shadow:0 0 15px rgba(0,0,0,0.4);}#cboxTopLeft{width:14px;height:14px;background:url(http://1.bp.blogspot.com/-t5nd9AtEcL8/T3WbsokUXAI/AAAAAAAACDg/bvza-PbD5ho/s1600/controls.png) no-repeat 0 0;}#cboxTopCenter{height:14px;background:url(http://3.bp.blogspot.com/-CuV9SmF3JaE/T3WcIeBX1GI/AAAAAAAACDo/6mDsw0AuGS4/s1600/border.png) repeat-x top left;}#cboxTopRight{width:14px;height:14px;background:url(http://1.bp.blogspot.com/-t5nd9AtEcL8/T3WbsokUXAI/AAAAAAAACDg/bvza-PbD5ho/s1600/controls.png) no-repeat -36px 0;}#cboxBottomLeft{width:14px;height:43px;background:url(http://1.bp.blogspot.com/-t5nd9AtEcL8/T3WbsokUXAI/AAAAAAAACDg/bvza-PbD5ho/s1600/controls.png) no-repeat 0 -32px;}#cboxBottomCenter{height:43px;background:url(http://3.bp.blogspot.com/-CuV9SmF3JaE/T3WcIeBX1GI/AAAAAAAACDo/6mDsw0AuGS4/s1600/border.png) repeat-x bottom left;}#cboxBottomRight{width:14px;height:43px;background:url(http://1.bp.blogspot.com/-t5nd9AtEcL8/T3WbsokUXAI/AAAAAAAACDg/bvza-PbD5ho/s1600/controls.png) no-repeat -36px -32px;}#cboxMiddleLeft{width:14px;background:url(http://1.bp.blogspot.com/-t5nd9AtEcL8/T3WbsokUXAI/AAAAAAAACDg/bvza-PbD5ho/s1600/controls.png) repeat-y -175px 0;}#cboxMiddleRight{width:14px;background:url(http://1.bp.blogspot.com/-t5nd9AtEcL8/T3WbsokUXAI/AAAAAAAACDg/bvza-PbD5ho/s1600/controls.png) repeat-y -211px 0;}#cboxContent{background:#fff;overflow:visible;}#cboxLoadedContent{margin-bottom:5px;}#cboxLoadingOverlay{background:url(http://4.bp.blogspot.com/-4Qn7M-IPt4c/T3WdJemHwnI/AAAAAAAACDw/9fXsGPXJ1ig/s1600/loadingbackground.png) no-repeat center center;}#cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-V757h43tLZU/T3WdmKS5Q5I/AAAAAAAACD4/25oYbn0MMfU/s1600/loading.gif) no-repeat center center;}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C;}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C;}#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute;bottom:-29px;background:url(http://1.bp.blogspot.com/-t5nd9AtEcL8/T3WbsokUXAI/AAAAAAAACDg/bvza-PbD5ho/s1600/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px;}#cboxPrevious{left:0px;background-position:-51px -25px;}#cboxPrevious.hover{background-position:-51px 0px;}#cboxNext{left:27px;background-position:-75px -25px;}#cboxNext.hover{background-position:-75px 0px;}#cboxClose{right:0;background-position:-100px -25px;}#cboxClose.hover{background-position:-100px 0px;}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px;}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px;}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}#btt{font:12px/1.2 Arial,Helvetica,san-serif;color:#666;}#btt a, #btt a:hover, #btt a:visited{text-decoration:none;}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px 5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px 5px #CCCCCC;padding:10px;line-height:25px;font-family:arial !important;}.mdbox-tagline{color:#999;margin:0;text-align:center;}#mdsubs-container{padding:35px 0 30px 0;position:relative;}a:link, a:visited{border:none;}.demo{display:none;}</style><script src=”http://yourjavascript.com/3093182329/btt_jquery.colorbox-min.js”></script>

<script type=”text/javascript”>

jQuery(document).ready(function(){

if (document.cookie.indexOf(‘visited=true’) == -1) {

var fifteenDays = 1000*60*60*24*30;

var expires = new Date((new Date()).valueOf() + fifteenDays);

document.cookie = “visited=true;expires=” + expires.toUTCString();

$.colorbox({width:”600px”, inline:true, href:”#btt”});

}

});

</script> <div style=’display:none’><div id=’btt’ style=’padding:10px; background:#fff;’><center><table align=”center”background=”http://2.bp.blogspot.com/-5yMUILmjjyc/T3WeEqzdfHI/AAAAAAAACEA/XJDxnKh6W48/s1600/background+image.png” border=”0″ height=”300″ style=”width: 505px;”><tbody><tr><td height=”345″ width=”505″><div align=”right”>



<iframe src=”http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/bloggertipsgr/643745905641753&width=330&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=255″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:330px; height:255px;” allowtransparency=”true”></iframe></div></td></tr></tbody></table></center><p style=” float:right; margin-right:35px; font-size:6px;” >Powered By <a style=” font-size:6px; color:#3B78CD; text-decoration:none;” href=”/” target=’_blank’>BloggerTips.gr</a></p></div></div>



Το μόνο που έχετε να κάνετε πλέον είναι να αλλάξετε το http://www.facebook.com/pages/bloggertipsgr/643745905641753 με τη διεύθυνση της δικής σας σελίδας στο facebook.

 Είστε έτοιμοι!



Αν σας άρεσε κάντε like στη σελίδα μας στο facebook, από το fan box widget που έχουμε δίπλα! 



Copyrights: /




floating facebook like box for blogger + ευρεση id σε facebook page



Print Friendly and PDFPrintPrint Friendly and PDFPDF



Είναι ακριβώς ίδιο με το floating twitter followers box for blogger με μόνη διαφορά πως πρόκειται για το facebook αντί για το twitter.



 Η διαδικασία προσθήκης του είναι πολύ εύκολη. 



 1. σύνδεση στο blogger.com

2. Διάταξη > Προσθήκη gadget > HTML/JavaScript

3. Eπικολλήστε εκεί τον παρακάτω κώδικα:


<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js” type=”text/javascript”>

</script>

<script type=”text/javascript”>

//<!–

$(document).ready(function() {$(“.floatinglikebox”).hover(function() {$(this).stop().animate({right: “0”}, “medium”);}, function() {$(this).stop().animate({right: “-250”}, “medium”);}, 500);});

//–>

</script>

<style type=”text/css”>

.floatinglikebox{background: url(http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png) no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.floatinglikebox div{border:none;position:relative;display:block;}

.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.floatinglikebox span a{color: #808080;text-decoration:none;}

.floatinglikebox span a:hover{text-decoration:underline;}

</style><div class=”floatinglikebox” style=””>

<div>

<iframe src=”//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fbloggertipsgr%2F643745905641753&width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&” scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:251px; height:270px; background:#fff;” allowtransparency=”true”>

</iframe>

<div align=”right”><span style=”font-size: xx-small;background:#fff;”><a href=”” target=”_blank”>BloggerTips.gr</a></span></div>

</div></div>



Προσοχή τώρα: 



σας έχω μαρκάρει με κόκκινο το http%3A%2F%2Fwww.facebook.com%2Fpages%2Fbloggertipsgr%2F643745905641753 

πρέπει να αντικαταστήσετε το bloggertipsgr με το δικό σας name και το 643745905641753 με το δικό σας id 

η γενική μορφή είναι http%3A%2F%2Fwww.facebook.com%2Fpages%2Fname%2Fid 

δεν γίνονται δεκτές διευθύνσεις με username π.χ. https://www.facebook.com/www.bloggertipstips.gr



εύρεση id σε facebook fan page: 



update: στην παρακάτω φωτο έχω κάνει λάθος. το name δεν είναι αυτο που έχω κυκλώσει!



για παράδειγμα αν η url σας είναι της μορφής: https://www.facebook.com/www.bloggertipstips.gr
τότε σβήστε το www και αντικαταστήστε το με το graph
δηλαδή θα γίνει έτσι: https://graph.facebook.com/www.bloggertipstips.gr 

αν ανοίξετε το https://graph.facebook.com/www.bloggertipstips.gr

πάνω-πάνω θα σας εμφανίσει το id της σελίδας σας και παρακάτω το name της (δες φώτο)



Είστε έτοιμοι! 



Αν σας άρεσε κάντε like στη σελίδα μας στο facebook, από το fan box widget που έχουμε δίπλα! 



Copyrights: /