Blogger Tips - Tricks - Gadgets - Templates - Hacks

πωληση bloggertips.gr

2020-05-02T19:22:00.001+03:00

Αγαπητοί επισκέπτες,

το domain name 'bloggertips.gr' πωλείται.
To όνομα χώρου φιλοξενείται σε servers του papaki.gr
Παρακαλώ επικοινωνήστε μαζί μου μέσω e-mail αν υπάρχει ενδιαφέρον.

bloggertips.gr@gmail.com

Admin

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

2013-12-11T15:00:00.000+02:00

Με την παγκόσμια άνθηση του διαδικτύου, τη χρήση του από όλο και περισσότερους ανθρώπους ως βασικό μέσο μαζικής επικοινωνίας, είναι πλέον προφανές ότι το κάθε νομικό ή φυσικό πρόσωπο, επιβάλλεται να έχει παρουσία σε αυτό. Ο συνηθέστερος τρόπος παρουσίασης των προϊόντων μιας επιχείρησης ή η προβολή ιδεών ενός ατόμου είναι μέσω μιας ιστοσελίδας. Τα είδη μιας ιστοσελίδας ποικίλουν, ανάλογα με τις ανάγκες του καθενός. Οι δυο μεγαλύτερες και βασικότερες κατηγορίες ιστοσελίδων είναι οι στατικές (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" από Εκδόσεις Ξαρχάκος

2. http://www.w3schools.com/

3. http://el.wikipedia.org/

Copyrights: για το http://bloggertips.gr/

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

2013-12-10T17:05:00.000+02:00

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

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

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

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

1. Σύνδεση στο λογαριασμό blogger
2. Σχεδίαση
3. Επεξεργασία HTML
4. Με Ctrl + F αναζητούμε το <head> και μετά από αυτό, δηλαδή ακριβώς από κάτω επικολλούμε τα παρακάτω:

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

Αντικαθιστούμε:
το "DESCRIPTION HERE" με μια περιγραφή του blog μας
το "KEYWORDS HERE" με λέξεις-κλειδιά που είναι πιθανό να "τραβήξουν" επισκέπτες και σχετίζονται, φυσικά, με το περιεχόμενο του blog μας
το "AUTHOR NAME HERE" με το όνομα ή τα ονόματα αυτών που γράφουν στο blog

Ας πάρουμε ως πρόχειρο παράδειγμα το bloggertips.gr.
Θα προσαρμόζαμε τον κώδικα ώστε να φαίνεται κάπως έτσι:

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

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

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

Post by Secra from Web in Greece

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

2013-12-02T16:20:00.000+02:00

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

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

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

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

2013-12-01T05:19:00.001+02:00

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

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

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

2013-11-30T21:55:00.002+02:00

Δείτε το 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: http://www.bloggertips.gr/

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

2013-10-05T20:20:00.001+03:00

Πρόκειται για ένα πολύ όμορφο 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9D8HGomgLW92wIKJ707vPzu4HCldU0WyFrCtv15Z8nvdIEEZDNUrdH7vKpQjYOwqdXLDKk-x3YIaextMfQG7jC0BHUI9Ita4v2x-4lEUCgs5rnQrwMunKljMGJt-CCuMShbsgBo0O-Cw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9D8HGomgLW92wIKJ707vPzu4HCldU0WyFrCtv15Z8nvdIEEZDNUrdH7vKpQjYOwqdXLDKk-x3YIaextMfQG7jC0BHUI9Ita4v2x-4lEUCgs5rnQrwMunKljMGJt-CCuMShbsgBo0O-Cw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_w7Xbfw7DD96MUEGS3Zy8J9sUmWrlQUcbfC_rsulZM84__Id1YTjHqWFJaFkAj7U0RledWbKj8Ss6lchvBFVFIsHRQTBEKWD6okHAkLGisOuHMZmNpL0pTtRmgynxqnPxBdJuAwJLIQU/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 (π.χ. http://www.bloggertips.gr/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: http://www.bloggertips.gr/

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

2013-09-19T02:17:00.000+03:00

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

2013-09-18T23:53:00.003+03:00

Ένα απλό και αυτόματο 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: "http://www.bloggertips.gr" // Add your blog URL

});

</script>

Αλλάζετε το http://www.bloggertips.gr με τη διεύθυνση της δικής σας ιστοσελίδας.

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

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

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

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

