Blogger Tips – Tricks – Gadgets – Templates – Hacks

Αυτόματος εντοπισμός της εικόνας ανάρτησης κατά το share στο facebook



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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




Αναρωτηθείτε μισό λεπτό, πόσες φορές θελήσατε να ποστάρετε κάτι στο facebook και σας έβγαζε μια “άκυρη” σε σχέση με το θέμα σας φωτογραφία;



Αυτό που θα προσπαθήσουμε να κάνουμε σήμερα είναι να θέσουμε μια συγκεκριμένη εικόνα η οποία θα εμφανίζεται όταν κάποιος ποστάρει στο facebook κάτι (δηλαδή κάποιο link) που οδηγεί στη σελίδα σας. Και αυτό θα το πετύχουμε με τα meta tags, για τα οποία έχουμε μιλήσει παλαιότερα.



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



Λοιπόν, η διαδικασία είναι σχετικά απλή και γρήγορη:



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

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

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


<b:if cond=’data:blog.postImageThumbnailUrl’>

<meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>

<b:else/>

<meta content=’http://www.yooter.com/images/pagenotfound.jpg‘ property=’og:image’/>

</b:if>



Μπορείτε να αλλάξετε την εικόνα που έχω σε επισημάνει με αυτόν τον τρόπο –>τρόπος<– με κάποια της επιλογής σας (είναι η προ-επιλεγμένη εικόνα που θα εμφανίζεται όταν δεν έχετε προσθέσει εικόνα στην ανάρτησή σας).



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



Πηγή

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




Post by Secra from Web Reviews




Το BloggerTips πρώτο ανακοινώνει την υποψία του για εισαγωγή Reply Button στα σχόλια του Blogger



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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




Πώς θα σας φαινόταν να έχετε τη δυνατότητα απάντησης στα σχόλια του blogger;



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



Έχουμε να κάνουμε λοιπόν με το παρακάτω κομμάτι κώδικα…

.comments .comments-content .comment-replies {

margin-top: 1em;

margin-left: 36px;

}

.comments .comments-content .comment:first-child {

padding-top:16px;

}

.comments .comments-content .comment:last-child {

border-bottom:0;

padding-bottom:0;

}

.comments .comments-content .comment-body {

position:relative;

}

.comments .comments-replybox {

border: none;

height: 250px;

width: 100%;

}

.comments .comment-replybox-single {

margin-top: 5px;

margin-left: 48px;

}

.comments .comment-replybox-thread {

margin-top: 5px;

}

.comments .comments-content .loadmore a {

display: block;

padding: 10px 16px;

text-align: center;

}

…το οποίο, αν προσέξουμε τις ονομασίες των στοιχείων που έχουμε υπογραμμισμένα, μας προετοιμάζει για την επίσημη εισαγωγή του reply button σε όλα τα πρότυπα του blogger (σημ.: το παραπάνω κομμάτι κώδικα το εντοπίσαμε εμείς σε πολύ πρόσφατα δημιουργημένο blogger blog), με δυνατότητα μαρκαρίσματος κάθε σχολίου που απαντάται, φυσικά.



Δεν έχει ανακοινωθεί το παραμικρό από μεριάς Blogger προς το παρόν και για αυτό αναφερόμαστε στο γεγονός ως κάτι αποκλειστικό. Το μόνο που έχουμε είναι ενδείξεις (που μας κάνουν να είμαστε σίγουροι σε μεγάλο ποσοστό, παρ ‘όλα αυτά, για ό,τι υποστηρίζουμε).



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



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



Πώς θα σας φαινόταν αλήθεια ένα reply button για τα σχόλια στο blogger;



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




Χριστουγεννιάτικο εφέ για το blog σας (Christmas effect for your blog)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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




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



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



Πάμε να το προσθέσουμε:



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

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

3. Ψάχνουμε το </body> και το αντικαθιστούμε με τον παρακάτω κώδικα:

<div style="width:100%;height:69px; background: url(http://4.bp.blogspot.com/-EKSqIQidsHs/TuJQ5lrMcnI/AAAAAAAAAGs/QDEmMdVS0rg/s1600/lights12.gif);position:fixed;top:-40px;left:0;z-index:99"></div>

</body>

4. Αυτό ήταν! Πατάμε αποθήκευση και βλέπουμε το αποτέλεσμα!



Μείνετε συντονισμένοι στο bloggertips.gr για να μη χάσετε τα χριστουγεννιάτικα εφέ που θα ακολουθήσουν πολύ σύντομα!



Copyrigths: http://www.bloggertips.gr/




Πώς να γράψεις μια καλή ανάρτηση (How to write good posts)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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




Σήμερα θα ασχοληθούμε με ένα θέμα που πιστεύω πως απασχολεί τους περισσότερους (αν όχι όλους τους) blogger και αυτό είναι η συγγραφή καλών άρθρων στα blog μας.



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


Σύντομοι και ελκυστικοί τίτλοι

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


Εικόνες

Πόσο εύκολο είναι για κάποιον να διαβάσει ένα κείμενο στο οποίο απουσιάζουν οι εικόνες σε σύγκριση με ένα κείμενο που περιέχει εικόνες; Οι εικόνες προσδίδουν στο κείμενο μια ζωντάνια η οποία το κάνει ευχάριστο στο μάτι του αναγνώστη και τον ενθαρρύνει να συνεχίσει την ανάγνωση. Ανάλογα με το μήκος της ανάρτησης χρησιμοποιείτε και τον κατάλληλο αριθμό εικόνων. Κινηθείτε κάπου στη μέση, μην αφήσετε τα άρθρα σας εντελώς “γυμνά” από φωτογραφίες, αλλά να μην προβείτε και σε υπερβολές!


Παράγραφοι

Άλλος ένας σημαντικός παράγοντας που κάνει κάθε ανάρτηση πιο ευανάγνωστη είναι η χρήση παραγράφων. Από μικροί έχουμε μάθει στο σχολείο πως “η παράγραφος είναι το αυτοτελές κείμενο που διαθέτει ενότητα νοηματικά και συνδέεται στενά με το συνολικό κείμενο”. Η εικόνα ενός κατεβατού κειμένου αποθαρρύνει το μέσο χρήστη ο οποίος, αν κρίνω και από τον εαυτό μου, δε θα κάτσει να παιδευτεί, απλά θα πατήσει το κουμπάκι “Χ“.


Φυσιολογικό μέγεθος γραμματοσειράς

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


