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

Έψαχνα ένα σχεδιαστικό με τις παρακάτω προδιαγραφές

  1. Να είναι εντελώς δωρεάν
  2. Να υποστηρίζει την τελευταία έκδοση του Blogger (2017)
  3. Να υποστηρίζει SSL
  4. Να είναι βασισμένο στο Bootstrap 3 Framework. Να απεικονίζεται δηλαδή σωστά σε οποιαδήποτε φορητή και μη συσκευή
  5. Να μπορώ να χρησιμοποιήσω εικονίδια του Font Awesome
  6. Να χρησιμοποιεί Google Fonts
  7. Να μπορώ να το αλλάξω εύκολα με τη χρήση SCSS
  8. Να είναι απλό, καλαίσθητο και γρήγορο στο κατέβασμα
  9. Να έχει κουμπιά με τα κοινωνικά μου δίκτυα
  10. Να έχει responsive share buttons
  11. Να περιλαμβάνει αναζήτηση
  12. Να μπορώ να χρησιμοποιήσω την τελευταία έκδοση του jQuery (3.1.1)

Τι βρήκα

Τίποτα το οποίο να μου άρεσε.

Τι έκανα

Έφτιαξα ένα από το μηδέν με τον αγαπημένο μου Editor (Sublime). Φυσικά χρησιμοποίησα SCSS.

Το σχεδιαστικό είναι το παρακάτω και μπορείτε να το δείτε εδώ.

Εγκατάσταση

Μην χρησιμοποιήσετε το Import Template της πλατφόρμας. Ακόμα και αυτό είναι σκουπίδια.

BHMA 1o: Στη διαχείριση πατήστε Template > Edit HTML

Λογικά θα βρεθείτε εδώ..

ΒΗΜΑ 2ο: Σβήστε ΟΛΟ τον κώδικα μέσα στο πλαίσιο και επικολλήστε τον παρακάτω κώδικα

Τέλος! Το σχεδιαστικό σας εγκαταστάθηκε. Μπορείτε τώρα στο Layout να προσθέσετε Widgets. Το σχεδιαστικό είναι αυτό που βλέπετε στη σελίδα μου papatolis.blogspot.com

Προσαρμογή του σχεδιαστικού

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

Κουμπάκια Sharing

Αναζητήστε στον κώδικα αφού μορφοποιήσετε το Layout το «<data:post.body/>». Λογικά θα το βρείτε 2 φορές.  Πάτε στο 2ο και ακριβώς μετά επικολλήστε τον παρακάτω κώδικα:

Αν θέλετε να αλλάξετε τη μορφοποίηση CSS

Ο κώδικας SCSS που χρησιμοποίησα είναι ο παρακάτω

Με τον κώδικα αυτό δημιουργώ ένα css αρχείο το οποίο στον κώδικα θα δείτε ότι το ενσωματώνω εδώ:

 <link href='https://cdn.rawgit.com/tpapatolis/4eba806d8dd9ea23967788d00a569e18/raw/dbb5d78524b9ceccec11987fbc4d1c2c2fcbe17c/style.min.css' rel='stylesheet'/>

Μπορείτε να ενσωματώσετε το δικό σας σβήνοντας απλά το κομμάτι αυτό του κώδικα και προσθέτοντας το δικό σας μέσα σε ένα style tag στο ίδιο σημείο.

<style>Ο κώδικάς μου</style>

Προσθήκη JS

Χρησιμοποιώ και λίγο jQuery το οποίο ενσωματώνω με τον κώδικα

 <script src='https://cdn.rawgit.com/tpapatolis/fbaaf3aceaebb35030983a07c9ece1b3/raw/4548b113324cd5cacef8ae40f9de6e13d0890aa8/tp-responsive.js'/>

Μπορείτε επίσης να του αλλάξετε τα φώτα και να ενσωματώσετε το δικό σας στο ίδιο σημείο με ένα script tag

<script>Ο κώδικάς μου</script>

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

TP-Responsive Blogger Template 2017 (56896 downloads)