Σε αυτή την ανάρτηση , θέλω να μοιραστώ μαζί σας ένα πολύ ενδιαφέρων 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 ανάλογα με τις προτιμήσεις σας
Τώρα κάνετε προεπισκόπηση πρότυπου και αν όλα είναι εντάξει αποθηκεύετε το πρότυπο σας και το τελικό αποτέλεσμα , αν όλα είναι σωστά , θα να είναι σαν αυτό :
( πατήστε πάνω στην εικόνα για μεγέθυνση )
Η μπορείτε να δείτε σε λειτουργία εδω
Απλά πρέπει να παίξετε λίγο με τους κωδικούς του πρότυπου σας , μέχρι να επιτύχετε το επιθυμητό αποτέλεσμα για πρότυπο σας .
Ελπίζω να σας φάνηκε χρήσιμη αυτή η ανάρτηση και κάθε σχόλιο η κάθε παρατήρηση σας είναι ευπρόσδεκτα 

Πολύ καλό, αλλά τί γίνεται με το πρωτυπο TEKKA? Εκεί δεν μπορώ να βρώ τα σημεία που πρέπει να βαλώ αυτά που περιγ΄ραφεις.
Εντάξει το βρήκα, υπέθεσα συγρίνοντας τους κωδικες και βρηκα τα σωστα σημεια.
Σε ευχαριστώ πολύ, έχεις πολύ ενδιαφέροντα θέματα.
@ mavros gatos
Καλησπέρα σου
Στο πρότυπο tekka αντί για το #main-wrapper { θα βρεις αυτό :
#main {
float:left;
padding-bottom:20px;
padding:0px;
width:55%;
margin;0 1px;
font: $bodyFont;
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 */
}
και αντί για το παρακάτω κώδικα :
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
θα βρεις αυτόν τον κώδικα :
h2.date-header {
border-bottom:none;
font-size: 130%;
text-align:left;
margin-top:20px;
margin-bottom:14px;
padding:1px;
padding-left:17px;
color: $dateHeaderColor;
font-weight: normal;
font-family: Trebuchet MS, Verdana, Sans-serif;
}
.post h3 {
font-size: 150%;
font-weight:bold;
}
.post h3 a,
.post h3 a:visited {
color: $mainTextColor;
}
.post {
padding-left:20px;
margin-bottom:20px;
text-indent:10px;
padding-right:20px;
line-height:22px;
}
Θέλω να δοκιμάσω να βάλω μεγάλο κείμενο σε δύο στήλες, μήπως είναι καλύτερα και πιο βολικό για διάβασμα. Έχεις κάποια ανάρητση για αυτό;
:-D
Ωωωω είμαι βλάκας, το βρήκα με ελάχιστο ψάξιμο σε ευχαριστώ.
Kαλησπερα και καλή σαρακοστή να εχεις
Για αυτό που θέλεις να κανεις δες αυτήν την ανάρτηση μου Χωριστε την αναρτηση σας σε δύο παράλληλες στήλες ...
Αν δεν είναι αυτό που ψάχνεις , μπορείς να μου πεις τι ακριβώς θέλεις να κάνεις , αν μπορώ να σε βοηθήσω :*
ΤΕΛΕΙΟ!!!! Εδώ και καιρό ήθελα να το κάνω, για να φαίνονται καλύτερα οι φωτογραφίες, αλλά δεν ήξερα πως!!! Και τώρα όχι μόνο το έβαλα, αλλά το έφτιαξα και όπως ακριβώς το ήθελα!!!!! Τόσο ωραία και αναλυτικά τα παρουσιάζεις! Ευχαριστώ και πάλι!!!
Galini μου καλησπέρα :-D
Χαίρομαι πολύ που σε βοήθησε αυτή η ανάρτηση !
Σ'ευχαριστω πολύ για τα καλά σου λόγια , να είσαι καλά :*
Προσπάθησα να βρω τους κώδικες που λες, όμως δεν υπάρχει τίποτα στο δικό μου html.
Μήπως μπορείς να βοηθήσεις?? Τι άλλο πρέπει να κάνω??