Χαιρετισμός – Φιλικό ύφος

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


Τεράστιες αναρτήσεις

Πρέπει να τις αποφύγετε! Δε χρειάζεται να γράφετε τεράστιες αναρτήσεις. Όχι επειδή θα κουραστείτε, αλλά επειδή απλά είναι πολύ πιθανό να μη διαβαστούν ποτέ (ολόκληρες, τουλάχιστον)! Μπείτε στη θέση του αναγνώστη και αναρωτηθείτε αν θα καθόσασταν να διαβάσετε μια ανάρτηση-βιβλίο σχετικά με κάποιο θέμα. Αν εν πάση περιπτώσει έχετε τη διάθεση να μοιραστείτε τεράστιους όγκους πληροφοριών με το κοινό σας, μοιραστείτε τις σιγά-σιγά, χωρίζοντας το θέμα σας σε μικρότερες, πιο σύντομες αναρτήσεις. Αυτό βοηθάει γιατί 1) οι αναγνώστες βλέπουν πως το blog σας ανανεώνεται συχνά και 2) τα μικρά post είναι, όπως αναφέραμε προηγούμενα, πιο ελκυστικά.


Μην ξεφύγετε από το θέμα

Έχει τύχει πολλές φορές (και τη στιγμή που γράφω αυτό το κείμενο ακόμη το παλεύω) να παρασυρθώ από αυτό που θέλω πραγματικά να γράψω και να καταλήγω στο να γράφω… άλλα ντ ‘άλλων! Προσπαθήστε να παραμένετε συγκεντρωμένοι στο θέμα για το οποίο θέλετε να γράψετε και να μην επηρεάζεστε από άλλα θέματα που μπορεί να σας κινήσουν το ενδιαφέρον κατά τη διάρκεια της συγγραφής. Ανοίξτε έναν επεξεργαστή κειμένου σε πλήρη οθόνη και παραμείνετε σε αυτόν μέχρι να τελειώσετε το κείμενό σας. Σε αντίθετη περίπτωση, οι αναγνώστες θα μπερδευτούν αφού θα διαβάσουν για δέκα ή περισσότερα πράγματα σε μία ανάρτηση και θα έχουν χάσει τελικά το νόημα. Το κυριότερο: Δεν τους έχετε περάσει το μήνυμα που θέλετε, άρα ο σκοπός της ανάρτησης προφανώς και απέτυχε.


Σύνδεσμοι (links)

Last but not least όπως λένε και οι (φίλοι μας οι) Άγγλοι… Προσπαθήστε να κάνετε τα κείμενα που γράφετε να αλληλεπιδρούν μεταξύ τους συνδέοντάς τα μεταξύ τους με συνδέσμους (links). Αυτό θα βοηθήσει τη σελίδα σας τόσο από άποψη επισκεψιμότητας, μιας που οι αναγνώστες θα μεταπηδούν από το ένα άρθρο στο άλλο, όσο και από άποψη SEO (προσαρμογή της σελίδας σας στις μηχανές αναζήτησης). Για ακόμη μια φορά πρέπει όμως να προσέξουμε να μην το παρακάνουμε (θυμηθείτε πως πίσω από τον υπολογιστή είναι κάποιος άλλος άνθρωπος και όχι ένα ρομπότ).



Οι παραπάνω είναι οι προτάσεις/συμβουλές μου για το πώς να γράφετε καλά, ποιοτικά άρθρα στα blog σας. Όπως τόνισα στην αρχή είναι καθαρά υποκειμενικές απόψεις και περιμένω τα σχόλιά σας πάνω στο θέμα.

Τι προσέχετε εσείς όταν γράφετε και τι συμβουλές θα δίνατε σε μένα και στους υπόλοιπους blogger για τη βελτίωση των άρθρων μας;



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



Post by Secra from Web Reviews




Αυτόματη ροή των αναρτήσεών μας στο Facebook (Automatic RSS Feed on Facebook)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα, σήμερα θα σας δείξω πως μπορείτε να βάλετε αυτόματη ροή των νέων σαν αναρτήσεων στο Facebook.

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



Ας ξεκινήσουμε:

Βήμα 1ο: Πάμε εδώ και πατάμε στο κουτάκι “Click Here to authohorize Rss Graffiti”.

Βήμα 2ο: Κάνουμε αποδοχή της εφαρμογής “Allow”.

Βήμα 3ο: Βρίσκουμε την ομάδα ή το προφίλ μας που θέλουμε να βάλουμε την αυτόματη ροή στο αριστερό μας χέρι και πατάμε “Click to autohorize” και κάνουμε πάλι αποδοχή “Allow”.




Βήμα 4ο: Προσθέτουμε το blog μας και πατάμε “+Add Feed”.

Βήμα 5ο: Κάνουμε τις ρυθμίσεις σύμφωνα με την εικόνα παρακάτω.



Δείτε το Video!







Post by Facebookaras



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




Blogger Dynamic Views (τι είναι, πως τα εφαρμόζω, θετικά-αρνητικά)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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



Σήμερα θα μιλήσουμε για τη νέα λειτουργία του blogger η οποία έγινε διαθέσιμη σε όλους πριν από μερικές ημέρες (28/9/2011 για την ακρίβεια), τα Dynamic Views.







Τι είναι λοιπόν τα Dynamic Views και πώς μπορούμε να τα εφαρμόσουμε;



Τα Dynamic Views είναι ένας νέος τρόπος προβολής των blog μας. Περιλαμβάνει επτά νέους τρόπους προβολής των blog μας: Classic, Mosaic, Sidebar, Flipcard, Snapshot, Timeslide και Magazine (δείτε την παρακάτω εικόνα για να πάρετε μια ιδέα από το καθένα!).

Όπως μπορείτε να δείτε από την παραπάνω εικόνα, κάθε τρόπος προβολής (πχ Classic, Mosaic) διαφέρει αρκετά από τους υπόλοιπους.



Για να εφαρμόσετε κάποιο από τα παραπάνω στο blog σας, ακολουθήστε την παρακάτω διαδικασία:



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

2. “Δοκιμάστε την ενημερωμένη διεπαφή του Blogger” (προαιρετικά)

3. “Πρότυπο”

4. “Προσαρμογή”

5. “Dynamic Views” και επιλέγετε ένα από τα επτά διαθέσιμα πρότυπα

6. “Εφαρμογή στο ιστολόγιο” και “Προβολή ιστολογίου” για να δείτε το αποτέλεσμα!



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