2013-09-01T16:54:00.000+03:00

Η παρακάτω υπηρεσία προσφέρει τη δυνατότητα αυτόματης διαμοίρασης αναρτήσεων σε 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: http://www.bloggertips.gr/

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

2013-07-28T15:11:00.000+03:00

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

Εγκαθιστάται σαν απλό gadget.
Ο κώδικας html του είναι:

όπου βλέπετε http://www.bloggertips.gr/ βάζετε το δικό σας link
και όπου λέει category βάζετε το όνομα που θέλετε να εμφανίζεται.

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

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

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

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

2013-07-16T15:06:00.000+03:00

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

Το μόνο που έχετε να αλλάξετε είναι να βάλετε τη διεύθυνση της σελίδας σας εκεί που λέει "ΤΟ URL ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ"
επίσης στη δεύτερη σειρά μπορείτε να αλλάξετε το πλάτος-width
αν γνωρίζετε λίγο html καταλαβαίνετε πως μπορείτε να αλλάξετε πολλά ακόμα..

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

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

2013-07-16T15:05:00.001+03:00

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

Follow Buttons

2013-06-09T02:00:00.000+03:00

Σε αυτό το ποστ θα σας δείξω μερικά υπέροχα κουμπιά ανακατεύθυνσης στο 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: http://www.bloggertips.gr/

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

2013-06-07T18:50:00.001+03:00

Είναι κοινό μυστικό ότι οι πάροχοι(δηλαδή οι εταιρείες που μας προσφέρουν Internet) στην Ελλάδα τουλάχιστον έχουν τεράστιες αποκλίσεις στην ονομαστική ταχύτητα(δηλαδή αυτή που μας πουλάνε) και την πραγματική ταχύτητα.
Ένας απλός τρόπος για να το διαπιστώσει κανείς είναι να κάνει αυτό το σύντομο test εδώ .
Φυσικά υπάρχει τρόπος να αυξήσουμε την ταχύτητα του internet εγκαθιστώντας ένα πρόγραμμα από εδώ .
Αυτό που κάνει το πρόγραμμα αυτό,είναι να ενώνει ταχύτητες,για παράδειγμα εάν διαθέτουμε ασύρματο Wifi,που μας παρέχει πραγματική ταχύτητα 10Mbps,μπορούμε να συνδέσουμε ΚΑΙ το καλώδιο Ethernet με αποτέλεσμα να έχουμε 10Mbps από το Wifi και 10Mbps που το πρόγραμμα τα αθροίζει δίνοντάς μας συνολικά 20Mbps για να σερφάρουμε.
Το πρόγραμμα αυτό έχει δυνατότητα δωρεάν δοκιμή για μερικές μέρες και ύστερα πρέπει να το αγοράσετε,εάν σας αρέσει.Βέβαια μπορείτε να συνδυάσετε τις γνώσεις σας με βάση και προηγούμενες αναρτήσεις που έχουμε κάνει για το πως θα το αποκτήσετε δωρεάν.

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

pop up facebook like box for blogger

2013-06-05T18:23:00.000+03:00

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

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

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

1. σύνδεση στο blogger.com
2. Διάταξη > Προσθήκη gadget > HTML/JavaScript
3. Eπικολλήστε εκεί τον παρακάτω κώδικα:

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

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

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

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

2013-06-05T18:10:00.003+03:00

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

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

1. σύνδεση στο blogger.com
2. Διάταξη > Προσθήκη gadget > HTML/JavaScript
3. Eπικολλήστε εκεί τον παρακάτω κώδικα:

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

σας έχω μαρκάρει με κόκκινο το 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: http://www.bloggertips.gr/

floating twitter followers box for blogger

2013-06-05T18:00:00.000+03:00

Πρόκειται για ένα θαυμάσιο floating twitter followers box for blogger, το οποίο, ξεδιπλώνεται όμορφα στον επισκέπτη με το πέρασμα του κέρσορα του ποντικιού του από πάνω του. Αυτή την περίοδο έχω βάλει και εγώ αυτό το widget στο bloggertips, οπότε μπορείτε να δείτε το live demo. Η εικόνα επίσης της παρούσας ανάρτησης είναι διαφωτιστική για τη λειτουργία του widget.

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

