Πώς να χωρίσετε το περιεχόμενο του άρθρου σε στήλες στον Blogger;

Πώς να χωρίσετε το περιεχόμενο του άρθρου σε δύο και τρεις στήλες στον Blogger;

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

Αυτό μπορούμε να το κάνουμε εύκολα με τη βοήθεια CSS και HTML όπως θα δείτε παρακάτω.

Δείτε demo

Πως θα το εφαρμόσουμε στο blog μας

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


.stiles2{
   -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    text-align: justify;
}
.stiles3
{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    text-align: justify;
}
.stiles3grammes
{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px; 
    column-gap: 40px;
    -webkit-column-rule: 4px outset #BCB5B5;
    -moz-column-rule: 4px outset #BCB5B5;
    column-rule: 4px outset #BCB5B5;
    text-align: justify;
}

Προσαρμογή

Για να αυξήσετε τον αριθμό των στηλών σε 4 στήλες, αλλάξτε τα
-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;
σε
-webkit-column-count: 4; -moz-column-count: 4; column-count: 4;

Επίσης μπορείτε να αλλάξετε το χρώμα των κάθετων διαχωριστικών γραμμών, αλλάζοντας τον χρωματικό κωδικό #BCB5B5 με αυτόν της αρεσκείας σας.

Πώς θα λειτουργήσει;

Για να το εφαρμόσουμε λοιπόν μέσα σε κάποιο άρθρο μας, θα πρέπει να αλλάξουμε τον αρθρογράφο μας από την [Προβολή σύνταξης] σε [<>Προβολή HTML]:

και επικολλούμε το παρακάτω αντικαθιστώντας το κείμενο ανάμεσα στα <div> με το κείμενο του άρθρου μας:



<div class='stiles2'> Για 2 στήλες - ΓΡΑΨΤΕ ΤΟ ΑΡΘΡΟ ΣΑΣ ΕΔΩ</div>

<div class='stiles3'> Για 3 στήλες - ΓΡΑΨΤΕ ΤΟ ΑΡΘΡΟ ΣΑΣ ΕΔΩ</div>

<div class='stiles3grammes'> Για 3 στήλες με γραμμές - ΓΡΑΨΤΕ ΤΟ ΑΡΘΡΟ ΣΑΣ ΕΔΩ</div>

Αυτό ήταν. Αποθηκεύστε και δείτε την ανάρτησή σας.