Πάμε να δούμε τι μας άρεσε και τι δε μας άρεσε συνοπτικά:



Μας άρεσε:

-Το απλό, καθαρό και όμορφο design των νέων προτύπων.

γρήγορη φόρτωση των σελίδων (αποτέλεσμα του από πάνω).

διαδραστικότητα των νέων προτύπων.

-Τα έτοιμα +1, Tweet και Like buttons που προσφέρονται από μόνα τους σε κάθε πρότυπο.

-Η φόρτωση πολλών post στην αρχική σελίδα, κάτι που δεν απαιτεί χρόνο, αφού οι αναρτήσεις που είναι παρακάτω φορτώνουν με το scrollάρισμα προς τα κάτω.

-Η δυνατότητα που έχουν οι επισκέπτες να προβάλλουν το blog σας με επτά τρόπους, ανεξάρτητα με το ποιον από τους επτά έχετε προ-επιλέξει εσείς.



Δε μας άρεσε:

-Το γεγονός πως δε μπορούμε να προσαρμόσουμε (προς το παρόν τουλάχιστον, δεν ξέρουμε αν θα υπάρξει τέτοια δυνατότητα στο μέλλον) το blog μας όπως θέλουμε εμείς.

Δεν έχουμε πρόσβαση στην HTML.

Δεν μπορούμε να προσθέσουμε δικά μας gadget.

-Η λειτουργία Dynamic Views δεν είναι διαθέσιμη για όλα τα blogs! Δε φταίει το πρότυπο που έχετε, καθώς σε δύο ολόιδια blogs που δοκίμασα να εφαρμόσω τα Dynamic Views, στο ένα εφαρμόστηκε ενώ στο άλλο όχι! Ίσως είναι θέμα χρόνου, θα δείξει…

-Αν και βελτιώθηκαν κάπως τα σχόλια, ακόμα δεν έχουμε τη δυνατότητα απάντησης (reply) προς τους σχολιαστές.



(Επίσης πρέπει να γνωρίζετε πως αν έχετε επιλέξει να βλέπετε το blog μόνο εσείς, να μην είναι δηλαδή ορατό σε οποιονδήποτε, τότε δε θα μπορείτε πάλι να εφαρμόσετε τα Dynamic Views!)



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



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



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



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

Post by Secra from WebRev.gr




Πώς να προσθέσετε περισσότερες από 20 στατικές σελίδες στο blog σας (How to add more than 20 static pages on your blog)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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




Σήμερα θα δούμε πώς μπορούμε να δημοσιεύσουμε στο blog μας περισσότερες από 20 στατικές σελίδες (το 20 είναι το ανώτατο όριο, ενώ πριν λίγο καιρό ίσχυε το όριο των 10).



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



Οπότε έκατσα και σας ετοίμασα ένα βίντεο στο οποίο φαίνεται καθαρά η όλη διαδικασία και τα βήματα που ακολουθούμε για να “ξεγελάσουμε” (;) το blogger και να δημοσιεύσουμε περισσότερες από 20 στατικές σελίδες.



Μερικά πράγματα που θα χρειαστεί να γνωρίζετε ή να κάνετε πριν δείτε το βίντεο:



-Χρειάζεται να έχετε ανοιχτό κάποιον κειμενογράφο, π.χ. notepad ή wordpad (εγώ χρησιμοποιώ αυτό).

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

-Πρέπει να έχετε ήδη δημοσιεύσει 20 σελίδες στο blog σας (δε χρειάζεται να φαίνονται στην αρχική σελίδα, αλλά πρέπει να είναι σίγουρα δημοσιευμένες).



Δείτε το βίντεο:

(1. Η μουσική είναι απλά για ψυχαγωγία, εγώ δε λέω κάτι στο βίντεο οπότε αν σας ενοχλεί απενεργοποιήστε τον ήχο από τον player.

2. Το βίντεο φαίνεται καλύτερα σε 720p και πλήρη οθόνη [fullscreen].)



Πώς σας φάνηκε;



Παρακαλώ σεβαστείτε τον κόπο μου για τη δημιουργία του βίντεο, και κατά συνέπεια τα copyrights της ανάρτησης.



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

Post by Secra from WebRev.gr




Αλλαγή του προτύπου του blog για κινητά (How to change blogger mobile template)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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



Σήμερα θα δούμε πως μπορούμε να αλλάξουμε το πρότυπο του blog μας για τα κινητά τηλέφωνα.

Μέσα στις μεγάλες αλλαγές που πραγματοποιήθηκαν στο blogger μέσα στο 2011 (η σημαντικότερη εκ των οποίων είναι η αλλαγή στο περιβάλλον του), συμπεριλαμβάνεται και η δυνατότητα που μας δόθηκε να επιλέξουμε ανάμεσα σε 27 έτοιμα πρότυπα ώστε να βελτιώσουμε τον τρόπο με τον οποίο βλέπουμε το blog μας από τα κινητά.



Πάμε να δούμε τι πρέπει να κάνουμε:



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

2. Επιλέγουμε “Δοκιμάστε την ενημερωμένη διεπαφή του Blogger“, επιλογή η οποία βρίσκεται στο πάνω μέρος της αρχικής σελίδας του blogger.

3. Επιλέγουμε το blog στο οποίο θέλουμε να κάνουμε αλλαγές.

4. Πατάμε κλικ στο “Πρότυπο“, από τη λίστα στα αριστερά.



Έχει δύο επιλογές: “Ζωντανά στο ιστολόγιο” και “Κινητό“, εμάς προφανώς μας ενδιαφέρει η δεύτερη επιλογή, οπότε κάνουμε κλικ στο κουμπί που έχει από κάτω που μοιάζει με γρανάζι.



5. Στο παράθυρο που θα εμφανιστεί επιλέγουμε “Ναι. Εμφάνιση προτύπων για κινητά σε κινητές συσκευές“.



6. Λίγο πιο κάτω λέει “Επιλογή προτύπου για κινητά” και έχει ένα μενού, από το οποίο μπορούμε να διαλέξουμε τον “τύπο” του προτύπου, π.χ. “Υδατογράφημα” και δεξιά, με τα βελάκια, μπορούμε να αλλάξουμε το χρώμα και το φόντο του κάθε προτύπου (υπενθυμίζω πως δε μπορούμε να βάλουμε δικά μας, έχει προεπιλεγμένα πρότυπα!).



