ΠΩΣ ΜΕΙΩΝΩ ΤΑ ΚΕΝΑ ΣΕ ΟΛΟ ΤΟ BLOG

ΠΩΣ ΜΕΙΩΝΩ ΤΑ ΚΕΝΑ ΣΕ ΟΛΟ ΤΟ BLOG
Μπορούμε με απλές αλλαγές συγκεκριμένων αριθμών να μειώσουμε τα κενά που υπάρχουν εξ αρχής σε όλα τα πρότυπα ιστολογίων που δίνει ο blogger και να κερδίσουμε πλάτος και ύψος. Ο παρακάτω κώδικας είναι από αυτό το πρότυπο που χρησιμοποιώ σε αυτό το ιστολόγιο και θεωρώ πως είναι το καλύτερο πρότυπο του blogger το πιο προσαρμόσιμο και με τους λιγότερους περιορισμούς από όλα τα άλλα πρότυπα του blogger. Σε άλλα πρότυπα θα υπάρχουν λίγες διαφορές στην αρίθμηση αλλά και σε μερικές Variable definitions οι οποίες δεν θα υπάρχουν κάν για να τις ρυθμίσετε στα άλλα πρότυπα για αυτό καλό είναι να αλλάξετε πρότυπο και να βάλετε αυτό που έχω βάλει και εγώ και το οποίο γίνεται όπως θέλετε σε χρώμα, πλάτος, ύψος, διάταξη κ.τ.λ.

/* Variable definitions

====================

▼ Εδώ καταργούμε το ημιδιάφανο background της κεφαλίδας του τίτλου δηλαδή την εικόνα που βρίσκεται μέσα στις παρενθέσεις. Βάζουμε "none" χωρίς τις παρενθέσεις και το url.

145 …. <Variable name="header.background.gradient" description="Header Background Gradient" type="url" default="none"  value="url(//www.blogblog.com/1kt/awesomeinc/header_gradient_artsy.png)"/> (Να γίνει value="none").

▼ Εδώ μειώνουμε στα 5px την εσωτερική απόσταση του τίτλου από την κορυφή.

146 …. <Variable name="header.padding.top" description="Header Top Padding" type="length" default="22px"  value="9px"/> (Να γίνει 5px)

▼ Εδώ μειώνουμε στα 5px την εξωτερική απόσταση του τίτλου από την κορυφή.

147 …. <Variable name="header.margin.top" description="Header Top Margin" type="length" default="0"  value="14px"/> (Να γίνει 5px)

▼ Εδώ μειώνουμε στα 5px την εξωτερική απόσταση του τίτλου από το κάτω μέρος του.

148 …. <Variable name="header.margin.bottom" description="Header Bottom Margin" type="length" default="0"  value="10px"/> (Να γίνει 5px)

▼ Εδώ μειώνουμε στα 5px την εσωτερική απόσταση των widgets από το πάνω μέρος τους.

150 …. <Variable name="widget.padding.top" description="Widget Padding Top" type="length" default="8px"  value="8px"/> (Να γίνει 5px)

▼ Εδώ πρόκειται για την αριστερή εσωτερική απόσταση μεταξύ των πλαϊνών πλευρικών μπαρών και των widgets την αφήνουμε στο 0.

151 …. <Variable name="widget.padding.side" description="Widget Padding Side" type="length" default="15px"  value="0"/>

▼ Εδώ πρόκειται για την στρογγυλοποίηση όλων των γωνιών του blog τα 10px είναι πολύ καλά τα αφήνουμε.

154 …. <Variable name="widget.border.radius" description="Gadget Border Radius" type="length" default="0"  value="10px"/>

▼ Εδώ πρόκειται για την απόσταση από τα αριστερά της ημερομηνίας πάνω από τα posts την κάνουμε 5px.

158 ….  <Variable name="date.header.position" description="Date Header Position" type="length" default="15px"  value="25px"/> (Να γίνει 5px)

▼ Εδώ πρόκειται για την απόσταση της ημερομηνίας πάνω και κάτω από τα posts την κάνουμε 30px αν θέλουμε να εμφανίζεται η ημερομηνία ή την κάνουμε 5px αν θέλουμε να αποκρύψουμε την ημερομηνία.

160 ….  <Variable name="date.space" description="Date Space" type="length" default="30px"  value="60px"/> (Να γίνει 5px)

▼ Εδώ πρόκειται για το χρώμα του background της ημερομηνίας πάνω από τα posts την αλλάζουμε με μια νέα γραμμη κώδικα για να μπορούμε να αλλάξουμε το background της ημερομηνίας.

164 (πρίν)…  <Variable name="date.background" description="Date Background" type="background" color="transparent" default="$(color) none no-repeat scroll top left"  value="transparent url(//www.blogblog.com/1kt/awesomeinc/tabs_gradient_artsy.png) repeat fixed center center"/>

164 (μετά)…  <Variable name="date.background" description="Date Background" type="color"  default="$(color)" value="#207907"/> (τον κωδικό χρώματος #207907 μπορείτε να τον αλλάξετε με άλλον της αρεσκείας σας).

▼ Εδώ πρόκειται για την απόσταση του κειμένου της ανάρτησης από την κορυφή της.

169 …  <Variable name="post.first.padding.top" description="First Post Padding Top" type="length" default="0"  value="10px"/> (Να γίνει 5px)

▼ Εδώ πρόκειται για ένα επιπλέον πρόσθετο περίγραμμα εικόνας το αφήνουμε 0.

171 …  <Variable name="image.shadow.spread" description="Image Shadow Size" type="length" default="0" value="0"/>

▼ Εδώ πρόκειται για το στρογγυλεμα των γωνιών της εικόνας αναρτησης το βάζουμε 15px.

172 …  <Variable name="image.border.radius" description="Image Border Radius" type="length" default="0" value="0"/> (Να γίνει 15px)

▼ Εδώ πρόκειται για το στρογγυλεμα των γωνιών του pager στο τέλος των αναρτήσεων το βάζουμε 15px.

184 …  <Variable name="pager.border.radius.top" description="Pager Border Top Radius" type="length" default="$(widget.border.radius)"  value="0"/> (Να γίνει 15px)

▼ Εδώ πρόκειται για την απόσταση του pager από την τελευταία ανάρτηση το αφήνουμε 0.

185 … <Variable name="pager.space.top" description="Pager Top Space" type="length" default="1em"  value="0"/>

▼ Εδώ καταργούμε το ημιδιάφανο background του υποσέλιδου το ποιο είναι το ίδιο με της κεφαλίδας που καταργήσαμε στην αρχή. Βάζουμε  "none" χωρίς τις παρενθέσεις και αφαιρούμε το $. Έτσι θα μπορούμε να δώσουμε ότι χρώμα θέλουμε μέσα από την προσαρμογή του blogger.

187 … <Variable name="footer.background.gradient" description="Background Gradient" type="url" default="none"  value="$(header.background.gradient)"/> (Να γίνει "none")

/* Columns ----------------------------------------------- */

