Split Blogger Header into 3 Sections

 How To Split Blogger Header into 3 Sections

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


 Το δοκίμασα με τον ΝΕΟ ΚΩΔΙΚΑ του BLOGGER, με κάποιες αλλαγές που έκανα, εμφανίστηκαν οι 3 περιοχές, αλλά η 3η ήταν από κάτω και όχι και οι 3 παράλληλα..... θέλει τροποποιήσεις ακόμα... ίσως αργότερα ο ψάξω πάλι..... ο Κώδικας που χρησιμοποίησα βρίσκεται στην αρχή της ανάρτησης και είναι ο παρακάτω:




1. Βρίσκω το

<b:section class='header' id='header'

και προσθέτω τις δύο παρακάτω εγγραφές στον κώδικα

<b:section id='header-center' showaddelement='yes'/>
<div style='clear: both;'/>

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

2. Βρίσκω το ]]></b:skin> και ακριβώς από πάνω του, προσθέτω τις παρακάτω εγγραφές στον κώδικα

#header {display:inline-block;_float:left;}

#header-center {display:inline-block;float:left;padding:15px;}

#header-center .widget {margin:0;}

#header-right {display:inline-block;float:right;padding:15px;}

#header-right .widget {margin:0;}

#header {width: 30%;}

#header-center {width: 30%;}

#header-right {width: 29%;}

3.  Βρίσκω το

</b:template-skin>

και ακριβώς από πάνω του, προσθέτω τις παρακάτω εγγραφές στον κώδικα
 

              #header {width: 30%; float: left;}

              #header-center {width: 30%; float: center;}

              #header-right {width: 29%; float: right;}

Σώζουμε το πρότυπο.

Εδώ ξεκινά ο κώδικας για την προηγούμενη έκδοση του BLOGGER που βρήκα....

1.Log in to your dashboard--> layout- -> Edit HTML
2.Don't click on "Expand Widget Templates"
3.Scroll down to where you see like this code:

#header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; }

4.Now replace above code with below code :

#header { float:left; width:30%; height:200px; margin: 0px; border: 0px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header2{float:left; width:30%; height:200px} #header3{float:left; width:39%; height:200px}

Look at the picture below.

Note : If you like you can change width,height,... as your choice.
5.Now again scroll down to where you see like this code:

<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> </div>

Remember that YOUR-BLOG-TITLE is your real blog title.Look at the example below.

6.Now replace this code with below code :

<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'/> <b:section class='header' id='header3' maxwidgets='4' showaddelement='yes'/> <div style='clear:both;'/> </div><!-- end header-wrapper -->

Look at the example below.

7.Now save your template and your done.It will look like this.

Customization

To adjust header width edit: 960px
To change Header Title colour change:#BF0100
To change Header description colour then change:#3B3B3B

http://www.bloggertipandtrick.net/how-to-split-blogger-header-into-3/