Όταν καταλήξουμε σε αυτό που θέλουμε, πατάμε “Αποθήκευση “και τελειώσαμε! Εύκολο, έτσι;



~

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

~



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



Post by Secra from Web in Greece




Το νέο περιβάλλον του Blogger (Blogger’s new User Interface)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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

Εδώ και δύο περίπου μήνες η Google ανακοίνωσε πως το νέο περιβάλλον (User Interface ή ‘UI’) του blogger είναι διαθέσιμο για όλους τους χρήστες του Blogger in Draft.



Με επίσημη ανακοίνωση της ίδιας της Google στις 31/8/2011 έγινε γνωστό πως το νέο UI είναι διαθέσιμο προς όλους τους χρήστες του blogger και είναι πολύ εύκολο να ενεργοποιηθεί, απλά κάνοντας κλικ στην επιλογή “Δοκιμάστε την ενημερωμένη διεπαφή του Blogger” στην αρχική σελίδα του blogger.




Οι υπεύθυνοι της Google για το blogger έκαναν πράγματι πολύ καλή και προσεγμένη δουλειά, αξιοποιώντας με το σωστό τρόπο τα σχόλια (Feedback) των χρηστών και των αναγνωστών των υπηρεσιών τους.



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



Πρόσβαση στις αναρτήσεις σας με ένα κλικ από όπου κι αν βρίσκεστε



Σε οποιοδήποτε σημείο του Πίνακα Ελέγχου κι αν βρίσκεστε, τρία είναι τα “μέρη” στα οποία μπορείτε να μεταφερθείτε ανά πάσα στιγμή κάνοντας κλικ στο ανάλογο κουμπί από τα τρία κουμπιά που βρίσκονται πάνω αριστερά στην οθόνη:

1) Η αρχική σελίδα του blogger, όπου μπορείτε να διαχειριστείτε τα ιστολόγιά σας, 2) η σελίδα όπου γράφετε μια νέα ανάρτηση και 3) η σελίδα όπου μπορείτε να προβάλετε και να επεξεργαστείτε όλες τις αναρτήσεις σας.




Καλύτερη προβολή και διαχείριση των στατιστικών του ιστολογίου σας



Από την “Επισκόπηση” του νέου περιβάλλοντος μπορείτε να παρακολουθείτε στατιστικά για το blog σας με μια γρήγορη ματιά, όπως στατιστικά σχετικά με την επισκεψιμότητα, τα σχόλια, τους αναγνώστες κ.ά.

Επιπλέον υπάρχει μια λίστα με χρήσιμα βοηθήματα για να προσαρμοστείτε στο νέο περιβάλλον.

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




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



Το νέο περιβάλλον του blogger είναι διαθέσιμο προς όλους τους χρήστες από τις 31/8/2011 σύμφωνα με ανακοίνωση της google.





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

Πηγή: Οι εικόνες ανήκουν στο http://buzz.blogger.com/




Post by Secra from Web in Greece




Print Friendly & PDF Button for your blogger posts



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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

Σήμερα θα δούμε ένα ακόμη ενδιαφέρον tip, το “Print Friendly & PDF Button“, μέσω του οποίου οι αναγνώστες σας θα μπορούν να εκτυπώνουν τις αναρτήσεις σας ή να τις κατεβάζουν στον υπολογιστή τους σε μορφή pdf.



Διαδικασία:



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

2. Σχεδίαση

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

4. Επέκταση προτύπων γραφικών στοιχείων

5. Με “Ctrl + F” αναζητούμε το “<div class=’post-footer’>” (αν εμφανίζει δυο αποτελέσματα, μας ενδιαφέρει το πρώτο) και αμέσως μετά από αυτό επικολλούμε τον παρακάτω κώδικα:


<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’>

<a class=’printfriendly’ expr:href=’data:post.url + "?pfstyle=wp"’ style=’ color:#6D9F00; text-decoration:none;’ title=’Printer Friendly and PDF’>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-print-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>Print</span>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-pdf-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>PDF</span></a><b:else/>

<script src=’http://cdn.printfriendly.com/printfriendly.js’ type=’text/javascript’/>

<a class=’printfriendly’ href=’http://www.printfriendly.com’ onclick=’window.print(); return false;’ style=’ color:#6D9F00; text-decoration:none;’ title=’Printer Friendly and PDF’>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-print-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>Print</span>

<img alt=’Print Friendly and PDF’ src=’http://cdn.printfriendly.com/pf-pdf-icon.gif’ style=’border:none;’/>

<span style=’font-size:16px; margin:0 8px 0 3px;’>PDF</span></a></b:if>

</b:if>



(Αν αφήσετε τον κώδικα όπως είναι, τα κουμπιά δε θα εμφανίζονται στην αρχική σελίδα αλλά μόνο στις σελίδες των αναρτήσεων. Αν θέλετε τα κουμπιά να εμφανίζονται και στην αρχική σελίδα, σβήνετε τις 2 σειρές που επισήμανα με έντονη γραφή -bold-)



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



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



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

Παρακάτω θα σας δώσω 3 κουμπιά και διαλέγετε όποιο θέλετε. Κάθε κουμπί συνοδεύεται από τον κώδικά του και για να το προσθέσετε απλά βάζετε τον κώδικά του αντί του κώδικα που σας έδωσα στο βήμα 5!





Κώδικας:

<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’><a expr:href=’data:post.url + "?pfstyle=wp"’ style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print Friendly and PDF"/></a></b:if>

</b:if>





Κώδικας:

<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’><a expr:href=’data:post.url + "?pfstyle=wp"’ style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/button-print-grnw20.png" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/button-print-grnw20.png" alt="Print Friendly and PDF"/></a></b:if>

</b:if>





Κώδικας:

<b:if cond=’data:blog.pageType == "item"’>

<b:if cond=’data:blog.pageType == "index"’><a expr:href=’data:post.url + "?pfstyle=wp"’ style=" color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf_button_sq_grn_l.png" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/pf_button_sq_grn_l.png" alt="Print Friendly and PDF"/></a></b:if>

</b:if>



Πηγή: Οι κωδικοί είναι από το: http://www.printfriendly.com/button

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




Post by Secra from Web in Greece




Προσθήκη τίτλου ανάρτησης δίπλα στο ‘Read More’!



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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




Έχουν γραφτεί κατά καιρούς αναρτήσεις [1, 2, 3] που έχουν να κάνουν με το “read more”, δηλαδή τη δυνατότητα που έχουμε να “κόβουμε” τις αναρτήσεις της αρχικής σελίδας, έτσι ώστε να μην πιάνουν τόσο χώρο και να μην αργεί η φόρτωση της σελίδας μας.



