Χωρίστε την επικεφαλίδα του blogger ( blogger header ) σε 2 τμήματα - Updated !

Όπως θα έχετε παρατηρήσει η επικεφαλίδα μου είναι χωρισμένη σε 2 τμήματα .

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

Λοιπόν , για να γίνει αυτό , είναι πολύ εύκολο

Απλά ακολουθείτε τα παρακάτω βήματα :

•   Συνδεθείτε στο blogger λογαριασμό σας

•   Πηγαίνετε   Διάταξη –> Επεξεργασία HTML  και μην πατήσετε στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων

•   Και ψάχνετε στο πρότυπο σας τον παρακάτω κώδικα :

#header {
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 ;
}

Σημείωση : Προσαρμόστε ανάλογα με τις ανάγκες σας το 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>

Σημείωση : ΟΝΟΜΑΣΙΑ ΤΟΥ 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:widget id='Header' locked='true' title='test (Κεφαλίδα)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
<!--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 +
&quot;_headerimg&quot;' 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='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;px;&quot; + &quot;_height: &quot; + data:height + &quot;px;&quot;
+ &quot;background-repeat: no-repeat; &quot;' 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>

Και κολλήστε ακριβώς από κάτω τον παρακάτω κώδικα :

<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;
}

Και αντικαταστήστε τις με τον παρακάτω κώδικα   :

#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;
}

Αποθηκεύετε το πρότυπό σας και το αποτέλεσμα θα μοιάζει με αυτό :