1. σύνδεση στο blogger.com
2. Διάταξη > Προσθήκη gadget > HTML/JavaScript
3. Eπικολλήστε εκεί τον παρακάτω κώδικα:

Το μόνο που έχετε να κάνετε πλέον είναι να αλλάξετε το johnpatra με το δικό σας username στο twitter!
Είστε έτοιμοι!

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

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

Κρύψτε αναρτήσεις απο την αρχική σελίδα

2013-05-31T19:24:00.000+03:00

Καλησπέρα,

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

Αρχικά,επιλέγουμε επεξεργασία Html και στη συνέχεια πατάμε Ctrl-F και γράφουμε <!-- posts -->

Στη συνέχεια σβήνουμε όλο το τμήμα του κώδικα από το <!-- posts --> και κάτω,μέχρι να φτάσουμε πάνω από το <! -- navigation -->.

Στη θέση του κώδικα που σβήσαμε κάνουμε επικόλληση τον παρακάτω κώδικα: 

divclass='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

 <data:defaultAdStart/>

 <b:loop values='data:posts' var='post'>

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

<script type='text/javascript'>var ssyby=&#39;<data:post.dateHeader/>&#39;;</script>

<div class='ssyby-date-outer2'>

<b:if cond='data:post.labels'>

<b:if cond='data:blog.url != &quot;http://yoboy-12.blogspot.com/search/label/hide&quot;'>

  <div class='date-outer'>

   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>

   <div class='date-posts'>

    <div class='post-outer'>

     <b:include data='post' name='post'/>

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

          <b:if cond='data:post.showThreadedComments'>

            <b:include data='post' name='threaded_comments'/>

          <b:else/>

            <b:include data='post' name='comments'/>

          </b:if>

     </b:if>

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

          <b:if cond='data:post.showThreadedComments'>

            <b:include data='post' name='threaded_comments'/>

          <b:else/>

            <b:include data='post' name='comments'/>

          </b:if>

     </b:if>

    </div>

    <b:if cond='data:post.includeAd'>

     <b:if cond='data:post.isFirstPost'>

     <data:defaultAdEnd/>

     <b:else/>

     <data:adEnd/>

     </b:if>

      <div class='inline-ad'>

       <data:adCode/>

      </div>

      <data:adStart/>

    </b:if>

   </div>

<b:loop values='data:post.labels' var='label'>

<script type='text/javascript'>

var dhar = &#39;<data:label.name/>&#39;;

if(dhar == "hide" || dhar == "label2"){

document.write(&quot;<div class='hide-climb'/>&quot;);

flag=flag*0;}

</script>

</b:loop>

  </div>

<b:else/>

 <div class='date-outer'>

   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>

   <div class='date-posts'>

    <div class='post-outer'>

     <b:include data='post' name='post'/>

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

          <b:if cond='data:post.showThreadedComments'>

            <b:include data='post' name='threaded_comments'/>

          <b:else/>

            <b:include data='post' name='comments'/>

          </b:if>

     </b:if>

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

          <b:if cond='data:post.showThreadedComments'>

            <b:include data='post' name='threaded_comments'/>

          <b:else/>

            <b:include data='post' name='comments'/>

          </b:if>

     </b:if>

    </div>

    <b:if cond='data:post.includeAd'>

     <b:if cond='data:post.isFirstPost'>

     <data:defaultAdEnd/>

     <b:else/>

     <data:adEnd/>

     </b:if>

      <div class='inline-ad'>

       <data:adCode/>

      </div>

      <data:adStart/>

    </b:if>

   </div>

  </div>

</b:if>

<b:else/>

  <div class='date-outer'>

<script type='text/javascript'>var ssyby=&#39;<data:post.dateHeader/>&#39;;</script>

   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>

   <div class='date-posts'>

    <div class='post-outer'>

     <b:include data='post' name='post'/>

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

          <b:if cond='data:post.showThreadedComments'>

            <b:include data='post' name='threaded_comments'/>

          <b:else/>

            <b:include data='post' name='comments'/>

          </b:if>

     </b:if>

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

          <b:if cond='data:post.showThreadedComments'>

            <b:include data='post' name='threaded_comments'/>

          <b:else/>

            <b:include data='post' name='comments'/>

          </b:if>

     </b:if>

    </div>

    <b:if cond='data:post.includeAd'>

     <b:if cond='data:post.isFirstPost'>

     <data:defaultAdEnd/>

     <b:else/>

     <data:adEnd/>

     </b:if>

      <div class='inline-ad'>

       <data:adCode/>

      </div>

      <data:adStart/>

    </b:if>

   </div>

  </div>