Συνήθως, στην αρχική σελίδα, έχουμε μια μικρή περίληψη της ανάρτησης και από κάτω ένα link που λέει κάτι σαν “Συνέχεια του άρθρου”, “Διαβάστε περισσότερα” κ.ο.κ.



Σήμερα θα δούμε πως, μαζί με το “Διαβάστε περισσότερα”, θα εμφανίζεται δίπλα και ο τίτλος της κάθε ανάρτησης. (DEMO)



Διαδικασία:



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

2. Σχεδίαση

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

4. Επέκταση προτύπων γραφικών στοιχείων

5. Πατώντας Ctrl + F αναζητούμε τον παρακάτω κώδικα…

<b:if cond=’data:post.hasJumpLink’>

<div class=’jump-link’>

<a expr:href=’data:post.url + "#more"’ expr:title=’data:post.title’><data:post.jumpText/></a>

</div>

</b:if>

… και τον αντικαθιστούμε με τον παρακάτω:

<b:if cond=’data:post.hasJumpLink’>

<div class=’jump-link’>

<a expr:href=’data:post.url + "#more"’ expr:title=’data:post.title’><data:post.jumpText/> <data:post.title /></a>

</div>

</b:if>



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



6. Πατήστε “Προεπισκόπηση” και αν είναι όλα καλά αποθηκεύετε το πρότυπό σας.



Αυτό ήταν όλο!



Πηγή: http://www.bloggerbuster.com/2011/04/how-to-add-post-titles-to-read-more.html

Copyrigths: http://www.bloggertips.gr/




Post by Secra from Web in Greece




Δημιουργία και προσθήκη φόρμας επικοινωνίας (contact form) στο blog σας βήμα-βήμα



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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

Σήμερα θα δούμε πως μπορείτε να δημιουργήσετε και να προσθέσετε μια φόρμα επικοινωνίας (contact form) στο blog σας.



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

Εμείς θα χρησιμοποιήσουμε τη σελίδα emailmeform.com, η οποία είναι μία από τις καλύτερες, πλην δυσκολότερες στο είδος της.

Ένα παράδειγμα για το πως θα δείχνει η φόρμα επικοινωνίας που θα προσθέσετε μπορείτε να δείτε στο Web in Greece, blog παρουσιάσεων ιστοσελίδων (ανοίγει σε νέα καρτέλα!).


Δημιουργία Φόρμας Επικοινωνίας:



1. Μπαίνουμε στην αρχική σελίδα του EmailMeForm.

Πρέπει να κάνουμε εγγραφή για να συνεχίσουμε, οπότε κάνουμε κλικ στο:



2. Στη σελίδα που θα μας εμφανιστεί, συμπληρώνουμε τα στοιχεία που ζητάει και κάνουμε κλικ στο “I agree to EmailMeForm Terms of Service”.




3. Αφού κάνουμε τα παραπάνω, κάνουμε κλικ στο:



4. Λογικά θα μας εμφανιστεί η παρακάτω σελίδα, η οποία μας ευχαριστεί και μας λέει να τσεκάρουμε το e-mail μας για να ενεργοποιήσουμε το λογαριασμό μας.




5. Συνδεόμαστε στο e-mail μας, ανοίγουμε το μήνυμα από το EmailMeForm (ψάξτε στα ανεπιθύμητα/spam αν δεν το δείτε στα εισερχόμενα) και κάνουμε κλικ στο μοναδικό link που περιέχεται στο μήνυμα, το οποίο θα μοιάζει με αυτό:

http://www.emailmeform.com/builder/account/signup_confirm/1fd9FiR7heLaopk6bZDY93raySE73n4Wc



6. Αφού κάνουμε κλικ στο link που είπαμε παραπάνω, η σελίδα που θα εμφανιστεί μας λέει πως έγινε η ενεργοποίηση του λογαριασμού μας. Επιπλέον, στο μήνυμα που θα εμφανιστεί λέει “Please click here to go into your Form Manager”. Κάνουμε κλικ στο “here” και συνεχίζουμε.




7. Στη σελίδα που θα εμφανιστεί, κάνουμε κλικ στο: και στη συνέχεια κάνουμε κλικ στην πρώτη επιλογή “Go to the Template section. I’d like to choose from a list of pre-made forms” για να διαλέξουμε μια φόρμα από τις ήδη υπάρχουσες.



8. Από το μενού αριστερά, φροντίζουμε να είναι επιλεγμένο το “Contact Form” και πατάμε:




9. Λογικά εμφανίζεται το παρακάτω παράθυρο:




10. Ήρθε η ώρα να προσαρμόσουμε τη φόρμα επικοινωνίας στα δεδομένα μας:



Είμαστε στο Form Settings και επεξεργαζόμαστε την αριστερή στήλη:



Form Title: Ο τίτλος, το όνομα της φόρμας μας. Μπορείτε π.χ. να την ονομάσετε “Επικοινωνία”, “Contact” ή ό,τι άλλο θέλετε. Αν δε θέλετε να εμφανίζεται τίτλος, απλά “ξετικάρετε” το “show on form”.

Description: Μια περιγραφή για τη φόρμα σας όπως “Συμπληρώστε τα παρακάτω πεδία για να έρθετε σε επαφή μαζί μου” κ.ο.κ. Αν δε θέλετε να προσθέσετε περιγραφή, αφήνετε το πεδίο κενό.

Time Zone: Είναι η ζώνη ώρας (για να βλέπετε τη σωστή ώρα όταν έρχεται κάποιο e-mail). Επιλέγετε το “(+2:00) Eastern Europe, Harare,… κλπ”. Αν ζείτε σε κάποια άλλη χώρα επιλέγετε την κατάλληλη ζώνη ώρας.

Confirmation Options: Αυτό είναι το τι θα εμφανιστεί σε αυτόν που θα επικοινωνήσει μαζί σας αφού στείλει το μήνυμα που θέλει. Αν επιλέξετε “Show Text”, πατάτε “Edit Text” και μπορείτε να γράψετε κάτι σαν “Ευχαριστώ που επικοινώνησες μαζί μου”. Αν επιλέξετε “Redirect URL”, όταν κάποιος σας στέλνει μήνυμα, μετά θα οδηγείται στη διεύθυνση που θέτετε εσείς (μπορείτε να βάλετε την αρχική σελίδα του blog σας).

