Πως μπορούμε να κάνουμε τις αναρτήσεις μας να εμφανίζονται σε ξεχωριστά πλαίσια .

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

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

> Θα επεξεργαστούμε για αυτό το παράδειγμα , ένα απλό minima  blogger πρότυπο .
Ας δούμε πρώτα πια είναι η βασική δομή του πρότυπου μας και ποιους κωδικούς  θα επεξεργαστούμε :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 1000px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
#main-wrapper {
  width: 600px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

 > Αυτός είναι ο βασικός  κώδικας που συνήθως βρίσκουμε στο προεπιλεγμένο μας πρότυπο .  Τώρα, αυτό που πρέπει να επεξεργαστούμε εδώ είναι το main-wrapper , Αυτός ο κώδικας  καθορίζει την περιοχή που Δημοσιεύουμε τις αναρτήσεις μας στο Blogger Πρότυπο.
Για να κάνουμε κάθε ανάρτηση σε ένα ξεχωριστά πλαίσια  , ακλουθούμε τα παρακάτω βήματα .

Βήμα 1ο :

Βρίσκετε στο πρότυπο σας τον ακόλουθο κώδικα :

#main-wrapper {
  width: 600px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

> Εισάγετε τον κώδικα με τα πράσινα χρώματα ανάμεσα στους παρακάτω κωδικούς , όπως βλέπετε παρακάτω :

#main-wrapper {
background:#FFFFFF;
border: 3px solid #FEF0DB;
padding-right:7px;
padding-left:7px;
width: 600px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

> Αυτό που κάνουμε στην ουσία είναι , να  προσθέσουμε χρώμα φόντου , borders και μερικά padding

Βήμα 2ο :

> Τώρα για να κάνουμε της αναρτήσεις μας να  εμφανίζονται σε ξεχωριστά πλαίσια , θα πρέπει να βρούμε τις παρακάτω γραμμές

/* Posts
-----------------------------------------------
*/
h2.date-header {
  margin:1.5em 0 .5em;
  }
.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }

> Και προσθέτουμε  τους κωδικούς με το μπλε  χρώμα  ανάμεσα στους παρακάτω κωδικούς . Ακριβώς  όπως τα βλέπετε κάτω

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
background:#E6E6E6;
border: 1px solid #BDBDBD;
padding-right:7px;
padding-left:7px; }
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
background:#F2F2F2;
border: 1px solid #BDBDBD;
padding-right:7px;
padding-left:7px; }

Σημείωση : Αλλάζετε τα χρώματα και τα padding / padding ανάλογα με τις προτιμήσεις σας

Τώρα κάνετε προεπισκόπηση πρότυπου και αν όλα είναι εντάξει αποθηκεύετε το πρότυπο σας  και το τελικό αποτέλεσμα , αν όλα είναι σωστά , θα να είναι σαν αυτό :

( πατήστε πάνω στην εικόνα για μεγέθυνση ) 

Η μπορείτε να δείτε σε λειτουργία  εδω

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

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