Από την μια μεριά είναι η επικεφαλίδα του blog μου και από την άλλη μεριά είναι έξτρα χώρος , όπου μπορώ να προσθέσω κάποιο HTML/ javascript Widget η κάποιο banner .
Λοιπόν , για να γίνει αυτό , είναι πολύ εύκολο

Απλά ακολουθείτε τα παρακάτω βήματα :
- Συνδεθείτε στο blogger λογαριασμό σας
- Πηγαίνετε Διάταξη –> Επεξεργασία HTML και μην πατήσετε στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων
- Και ψάχνετε στο πρότυπο σας τον παρακάτω κώδικα :
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
- Τώρα αντικαταστήστε τον πάνω κώδικα με τον κώδικα που σας δίνω κάτω :
#header {
float:left;
width:40%;
height:150px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header2{
float:left;
width:60%;
height:150px ;
}
float:left;
width:40%;
height:150px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header2{
float:left;
width:60%;
height:150px ;
}
Σημείωση : Προσαρμόστε ανάλογα με τις ανάγκες σας το width και το height …
- Τώρα ψάχνουμε πάλι στο πρότυπο μας τον παρακάτω κώδικα :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='ΟΝΟΜΑΣΙΑ ΤΟΥ BLOG (Header)' type='Header'/> </b:section>
</div>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='ΟΝΟΜΑΣΙΑ ΤΟΥ BLOG (Header)' type='Header'/> </b:section>
</div>
Σημείωση : ΟΝΟΜΑΣΙΑ ΤΟΥ BLOG είναι η πραγματική ονομασία του blog σας . Στο πρότυπο σας το maxwidgets='1' μπορεί να είναι maxwidgets='2' η 3 η 5 και το showaddelement='no' μπορει να ειναι yes
- Αντικαταστήστε τον πάνω κώδικα με τον κώδικα που σας δίνω παρακάτω :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->
Κάντε Προεπισκόπηση Πρότυπου πρώτα , να δείτε αν όλα είναι εντάξει και ύστερα Αποθηκεύετε το πρότυπο σας .
Το αποτέλεσμα σας θα μοιάζει με αυτό :
Καλή επιτυχία σε όλους
Για το πρότυπο ΤΕΚΚΑ :
Βρείτε στο πρότυπο ΤΕΚΚΑ σας τον παρακάτω κώδικα :
<b:widget id='Header' locked='true' title='test (Κεφαλίδα)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId +
"_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. -->
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;"
+ "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width:
0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span&
gt;</p>
</div>
</b:includable>
</b:widget>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId +
"_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. -->
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;"
+ "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width:
0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span&
gt;</p>
</div>
</b:includable>
</b:widget>
Και όταν τον βρείτε , διαγράψτε τον ολόκληρο .
Τώρα βρείτε αυτούς τους κωδικούς :
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
Και κολλήστε ακριβώς από κάτω τον παρακάτω κώδικα :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)'
type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->
Τώρα το τελευταίο βήμα.
- Βρείτε τις παρακάτω γραμμές του κώδικα :
.description {
text-align: center;
padding-top:10px;
}
text-align: center;
padding-top:10px;
}
Και αντικαταστήστε τις με τον παρακάτω κώδικα :
#header {
float:left;
width:40%;
height:150px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
} #header2{
float:left;
width:60%;
height:150px;
}
float:left;
width:40%;
height:150px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
} #header2{
float:left;
width:60%;
height:150px;
}
Αποθηκεύετε το πρότυπό σας και το αποτέλεσμα θα μοιάζει με αυτό :
Καλημέρα.
Δυστυχώς στο πρώτυπο ΤΕΚΚΑ δεν μπόρεσα να βρω ποιές γραμμές πρέπει να αντικαταστήσω. Αν θέλεις γράφεις ποιές είναι αυτές;
@<span>mavros gatos</span>
Καλησπερα σου
Οκ . Εκανα UPDETE στην αναρτηση και εξηγω για το προτυπο ΤΕΚΚΑ τι πρεπει να κανεις :-P
Σοφία πέρασα να σου πω ότι κάνεις πολύ καλή δουλειά..
έχεις υπόψην σου κανένα μαύρο - τρίστηλο πρότυπο (κάτι σαν το minima dark) γιατί θέλω να αλλάξω πρότυπο.
Ωωωωχ μέκανε άνω κάτω την κεφαλίδα-εικόνα και τώρα πρέπει να το επαναφέρω.
Ααα εντάξει, προσάρμοσα την εικόνα κεφαλίδα στις νέες διαστάσεις με ήταν πιο εύκολο.
Σε ευχαριστώ πολύ και καλή συνέχεια.
Ωπα, πήγα να βάλω ένα μπάνερ στο δεξί μέρος με προσθήκη gadger html ένα φλας μπάνερ και με το βγάζει πάνω από την εικόνα κεφαλίδα του μπλογκ.
Γράψε μου σε παρακαλώ πως επαναφέρω την προηγούμενη κατάσταση. :(
Την πάτησα, τώρα δεν εμφανίζεται και το read more.
Έχεις κάπου για ρύθμιση για εμφάνιση του: διαβάστε περισσότερα;
<p>@<span><span>mavros gatos</span><span> </span></span>
</p><p>
</p><p>Σίγουρα κάτι δεν έκανες σωστά !!!!
</p><p>
</p><p>αυτόν τον τρόπο τον εχω δοκιμάσει η ιδια και δουλεύει άριστα .
</p><p>
</p><p>Μπορείς να μου γράψεις ποια ειναι η σελίδα σου να ρίξω μια ματιά ???
</p><p>Σε ψάχνω αλλα δεν σε βρήκα ....
</p><p>
</p><p> </p>
Για τα το επαναφερεις σε προηγουμένη κατάσταση άλλαξε τους καινούργιους κωδικούς με τούς παλιούς ,
αυτούς που άλλαξες εξαρχής .
Τους γράφω στην ανάρτησή μου τους παλιούς κωδικούς .
Πάντα όμως πριν κάνεις οποιαδήποτε αλλαγή καλό είναι να κάνεις ένα αντίγραφο ασφαλείας από το πρότυπό σου , για να το επαναφερεις αργότερα ,αν κάτι δεν κάνεις σωστά
@<span>Johnpatra</span>
Καλησπέρα σου :*
Χαίρομαι που πέρασες και σ'ευχαριστω για τα καλά σου λόγια
αν βρω κάποιο καλό πρότυπο , θα σε ενημερώσω .
Να είσαι καλά .
Είχες εικόνα για το<span> read more η link ?</span>
Αν χρησιμοποιείς εικόνα , μπορεί να φταίει το url της εικόνας . έλεγξε το ...
Όπως έγραψα και πριν γράψε μου την σελίδα σου για να δω τι γίνετε !
Το μόνο που έκανα, επειδή λόφω βιασύνης δεν αποθήκευσα το πρότυπο, να ξαναεπιλέξω από την αρχή το ίδιο πρότυπο και τώρα ψάχνω τις αναρτήσεις εδώ και εκεί για να ξανακάνω κα΄τι ωραίες παρεμβάσεις και αλλαγές που είχα κάνει με βοήθεια άλλων μπλόκερς, όπως εσύ.
Καλά τώρα την πάτησα και είναι αργά. Μαζί με κάτι άλλ που είχα κάνει είχα βάλει και κάτω από την κεφαλίδα αναδυόμενα μενού και δεν θυμάμαι από πήρα κωδικό και τον έβαλα στην html για να δουλέψει.
http://gataros.blogspot.com/