Label Placement: Είναι η στοίχιση των τίτλων των πεδίων σε σχέση με τα πεδία. Αν το αφήσετε όπως είναι προεπιλεγμένο, εμφανίζει τον τίτλο του πεδίου και από κάτω το πεδίο. Αν επιλέξετε “Left Aligned”, θα εμφανίζεται δίπλα στο πεδίο ο τίτλος του στοιχισμένος αριστερά, ενώ αν επιλέξετε “Right Aligned”, θα εμφανίζεται δίπλα στο πεδίο ο τίτλος του στοιχισμένος δεξιά.

Styling Options: Από εδώ αλλάζουμε γραμματοσειρά, χρώματα (καλύτερα να μην πειράξουμε τα υπόλοιπα).

Form Width: Το πλάτος της φόρμας, καλύτερα να το αφήσουμε και αυτό κενό.

Send Button Name: Το όνομα του πλήκτρου που θα πατάνε οι αναγνώστες για να επικοινωνήσουν μαζί μας. Παραδείγματα: Send, Submit, Αποστολή, Υποβολή κ.ά.

Send Button alignment: Που θέλετε να εμφανίζετε το “Send Button”; Αριστερά (left), στη μέση (middle) ή δεξιά (right);

Anti Spam: Αν είστε ένα αρκετά δημοφιλές blog, συστήνω να επιλέξετε το “Show CAPTCHA Image Verification” ή “Show reCAPTCHA Verification” (καλύτερα το δεύτερο) για να αποφύγετε τα ανεπιθύμητα email (spam emails). Από την άλλη, αν δεν είστε ιδιαίτερα γνωστός/γνωστή στο χώρο του blogging, επιλέγετε “None” (αν παρατηρήσετε πως γεμίζετε spam emails, έχετε τη δυνατότητα να αλλάξετε τη ρύθμιση αργότερα).





Τελειώσαμε με το “Form Settings”, πάμε τώρα στο “Field Settings”, όπου, για να επεξεργαστούμε ένα πεδίο, κάνουμε απλά ένα αριστερό κλικ πάνω του. Οι ρυθμίσεις για τα πεδία είναι, σε γενικές γραμμές, οι ίδιες:




Field Label: Το όνομα του πεδίου.

Options: Επιλέξτε “Required” αν θέλετε να συμπληρωθεί οπωσδήποτε το πεδίο (θα εμφανιστεί και ένας αστερίσκος δίπλα του), ενώ το “Mask Field” είναι για να μην έχετε τη δυνατότητα να βλέπετε αυτό που πληκτρολόγησε αυτός που επικοινώνησε μαζί σας (συνιστάται πάντως να μην το επιλέγετε).

Show Field to: Everyone!

Cell Align: Η στοίχιση του πεδίου. Αριστερή (left), κέντρο (center) ή δεξιά (right).

Field Size: Το μέγεθος του πεδίου. Το 30 είναι μια καλή τιμή για τα πεδία “Name, Subject, Email” αλλά όχι και για το “Message”, για το οποίο υπάρχει έτοιμη, προεπιλεγμένη ρύθμιση.

Range: Από εδώ επιλέγετε να θέσετε περιορισμό για το πόσους χαρακτήρες (characters) ή πόσες λέξεις (words) θα “χωράει” το κάθε πεδίο.

Default Value: Είναι το προεπιλεγμένο κείμενο που θα έχει κάθε πεδίο, π.χ. μπορείτε να δώσετε στο πεδίο “Message” το κείμενο “εδώ γράφετε το κείμενό σας…”.

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



11. Μετά απ ‘όλα αυτά, πατάμε το κουμπί “Save Form” στον πάτο της φόρμας και στη συνέχεια επιλέγουμε το “Modify email notifications for this form”.



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




Αν θέλετε να μη βλέπετε μεγάλες ή μικρές γραμματοσειρές, χρώματα, εικόνες κ.λπ., επιλέγετε “Send Emails in Plain Text” (τα emails θα σας έρχονται με μορφή HTML).



Recipients Emails: Μπορείτε να προσθέσετε έως 10 διευθύνσεις email στις οποίες θα λαμβάνετε τα μηνύματα μέσω της φόρμας.

Message From: Εδώ επιλέγετε από ποιον θα θέλατε να λαμβάνετε τα email, από το EmailMeForm ή από τις πραγματικές διευθύνσεις των αποστολέων; Αν θέλετε το πρώτο, επιλέγετε το “EmailMeForm Website”, ενώ για τη δεύτερη περίπτωση, επιλέγετε το “Retrieve Name from field x and Email from field y”. Αντικαθιστάτε τα x και y με το πεδίο “Όνομα” και “Email” αντίστοιχα (αν δεν είναι ήδη επιλεγμένα).



Αν θέλετε να βλέπετε την IP διεύθυνση του αποστολέα, επιλέγετε “Show Visitor IP In Email”. Προτού το επιλέξετε όμως, καλό θα ήταν να λαμβάνατε υπ ‘όψιν κατά πόσο θα θέλατε εσείς οι ίδιοι να βλέπουν οι παραλήπτες των μηνυμάτων σας την IP διεύθυνσή σας.



Include data for export: Αν θέλετε να μπορείτε να κάνετε εξαγωγή των στοιχείων των αποστολέων των μηνυμάτων που σας έρχονται, κάντε κλικ στην πρώτη επιλογή. Σε αντίθετη περίπτωση, επιλέγετε το “No, do not include it”.

Message Subject: Επιλέγετε “Retrieve from z”, όπου z επιλέγετε το πεδίο με το θέμα του μηνύματος.



13. Κάνουμε: και επιλέγουμε το “Open new window and test notifications” αν θέλετε να δοκιμάσετε τη νέα φόρμα επικοινωνίας που μόλις δημιουργήσατε.

Αν από την άλλη είστε σίγουροι πως τα κάνατε όλα σωστά, δεν υπάρχει λόγος για αυτό, οπότε πατάτε “Take me back to the Form Manager”.


Προσθήκη Φόρμας Επικοινωνίας στο blog μας:



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



1. Εμείς χρειαζόμαστε το “Code”, οπότε κάνουμε κλικ πάνω του.



2. Στη σελίδα που θα εμφανιστεί, κάνουμε κλικ στο “HTML Only”, το οποίο βρίσκεται στη στήλη στο αριστερό μέρος της σελίδας, και αντιγράφουμε τον κώδικα που μας δίνει.



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