▼ Εδώ πρόκειται για την απόσταση του τίτλου από το αριστερό μέρος του ιστολογίου το αλλάζουμε σε 5px.

242 … .header-inner .section {

  margin: 0 16px; (Να γίνει 5px)

▼ Εδώ πρόκειται για την απόσταση του οριζόντιου μενού καρτελών (tabs) από το αριστερό μέρος του ιστολογίου το αλλάζουμε σε 5px.

246 … .tabs-inner .section {

  margin: 0 16px; (Να γίνει 5px)

/* Tabs ----------------------------------------------- */

▼ Εδώ πρόκειται για το υψος του οριζόντιου μενού των καρτελών (tabs) το αλλάζουμε σε 5px.

338 - 339 …

  height: 16px; (Να γίνει 5px)

  line-height: 16px; (Να γίνει 5px)

/* Widgets ----------------------------------------------- */

▼ Εδώ πρόκειται για την απόσταση των widgets από το αριστερό μέρος των πλευρικών μπαρών του ιστολογίου το αλλάζουμε σε 5px.

360 - 361 …

.main-inner .section {

  margin: 0 27px; (Να γίνει 5px)

▼ Και εδώ στην γραμμή 419 πρόκειται για την απόσταση των widgets από το αριστερό μέρος των πλευρικών μπαρών του ιστολογίου το αλλάζουμε σε 5px. Στην γραμμή 420 το 20px αφορά την απόσταση πάνω και κάτω από τα widgets το αλλάζουμε σε 5px. Ενώ το -5px. είναι πάλι η απόσταση των widgets από τα αριστερα. (πρέπει να αλλάξουν και οι 3 μαζί για σωστό αποτέλεσμα).

419 …  padding: 0 $(widget.padding.side) 15px; (Να γίνει 5px)

420 …  margin: 20px -16px; (Να γίνει 5px) - (Να γίνει -5px)

▼ Και εδώ στην γραμμή 456 πρόκειται για την απόσταση των widgets από το αριστερό μέρος των πλευρικών μπαρών του ιστολογίου το αλλάζουμε σε -5px.

456 …  margin: -$(widget.padding.top) -15px 0; (Να γίνει -5px)

▼ Και εδώ στην γραμμή 467 πρόκειται για την απόσταση των widgets από το αριστερό μέρος των πλευρικών μπαρών του ιστολογίου το αλλάζουμε σε -5px.

467 …  padding: .5em 15px; (Να γίνει 5px)

/* Posts ----------------------------------------------- */

▼ Εδώ πρόκειται για την απόσταση από τα αριστερά της ημερομηνίας πάνω από τα posts την κάνουμε -10px.

540 ….    margin: 0 -15px 1px; (Να γίνει -10px)

▼ Εδώ πρόκειται για τις εσωτερικές απόστασεις δεξιά και αριστερά από την ημερομηνία το κάνουμε 5px.

564 - 569 ….    

.main-inner .widget h2.date-header span {

  font: $(date.font);

  display: block;

567 … padding: .5em 15px; (Να γίνει 5px)

  border-left: $(date.border.size) solid $(date.border.color);

  border-right: $(date.border.size) solid $(date.border.color);

▼ Εδώ στην γραμμή 574 πρόκειται για την απόσταση ανάμεσα στις αναρτήσεις και τις πλευρικές μπάρες κάντε το 5px. Στην γραμμή 575 πρόκειται για την απόσταση του κειμένου της αναρτήσης από αριστερά κάντε το 5px.

572 …. .date-outer {

573 …. position: relative;

574 …  margin: $(date.space) 0 20px; (Να γίνει 5px)

575 …  padding: 0 15px; (Να γίνει 5px)

▼ Εδώ στην γραμμή 640 πρόκειται για την απόσταση γύρω γύρω από την εικόνα ανάρτησης κάντε το 5px.

639 …. .post-body img {

640 ….   padding: 8px; (Να γίνει 5px)

641 ….   background: $(image.background.color);

642 ….   border: 1px solid $(image.border.color);

▼ Εδώ στην γραμμή 685 πρόκειται για την εσωτερική απόσταση του κειμένου του pager κάντε το 5px.

684 ….   #blog-pager {

685 ….   padding: 15px; (Να γίνει 5px)

686 ….   font-size: 120%;