</b:if>

</div>

<b:else/>

  <div class='date-outer'>

<script type='text/javascript'>var ssyby=&#39;<data:post.dateHeader/>&#39;;</script>

   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>

   <div class='date-posts'>

    <div class='post-outer'>

     <b:include data='post' name='post'/>

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

          <b:if cond='data:post.showThreadedComments'>

            <b:include data='post' name='threaded_comments'/>

          <b:else/>

            <b:include data='post' name='comments'/>

          </b:if>

     </b:if>

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

          <b:if cond='data:post.showThreadedComments'>

            <b:include data='post' name='threaded_comments'/>

          <b:else/>

            <b:include data='post' name='comments'/>

          </b:if>

     </b:if>

    </div>

    <b:if cond='data:post.includeAd'>

     <b:if cond='data:post.isFirstPost'>

     <data:defaultAdEnd/>

     <b:else/>

     <data:adEnd/>

     </b:if>

      <div class='inline-ad'>

       <data:adCode/>

      </div>

      <data:adStart/>

    </b:if>

   </div>

  </div>

</b:if>

 </b:loop>

 <data:adEnd/>

</div>

<script src='http://code.jquery.com/jquery-latest.js'/>

<script>

$(&#39;.hide-climb&#39;).closest(&#39;.ssyby-date-outer2&#39;).css(&#39;display&#39;, &#39;none&#39;);

</script>

Είμαστε έτοιμοι!Για να "κρύψετε" τώρα μια ανάρτηση από την αρχική σελίδα απλά βάλτε της ετικέτα hide 

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

Για οποιαδήποτε απορία αφήστε μας σχόλιο στη σελίδα του BloggerTips στο facebook! 
https://www.facebook.com/www.bloggertipstips.gr

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

Δωρεάν site από το BloggerTips!!!

2013-05-19T22:10:00.001+03:00

Το BloggerTips γιορτάζει τις 4.200.000 προβολές του αλλά και την επαναλειτουργία του και κάνει δώρο σε έναν τυχερό μέσα από διαδικασία κλήρωσης ένα site!Για να συμμετάσχετε στον διαγωνισμό κάντε like στη σελίδα μας στο facebook και αφήστε σχόλιο: "Θέλω να συμμετάσχω στον διαγωνισμό".Ο διαγωνισμός θα διαρκέσει 1 εβδομάδα(λήξη 25/5 και ώρα 23:59:59) και η επιλογή του νικητή θα γίνει εντέλώς τυχαία μέσω σχετικού προγράμματος.

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

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

Ενσωμάτωση mp3 player

2013-05-19T21:45:00.000+03:00

Ύστερα από απορία αναγνώστη σχετικά με την ενσωμάτωση mp3 player στο blog σας,αποφάσισα να αναφερθώ στους τρόπους που είναι διαθέσιμοι για την πραγματοποίηση μιας τέτοιας ενέργειας.
(1)SCM Music Player
είναι ένας player,που αναπαραγάγει περισσότερα από ένα τραγούδια.Εάν κάνετε refresh τη σελίδα θα εξακολουθήσει να παίζει το ίδιο τραγούδι.
(2)Streampad
Η διαφορά του με τον προηγούμενο είναι ότι αν κάνετε refresh τη σελίδα θα αλλάξει τραγούδι.
(3)Hypster
δουλεύει όπως ο πρώτος έχοντας όμως μια αρκετά δύσχρηστη ιστοσελίδα που απαιτεί εγγραφή για την απόκτηση player.
(4)Grooveshark
Ιδανικό για τους νοσταλγούς του Mixpod με τη διαφορά ότι διαθέτει μόνο ένα skin να επιλέξετε.

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

New Bloggertips Facebook Fan Page

2013-05-17T19:17:00.001+03:00

Καλησπέρα σας,

όπως βλέπετε τελευταία γίνεται μια προσπάθεια να επανεκκινηθούν οι δραστηριότητες στο bloggertips.gr, μετά από μια πολύ μεγάλη παύση της λειτουργίας του. Έχουμε όρεξη και θέλουμε να τα ξαναφτιάξουμε όλα από την αρχή, διότι πολλά έχουν αλλάξει στην ελληνική blogόσφαιρα το τελευταίο διάστημα. Θέλει πολύ δουλειά, είμαστε μόνο δυο άτομα (εγώ και ο Μιχάλης) και ευελπιστούμε να έχουμε την υπομονή και τη στήριξη σας, όπως είχαμε τόσο καιρό. Είμαστε η πρώτη και η μεγαλύτερη σελίδα bloggertips στην Ελλάδα και έτσι θα παραμείνουμε!

Όσοι το επιθυμούν μπορούν να κάνουν like είτε από το widget στα δεξιά, είτε στο http://www.facebook.com/www.bloggertipstips.gr
Να τονίσω πως είναι η μοναδική επίσημη σελίδα και εκπροσώπηση του bloggertips στο facebook.
Από εδώ και στο εξής ερωτήσεις και απορίες θα απαντώνται μόνο από τη σελίδα στο facebook.

Ευχαριστώ,
johnpatra - admin

Τα καλύτερα site για torrents

2013-05-14T13:20:00.002+03:00

Μια λίστα με τα καλύτερα site για torrents,όπου θα βρείτε εκατομμύρια ταινίες,τραγούδια,εφαρμογές,e-books,σειρές,παιχνίδια και βίντεο:

www.kat.ph

www.thepiratebay.se

www.mininova.org

www.seedpeer.com

Για να κατεβάσετε κάποιο torrent χρειάζεστε έναν client,από τους οποίους οι καλύτεροι είναι:

http://www.bittorrent.com/

http://www.vuze.com/

http://www.utorrent.com/

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

Φόρμα αναζήτησης που αναβοσβήνει στην αναμονή.

2013-05-13T13:34:00.002+03:00

Μια φόρμα αναζήτησης αλλιώτικη από τις άλλες. Αποκλειστικά για μαύρα πρότυπα, αφού έτσι αναδεικνύει την φωτεινότητα που εκπέμπεται όταν κάποιος πάει να την χρησιμοποιήσει.
Λόγω της μεγάλης χωρητικότητας η θέση της είναι αποκλειστικά κάτω από τον header ή το μενού της Σελίδας σας.
DEMO
Ακολουθήστε τα παρακάτω βήματα για να εγκαταστήσετε στο blog σας το Gadget αυτό:

Σύνδεση στον Blogger
Διάταξη / Προσθήκη gadget
Επιλέξτε HTML/JavaScript
Επικολλήστε τον παρακάτω κώδικα:

<style>

.webdesigntuts-workshop { 

 text-align: center;

        padding-top:35px; 

}

.webdesigntuts-workshop:before,

.webdesigntuts-workshop:after {

 content: '';

 display: block; 

 height: 1px;

 left: 50%;

 margin: 0 0 0 0px;

 width: 765px;

}

.webdesigntuts-workshop:before {

 background: #444;

 background: -webkit-linear-gradient(left, #151515, #444, #151515);

 background: -moz-linear-gradient(left, #151515, #444, #151515);

 background: -o-linear-gradient(left, #151515, #444, #151515);

 background: -ms-linear-gradient(left, #151515, #444, #151515);

 background: linear-gradient(left, #151515, #444, #151515);

 top: 192px;

}

.webdesigntuts-workshop form {

 background: #111;

 background: -webkit-linear-gradient(#1b1b1b, #111);

 background: -moz-linear-gradient(#1b1b1b, #111);

 background: -o-linear-gradient(#1b1b1b, #111);

 background: -ms-linear-gradient(#1b1b1b, #111);

 background: linear-gradient(#1b1b1b, #111);

 border: 1px solid #000;

 border-radius: 5px;

 box-shadow: inset 0 0 0 1px #272727;

 display: inline-block;

 font-size: 0px;

        margin: -43px auto 0;

        padding: 20px;

 position: relative;

 z-index: 1;

}

.webdesigntuts-workshop input {

 background: #222;

 background: -webkit-linear-gradient(#333, #222); 

 background: -moz-linear-gradient(#333, #222); 

 background: -o-linear-gradient(#333, #222); 

 background: -ms-linear-gradient(#333, #222); 

 background: linear-gradient(#333, #222); 

 border: 1px solid #444;

 border-radius: 5px 0 0 5px;

 box-shadow: 0 2px 0 #000;

 color: #888;

 display: block;

 float: left;

 font-family: 'Cabin', helvetica, arial, sans-serif;

 font-size: 13px;

 font-weight: 400;

 height: 40px;

 margin: 0;

 padding: 0 10px;

 text-shadow: 0 -1px 0 #000;

 width: 200px;

}

.ie .webdesigntuts-workshop input {

 line-height: 40px;

}

.webdesigntuts-workshop input::-webkit-input-placeholder {

   color: #888;

}

.webdesigntuts-workshop input:-moz-placeholder {

   color: #888;

}

.webdesigntuts-workshop input:focus {

 -webkit-animation: glow 800ms ease-out infinite alternate;

 -moz-animation: glow 800ms ease-out infinite alternate;

 -o-animation: glow 800ms ease-out infinite alternate;

 -ms-animation: glow 800ms ease-out infinite alternate;

 animation: glow 800ms ease-out infinite alternate;

 background: #222922;

 background: -webkit-linear-gradient(#333933, #222922);

 background: -moz-linear-gradient(#333933, #222922);

 background: -o-linear-gradient(#333933, #222922);

 background: -ms-linear-gradient(#333933, #222922);

 background: linear-gradient(#333933, #222922);

 border-color: #393;

 box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

 color: #efe;

 outline: none;

}

.webdesigntuts-workshop input:focus::-webkit-input-placeholder { 

 color: #efe;

}

.webdesigntuts-workshop input:focus:-moz-placeholder {

 color: #efe;

}

.webdesigntuts-workshop button {

 background: #222;

 background: -webkit-linear-gradient(#333, #222);

 background: -moz-linear-gradient(#333, #222);

 background: -o-linear-gradient(#333, #222);

 background: -ms-linear-gradient(#333, #222);

 background: linear-gradient(#333, #222);

 -webkit-box-sizing: content-box;

 -moz-box-sizing: content-box;

 -o-box-sizing: content-box;

 -ms-box-sizing: content-box;

 box-sizing: content-box;

 border: 1px solid #444;

 border-left-color: #000;

 border-radius: 0 5px 5px 0;

 box-shadow: 0 2px 0 #000;

 color: #fff;

 display: block;

 float: left;

 font-family: 'Cabin', helvetica, arial, sans-serif;

 font-size: 13px;

 font-weight: 400;

 height: 40px;

 line-height: 40px;

 margin: 0;

 padding: 0;

 position: relative;

 text-shadow: 0 -1px 0 #000;

 width: 80px;

} 

.webdesigntuts-workshop button:hover,

.webdesigntuts-workshop button:focus {

 background: #292929;

 background: -webkit-linear-gradient(#393939, #292929); 

 background: -moz-linear-gradient(#393939, #292929); 

 background: -o-linear-gradient(#393939, #292929); 

 background: -ms-linear-gradient(#393939, #292929); 

 background: linear-gradient(#393939, #292929);

 color: #5f5;

 outline: none;

}

.webdesigntuts-workshop button:active {

 background: #292929;

 background: -webkit-linear-gradient(#393939, #292929);

 background: -moz-linear-gradient(#393939, #292929);

 background: -o-linear-gradient(#393939, #292929);

 background: -ms-linear-gradient(#393939, #292929);

 background: linear-gradient(#393939, #292929);

 box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;

 top: 1px;

}

@-webkit-keyframes glow {

    0% {

  border-color: #393;

  box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

    } 

    100% {

  border-color: #6f6;

  box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

    }

}

@-moz-keyframes glow {

    0% {

  border-color: #393;

  box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

    } 

    100% {

  border-color: #6f6;

  box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

    }

}

@-o-keyframes glow {

    0% {

  border-color: #393;

  box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

    } 

    100% {

  border-color: #6f6;

  box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

    }

}

@-ms-keyframes glow {

    0% {

  border-color: #393;

  box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

    } 

    100% {

  border-color: #6f6;

  box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

    }

}

@keyframes glow {

    0% {

  border-color: #393;

  box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;

    } 

    100% {

  border-color: #6f6;

  box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;

    }

}

</style>

<section class="webdesigntuts-workshop">

 <form action='/search' id='searchform' method='get'>

<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Αναζήτηση...&quot;;}' onfocus='if (this.value == &quot;Αναζήτηση...&quot;) {this.value = &quot;&quot;;}' type='text' value='Αναζήτηση...'/>

  <button>Search</button>

 </form>     

</section>

Αποθήκευση και είστε έτοιμοι.

Copyrights: http://www.bloggertipsandtricks.net

ΠΛΗΡΩΝΕΣΤΕ ΓΙΑ ΝΑ ΒΛΕΠΕΤΕ ΔΙΑΦΗΜΙΣΕΙΣ

2013-05-10T13:02:00.002+03:00

Ο πιο διαδεδομένος και εύκολος τρόπος για να κερδίσει κάποιος χρήματα απ το διαδίκτυο ειναι σερφάροντας σε PTC (PAID TO CLICK ) SITES και βλέποντας links από διαφημίσεις που υπάρχουν εκεί.
Πως λειτουργεί: Μπαίνετε σ ένα PTC site εγγράφεστε δωρεάν (2 λεπτά παίρνει το πολύ) κι έπειτα πατάτε για να δείτε τις διαφημίσεις(συνήθως γράφει view ads.earning area κλπ). H διαφήμιση πρέπει να μείνει ανοιχτή για περίπου 30 δευτ. και μετά πιστώνεται ο λογαριασμός σας συνήθως με 1 cent.Προσοχή τις διαφημίσεις θα τις ανοίγετε μία μία απο κάθε site. Nαι ξέρω δεν είναι τρομερό το ποσό εξάλλου είπαμε μακριά από σελίδες που υπόσχονται τεράστια κέρδη,αλλά είναι λογική αμοιβή για τόσο εύκολη δουλειά.
Μπορείς εύκολα να αυξήσεις τα κέρδη σου συστήνοντας τη σελίδα σε άλλους (refferals) μ ένα link που είναι μοναδικό για τον καθένα και πληρώνεσαι και για τις διαφημίσεις που βλέπουν και αυτοί χωρίς κόστος.
Όταν συμπληρώσεις ένα ποσό (συνήθως 2-3$) μπορείς να ζητήσεις να πληρωθείς. Η πληρωμή γίνεται μέσω PAYPAL , PAYZA , NETELLER ή μέσω τραπεζικής επιταγής.
Στο διαδίκτυο υπάρχουν εκατοντάδες PTC SITES όμως πολλά απ αυτά είναι τα λεγόμενα scam sites δηλ είναι αναξιόπιστα, δεν πληρώνουν ή κλείνουν σε πολύ σύντομο χρονικό διάστημα.Λίστα με scam sites μπορείτε να δείτε εδώ
Τα sites που αναφέρονται παρακάτω αποδεδειγμένα πληρώνουν ,ειναι αξιόπιστα και αρκετό καιρό σε λειτουργία.Η λίστα θα ανανεώνεται και με δικες σας προτάσεις αφού πρωτα δοκιμαστούν.Επίσης αν κάποιο site αποδειχθεί προβληματικό θα αφαιρείται απ τη λίστα.
Αξίζει να ασχοληθεί κάποιος και πόσο ασφαλές είναι?
Φυσικά απ τη στιγμή που δεν κάνεις τίποτε άλλο απ την καθημερινή σου ασχολία. Δεν κερδίζεις πολλά αλλά ενα ικανοποιητικό ποσό βγάζεις και τίποτα δεν είναι αμελητέο πλέον αυτόν τον καιρό. Δεν τίθεται καν θέμα ασφάλειας αφού δε χρειάζεται να επενδύσουμε χρήματα οπότε ότι βγάλουμε κέρδος είναι.
Μην παραλείψουμε ν αναφέρουμε ότι είναι και πολύ καλός τρόπος να διαφημίσουμε εμείς την επιχείρηση μας ή την ιστοσελίδα μας κάπου που θα τη δουν χιλιάδες αναγνώστες εγγυημένα.
Συμπέρασμα. Είναι απ τις καλύτερες λύσεις για να βγάλεις χρήματα απ το ΙΝΤΕΡΝΕΤ προτείνεται ανεπιφύλαχτα.

To LINKGRAND είναι κορυφαίο και απ τα πιο παλιά PTC SITES, με άμεσες πληρωμές μέσω PAYPAL και οικονομική αναβάθμιση μέλους ( μόλις 10,00$ για 2 χρόνια) με ελάχιστο όριο πληρωμής 5,00$. Έχω πληρωθεί 4 φορές.