4. Επεξεργασία αναρτήσεων > Επεξεργασία σελίδων και επιλέγουμε “ΝΕΑ ΣΕΛΙΔΑ”.



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



6. Αν κάνετε προεπισκόπηση, θα δείτε πως στο τέλος της φόρμας δείχνει το παρακάτω κείμενο:

Powered byEMF Web Form

Report Abuse

Αν θέλετε για οποιοδήποτε λόγο να το αφαιρέσετε, αναζητήστε πατώντας “Ctrl + F” στον κώδικα που επικολλήσατε και διαγράψτε το παρακάτω σημείο (αν έχετε αλλάξει γραμματοσειρά ή χρώματα στη φόρμα δε θα το βρείτε έτσι ακριβώς):

<div>

<font face="Verdana" size="2" color="#000000">Powered by</font><span style="position: relative; padding-left: 3px; bottom: -5px;"><img src=

"http://www.emailmeform.com/builder/images/footer-logo.png" /></span><font face="Verdana" size="2" color="#000000">EMF</font> <a style="text-decoration:none;" href="http://www.emailmeform.com/"

target="_blank"><font face="Verdana" size="2" color="#000000">Form Builder</font></a>

</div><a style="line-height:20px;font-size:70%;text-decoration:none;" href="http://www.emailmeform.com/report-abuse.html?http://www.emailmeform.com/builder/form/80df3RW2Nf1S78UpkQHnj" target=

"_blank"><font face="Verdana" size="2" color="#000000">Report Abuse</font></a>



7. Πατάμε “ΔΗΜΟΣΙΕΥΣΗ ΣΕΛΙΔΑΣ” και τελειώσαμε!


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

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

Παρακαλώ σεβαστείτε τα copyrigths της ανάρτησης.



Post by Secra from Web in Greece

Copyrigths: http://www.bloggertips.gr/




‘Follow us’ J-Query Social Bookmarking Widget



Print Friendly and PDFPrintPrint Friendly and PDFPDF


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





Σήμερα θα προσθέσουμε ένα ακόμη gadget στη συλλογή μας με τα Social Bookmarking Gadgets, το οποίο επιτελεί 4 λειτουργίες: RSS Feed, Εγγραφή στο blog μέσω e-mail και link για τις σελίδες μας στα Facebook και Twitter.



Πάμε να δούμε πως θα το προσθέσουμε στο blog μας:



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

2. Σχεδίαση

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

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

#social {

width: 98%;

height: 45px;

margin: 0;

padding: 10px 5px 5px 30px;

list-style: none;

border-right:solid 1px #853529;

position: relative;

background: url(http://2.bp.blogspot.com/-Nf6QgqI-jkc/Tas56HEUrwI/AAAAAAAAAxQ/hw_KYA9pPZA/follow-bg-abt.png) no-repeat left top;

}



#social p{

font-size:1.5em;

color:#FFFB98;

font-weight:bold;

float:left;

margin: 10px 10px 0 0;

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

filter: dropshadow(color=#000000, offx=1, offy=1);

}



.abt{

font-size:0.8em;

color:#787878;

float:right;

margin: 0 -30px 0 0;

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

filter: dropshadow(color=#ffffff, offx=1, offy=1);

}



#social li {

width: 32px;

height: 32px;

float: left;

margin-right: 3px;

}



#social li a {

float: left;

display: block;

width: 100%;

height: 100%;

text-indent: -1000em;

background-repeat: no-repeat;

text-decoration: none;

}



#social #rss {

background-image: url(http://2.bp.blogspot.com/-27yL99iDt70/Tas569zVJWI/AAAAAAAAAxo/NIEumM2DKRo/s400/allblogtools_rss.png);

}



#social #facebook {

background-image: url(http://4.bp.blogspot.com/-lfZmi7_j72c/Tas56hfwNxI/AAAAAAAAAxg/D_xE4bPyo60/s400/allblogtools_facebook.png);

}

#social #twitter {

background-image: url(http://2.bp.blogspot.com/-BHCqkqm4Dnw/Tas57UCTyAI/AAAAAAAAAxw/fCj4yjzJE0g/s400/allblogtools_twitter.png);

}

#social #mail {

background-image: url(http://1.bp.blogspot.com/–tzwYodHzk8/Tas56U26pSI/AAAAAAAAAxY/Xqxm-jfCPkA/s400/allblogtools_email.png);

}



span.tooltip {

background: #575757;

padding: 3px;

display: block;

width: 140px;

border: 1px solid #000000;

position: absolute;

margin-top:-40px;

color: #F0F0F0;

font-size:10px;

text-indent: 0;

font: Arial, sans-serif;

text-align: center;

-webkit-box-shadow: inset 2px 2px 2px #616161;

-moz-box-shadow: inset 2px 2px 2px #616161;

box-shadow: inset 2px 2px 2px #616161;

-moz-border-radius: 5px;

border-radius: 5px;

}



5. Στη συνέχεια, πάλι με Ctrl + F, αναζητούμε το </body> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

<script type=’text/javascript’>

window.setTimeout(function() {

document.body.className = document.body.className.replace('loading', '');

}, 10);

</script>



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

<script type=’text/javascript’>

//<![CDATA[

$(document).ready(function() {



$(‘#social li’).each(function() {



var $li = $(this);

var title = $li.find(‘a’).attr(‘title’);



$li.find(‘a’).removeAttr(‘title’);



$(‘<span class=”tooltip”/>’).text(title).appendTo($li.find(‘a’)).hide();





$li.find(‘a’).mouseover(function() {





var top = $(this).position().top;

var left = $(this).position().left;



$(this).find(‘span’).fadeIn()({

top: top,

left: left

}, ‘slow’);



});



$li.find(‘a’).mouseout(function() {





$(this).find(‘span’).fadeOut(‘slow’);





});



});





});



//]]>

</script>



6. Αποθήκευση προτύπου



Πάμε τώρα να προσθέσουμε το gadget στο blog μας:



7. Πάμε Σχεδίαση > Προσθήκη gadget > HTML/Javascript και στο παράθυρο που θα ανοίξει επικολλούμε τον παρακάτω κώδικα:

<ul id=”social”>

<p>Follow Us</p>

<li><a href=”http://blog-name.blogspot.com/feeds/posts/default?alt=rss” id=”rss” title=”Follow our Feeds”>Rss</a></li>



