How To Lace Converse Doubles

Tutorial: Adding a section in a header, implementation.

As and when the construction of this blog, I propose, using some tutorials to share with you how which I proceeded to design it.

Today I moved my practice tutorial on sharing the header. Good thing because you may have noticed that it was slightly difficult ... I will So try to simplify things by creating, step by step with you, a new section in my header. In fact, remember. After creating my banner, I realized I had left the place in height for an additional section in my header . As I removed my navbar (if you want to know how, management comment ), visitors of my blog is no longer possible to do research. The circle is complete! I'll put a search link in my new section. (Thanks to Rodney and Amanda for the part on the widget link research).

Step 1) Enter in the administration of your site (login, password), then click on the "Edit HMTL code" to enter in the model code of your blog. Again, before any change, it is better to save your original model as I have already indicated here. Once the backup completes, try the following code:

\u0026lt;div id='header-wrapper'>
\u0026lt;b: section class = 'header' id = 'header' maxwidgets = '1 'showaddelement =' no '>
\u0026lt;b: widget id = 'header1' locked = 'true' title = '68 and Generation Video Game (Header)' type = 'Header' />
\u0026lt;/ b: section>
\u0026lt;div id = 'header-right'>
\u0026lt;b:section class='header' id='header-right-top' showaddelement='yes'>
\u0026lt;b: widget id = 'LinkList1' locked = 'false' title =''type = 'LinkList' />
\u0026lt;/ b: section>
\u0026lt;/ div> \u0026lt;div
id='header-right-bottom'> ;
\u0026lt;b:section class='header' id='header-right-bottom-section' showaddelement='yes'>
\u0026lt;b: widget id = 'HTML1' locked = 'false' title = 'Choose your language / translation. " type = 'HTML' />
\u0026lt;/ b: section>
\u0026lt;/ div>
\u0026lt;/ div>

As we have already seen, This is the code that actually created our sections. I isolated the code that produces orange section where my Google translation widget (See my header to view). As the search link is also a widget, I'll just copy this piece of code and paste it j ust before the last tag \u0026lt;/ div> before the change as follows:

\u0026lt;div id = 'header-right-down >
\u0026lt;b:section class='header' id=' header-right-down-section' showaddelement='yes'>
\u0026lt; b: widget id = ' HTML2 ' locked = 'false' title = ' Search / Search this blog. 'type =' HTML '/>
\u0026lt;/ B: section>
\u0026lt;/ div>

I first changed the name of the section, of course, 'header-right- bottom 'to' header-right-down '. In a second step, I changed the ID 'header-right-bottom -section' to 'header-right-down -section'. It should then change the ID of the widget that we will put in HTML1 (translator widget ID) to HTML2 (identifier search widget that we will create later). Finally, we let course type in HTML, as we will also put the HTML to define the widget link search.

Step 2) Now that we've created our new section (name: header-right-down ID: header-right-down-section), it must encode its appearance. In my case, I want my Link section research appears in exactly the same way as my other two sections. Ie on an orange background with a bright orange border. Again, I'll do a simple "copy" of a previous code and paste it with some modifications:

cherchez le code:

#header-right-bottom-section {
padding: 0 5px 10px;
}

#header-right-bottom {
width: 40%;
height: 116px%;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}

#header-right-bottom ul {
margin: 0;
padding: 5px;
}

# header-bottom-right ul li {
display: inline;
padding: 5px;}

... copy / paste the just below and then replace them all by bottom down (or whatever you choose of course):

# header-right-down -section {
padding: 0 5px 10px;}


# header-right-down
{width: 40%;
height: 116px%
float: right;
border : 1px solid $ bordercolor;
color: $ pagetitlecolor;
margin: 5px;}


# header-right-down
ul {margin: 0;
padding: 5px;


} # header-right-down ul li {
display: inline;
padding: 5px;}

Save your template and voila. The third section is well with the same format as previous ones. For the sake of consistency, I arranged my three sections, which are one above the other to the right of my banner, so they cover the entire vertical height of my banner. It is 350 pixels high. So I set each section to 116 pixels high (350 / 3). Blogger is doing all alone to adjust everything and I'm pretty happy with the result. It now only remains for me to work the color of this header and I would have finished at least partially.

If you liked this article or brought you something, or rather if you did not like and that its contents can be completed, thank you to leave a comment . It is through your actions that this blog will improve.