ΠΡΟΣΑΡΜΟΣΙΜΟ ΠΛΑΤΟΣ BLOG (FLUID WIDTH) ΓΙΑ ΟΛΕΣ ΤΙΣ ΟΘΟΝΕΣ

ΠΡΟΣΑΡΜΟΣΙΜΟ ΠΛΑΤΟΣ BLOG (FLUID WIDTH) ΓΙΑ ΟΛΕΣ ΤΙΣ ΟΘΟΝΕΣ

Για να προσαρμόζεται αυτόματα το πλάτος του blog μας σε μικρές και μεγάλες οθόνες πρέπει να αλλάξετε το min-width και το max-width που βρίσκονται μέσα στον κώδικα HTML του προτύπου σας. Πηγαίνουμε στην επεξεργασία προτύπου και αναζητούμε με τα πλήκτρα Ctrl+F την γραμμή <b:template-skin>

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

<b:template-skin>

      <b:variable default='960px' name='content.width' type='length' value='960px'/>

      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>

      <b:variable default='200px' name='main.column.right.width' type='length' value='300px'/>

Από αυτά τα νούμερα στην 1^η γραμμή το πράσινο το αφήνουμε ώς έχει 960px αν σε εσάς είναι μεγαλύτερο κάντε το ξανά 960px.

Εξ ορισμού το blogger δεν εμφανίζει αριστερή πλευρική μπάρα αλλά μόνο δεξιά πλάτους 300px.

Αν στη 2^η γραμμή που αφορά την αριστερή πλευρική μπάρα το γαλάζιο νούμερο είναι σε εσάς διαφορετικό από το 0 τότε σημαίνει ότι έχετε και αριστερή πλευρική μπάρα και απλά το ρυθμίζετε σε ένα λογικό πλάτος π.χ. 250px. Αν είναι 0 σημαίνει ότι δεν έχετε επιλέξει από την προσαρμογή του blogger να έχετε και αριστερή πλευρική μπάρα οπότε το αφήνετε ώς έχει.

Αν στη 3^η γραμμή που αφορά την δεξιά πλευρική μπάρα το γαλάζιο νούμερο είναι σε εσάς 300px ή το αφήνετε ως έχει ή το μειώνετε ανάλογα πόσο πλάτος θέλετε να έχει η δεξιά πλευρική σας μπάρα.

Συνεχίζουμε και αναζητούμε με τα πλήκτρα Ctrl+F την γραμμή .region-inner Θα οδηγηθούμε στις παρακάτω γραμμές κώδικα,

.content-outer, .content-fauxcolumn-outer, .region-inner {

        min-width: $(content.width);

        max-width: $(content.width);

        _width: $(content.width);

      }

Από αυτόν τον κώδικα μπορούμε να πειράξουμε το min-width: το max-width: και το _width: Όπου στο min-width: βάζουμε το συνολικό minimun πλάτος σε px που θέλουμε να έχει το ιστολόγιο (βάλτε 960px).

Στο max-width: βάζουμε το συνολικό maximun πλάτος σε % που θέλουμε να έχει το ιστολόγιο (βάλτε 100%).

Στο _width: βάζουμε το συνολικό πλάτος σε % που θέλουμε να έχει το ιστολόγιο (βάλτε 100%).

Ο νέος κώδικας που πρέπει να ατιγράψετε είναι ο παρακάτω. Τον επικολλάτε, σώζετε το πρότυπο και τέλος.

.content-outer, .content-fauxcolumn-outer, .region-inner {

        min-width: 960px;

        max-width: 100%;

        _width: 100%;

      }

Όλα τα παραπάνω ισχύουν για το πρότυπο «Φανταστικό» του blogger που χρησιμοποιώ αλλά ταιριάζουν και στα περισσότερα πρότυπα του blogger εκτός από τα νεότερα και αυτά των δυναμικών προβολών.