<li><a href=”Mail-Link#” id=”mail” title=”Subscribe to our newsletter”>Mail</a></li>



<li><a href=”Facebook-Link#” id=”facebook” title=”Like us on Facebook”>Facebook</a></li>



<li><a href=”Twitter-Link#” id=”twitter” title=”Follow us on Twitter”>Twitter</a></li>

</ul>



Αντικαθιστούμε το http://blog-name.blogspot.com με τη διεύθυνση (url) του blog μας (ή αν έχετε λογαριασμό στο Feedburner, αντικαταστήστε το http://blog-name.blogspot.com/feeds/posts/default?alt=rss με το url από το Feedburner (όπως θα δείτε στο παράδειγμα παρακάτω), το Mail-Link# με τη διεύθυνση στην οποία οι αναγνώστες μπορούν να κάνουν εγγραφή (subscribe) στο blog μας μέσω e-mail, το Facebook-Link# με το url της σελίδας ή του προφίλ μας στο Facebook και το Twitter-Link# με το url της σελίδας μας στο Twitter.



Για να καταλάβετε καλύτερα τι και πως θα το αντικαταστήσετε, ρίξτε μια ματιά στον παρακάτω κώδικα, ο οποίος αποτελεί παράδειγμα για το bloggertips.gr:

<ul id=”social”>

<p>Follow Us</p>

<li><a href=”http://feeds.feedburner.com/Johnpatrablog” id=”rss” title=”Follow our Feeds”>Rss</a></li>



<li><a href=”http://feedburner.google.com/fb/a/mailverify?uri=Johnpatrablog” id=”mail” title=”Subscribe to our newsletter”>Mail</a></li>



<li><a href=”https://www.facebook.com/bloggertips.gr” id=”facebook” title=”Like us on Facebook”>Facebook</a></li>



<li><a href=”https://twitter.com/#!/johnpatrablog” id=”twitter” title=”Follow us on Twitter”>Twitter</a></li>

</ul>



Για οποιοδήποτε πρόβλημα ή απορία αφήστε το σχόλιό σας.



Πηγές: http://www.allblogtools.com/tricks-and-hacks/blogger-follow-us-j-query-widget-social-icons/



Copyrigths: http://www.bloggertips.gr/



Post by Secra from Web in Greece




All my Posts widget – Όλες σου οι αναρτήσεις σε μια ανάρτηση!



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καταρχάς σας εύχομαι καλή χρονιά και χρόνια πολλά μιας κι αυτή είναι η πρώτη μου ανάρτηση για το 2010.Κάποιες υποχρεώσεις με κράτησαν μακριά αυτές τις πρώτες 15 ημέρες του 2010 αλλά να σήμερα 15 του Γενάρη που έμεινα πιστός στο ραντεβού που είχαμε δώσει και κατάφερα να ανεβάσω αυτό το ποστ.Να σας πω βέβαια ότι αυτές τις ημέρες δεν θα γράφω με την ίδια συχνότητα αναρτήσεις όπως παλιότερα.Θα προσπαθήσω να ανεβάζω μία την εβδομάδα.
Το σημερινό μας θέμα πιστεύω ότι είναι ένα θέμα που ενδιαφέρει όλους.Μου το έχουν ζητήσει και μερικοί από εσάς.Κοιτάξτε αυτήν μου την ανάρτηση:http://johnpatrablog.blogspot.com/2009/08/all-my-posts.html
Όπως είδατε είναι ένα widget που τοποθετείται μέσα σε μια ανάρτηση και δείχνει όλες τις αναρτήσεις του blog.Τις έχει κατατάξει με βάση την ετικέτα τους και στις 10 τελευταίες αναρτήσεις γράφει δίπλα την ένδειξη “New!”
Οι αναρτήσεις ανανεώνονται αυτόματα.Ουσιαστικά αυτό το widget θα είναι ένα πολύ χρήσιμο εργαλείο για τους επισκέπτες σας που θα βρίσκουν γρήγορα και εύκολα τις αναρτήσεις που τους ενδιαφέρει.
Πάμε λοιπόν να σας πω πως θα το βάλετε.Είναι πραγματικά πολύ εύκολο.
Ακολουθήστε τα παρακάτω βήματα:
1.Σύνδεση στον λογαριασμό σας από τον blogger.com
2.Πανόπτης
3.Νέα Ανάρτηση
4.Σαν τίτλο μπορείτε να γράψετε “All my Posts” ή ότι άλλο θέλετε
5.Στη συνέχεια βεβαιωθείτε ότι βρίσκεστε στην καρτέλα “Επεξεργασία html” και ΟΧΙ στην καρτέλα “Σύνθεση”
6.Εκεί λοιπόν επικολλήστε τον παρακάτω κώδικα, αφού έχετε αλλάξει το “johnpatrablog” με την δικιά σας διεύθυνση:


<script style=”text/javascript” src=”http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js”></script>
<script src=”http://johnpatrablog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc”></script>
<a href=”http://johnpatrablog.blogspot.com/2010/01/all-my-posts-widget.html”>Add this widget in your blog!By JohnpatraBLOG!</a>


7.Μπορείτε να το δημοσιεύσετε και τώρα αλλά θα εμφανιστεί στην αρχική σας σελίδα και δεν είναι και τόσο ωραίο αυτό.Αν θέλετε να το δημοσιεύσετε χωρίς να εμφανίζεται στην αρχική σας σελίδα ,πατήστε “Επιλογές ανάρτησης” και αλλάξτε την “ημερομηνία και ώρα ανάρτησης” με μια παλιότερη.Δηλαδή όπως είναι η ημερομηνία γράψτε “15/10/2009” (τυχαίο παράδειγμα).
8.Έχετε-δεν-έχετε αλλάξει την ημερομηνία πατήστε “ΔΗΜΟΣΙΕΥΣΗ ΑΝΑΡΤΗΣΗΣ”.
9.Στη συνέχεια λογικά θα σας πει ότι η νέα σας ανάρτηση δημοσιευθηκε με επιτυχία.Πατήστε λοιπόν τώρα “Προβολή ανάρτησης” και δείτε αν σας πέτυχε όπως σε εμένα.

Αυτό ήταν.Τώρα μπορείτε να πάρετε το λινκ αυτής της ανάρτησης και να το βάλετε όπου θέλετε.(Όπως εγώ το έβαλα στην μπάρα κάτω από τον τίτλο.)




All my Posts!



Print Friendly and PDFPrintPrint Friendly and PDFPDF