Η Google κυκλοφόρησε Widget με Φόρμα Επικοινωνίας για τον Blogger




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

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

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

Με τη μορφή Widget


Αρχικά ο Blogger μας προσφέρει τη δυνατότητα να βάλουμε μία φόρμα επικοινωνίας με τη μορφή Widget.
Όπως βλέπετε στην παρακάτω εικόνα, πηγαίνουμε στη [Διάταξη] , [Προσθήκη gadget] στο σημείο που θέλουμε να εμφανιστεί η φόρμα μας και στο νέο παράθυρο που θα εμφανιστεί επιλέξτε [Περισσότερα gadgets] και κάπου εκεί θα βρείτε το [Φόρμα επικοινωνίας]. Πατήστε [Αποθήκευση] και τελειώσατε. Κάθε φορά που κάποιος θα σας στέλνει μήνυμα μέσω αυτής της Φόρμας, εσείς θα το λαμβάνετε στο inbox του email σας. (Το email σας είναι αυτό με το οποίο συνδέεστε στον Blogger).


Σε μια σελίδα του blog μας


Εάν όμως δεν θέλετε να βάλετε την φόρμα επικοινωνίας σας σε ένα widget (το οποίο θα φαίνεται συνεχώς) αλλά σε μία σελίδα σας, τότε ακολουθήστε τα τρία παρακάτω βήματα:

  1. Φτιάξτε το widget όπως είπαμε παραπάνω αλλά αυτή τη φορά κοιτάξτε να το τοποθετήσετε στη διάταξη κάτω από τις 'Αναρτήσεις ιστολογίου' όπως σας δείχνω στην επόμενη εικόνα...




  2. Από το αριστερό μενού του Blogger επιλέγουμε το [Πρότυπο] και [επεξεργασία HTML].
    Κάνουμε μία φορά κλικ μέσα στο πλαίσιο του κώδικα έτσι ώστε να πάρει την εστίαση.
    Με Ctrl + F μέσα στο πλαίσιο του κώδικα, αναζητούμε το ]]></b:skin>

    Ακριβώς από επάνω του επικολλούμε τον παρακάτω κώδικα:
    .widget.ContactForm {
     display: none;
     }
    

    Πατήστε [Αποθήκευση προτύπου].
  3. Πάμε τώρα να κατασκευάσουμε την σελίδα που θα προβάλει την φόρμα επικοινωνίας μας. Δημιουργούμε μια κενή σελίδα και στον HTML κώδικά της, επικολλούμε το παρακάτω:
    <style type="text/css">
     .widget.ContactForm {
     display: block;
     }
     .post-footer {
     display: none;
     }
     #blog-pager {
     display: none;
     }
     .blog-feeds {
     display: none;
     }
     .widget.ContactForm .title {
     display: none;
     }
     .widget.ContactForm * {
     max-width: 100%;
     }
     </style>
    

    Δώστε τίτλο στη σελίδα σας (πχ 'Επικοινωνήστε μαζί μας') και από τις ρυθμίσεις της σελίδας, απενεργοποιείστε τα σχόλια των αναγνωστών. Πατήστε [Δημοσίευση] και τέλος.

[Αρχική πηγή]

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

Παράδειγμα 1ο




Παράδειγμα 2ο



4 σχόλια:

Δικά μου

Larissakid

Χρησιμοποιώ