Rocco Siffredie Lilli Carati

Tutorial: Sharing widgets to insert header and menu.

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

The pitch:

Now that we know insert HTML in a message without it being interpreted inappropriately, we can move on to something much more seriously. I think we have or will all be confronted with the following problem. By dint of asking one below the other widgets and other page elements, you end up being confronted with some issues of visibility. What should be put first in the famous "golden corner" top left, one that attracts the eyes of our visitors so expensive? The old articles? The subscription links? The translation widget so important to expand the geographic impact of the blog? ... Difficult question is not it? Without it represents a panacea, one solution would be to take a step closer to our header (or header). Indeed, rather than leaving no other role than to display title and description of the blog, why not partition and include page elements that are stealing a precious spot on the main page? I want to emphasize that I am largely inspired items Blogger fingertip and Blogger Buster for this article. I do not claim paternity. Simply use I am faced with a number of facts or issues that prompted me to "go deeper into the code" that initial articles can be. And I will therefore propose a condensed / expanded somewhat.

The walkthrough:

Step 1: when modify the template code to the extent we do (and to a lesser extent ...), should always consider saving the original template in case of trouble. Draft Blogger offers you this opportunity. Go http://draft.blogger.com/ and in the dashboard, click "Settings." In the "General" tab at the top an option to export the blog Atom format is available:

Just then export your blog (its RSS feed for that matter) on your hard drive. We can then begin to work more serenely ...

Step 2: access the HTML of your page by clicking on "Dashboard" Layout "and" Edit HTML. "Blogger does not text editor worthy of the name for this window. It includes no option to search / replace. I therefore suggest that you copy all your code in Notepad / Notepad to edit it more easily. Search now

the following code that will be slightly different in your case, even if only because of the blog title:



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



This code is the "header-wrapper, ie the container of your letterhead. In examining some, we see that there is a tag \u0026lt;b:section> \u0026lt;/ b: section> indicating that for the moment, our header has only one place, only one "section". It contains the title and description (the little phrase just below the title) of your blog. The fundamental purpose of our operation is to create additional sections to insert our other page elements.

Again and to the extent possible, we must keep the original code in case of problems (it never takes too much care.) But it must still be disabled so it does not conflict with the new code we will introduce. The easiest way to disable a code to turn it into comment. In this way, the interpreter knows that it must not treat this part of code. In HTML, the commentary is from the "tags" \u0026lt;! - And -> . Add these tags in front and behind the previous code:

\u0026lt;! -

\u0026lt;div id='header-wrapper'>

\u0026lt;b: section class = 'header' id = 'header' maxwidgets = '1 'showaddelement =' no '>

\u0026lt;b: widget id =' header1 'locked =' true 'title =' Video Game Generation 68 and (in- head) 'type =' Header '/>

\u0026lt;/ b: section>

\u0026lt;/ div>

->

Step 3: can now include the code for our container at three locations. One for the title you described, two widgets. Here is the code to paste "instead" of the previous code, ie just below or above since we have preserved as a comment:

\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>

</div>

<div id='header-right-bottom'>

<b:section class='header' id='header-right-bottom-section' showaddelement='yes'>

<b:widget id='HTML1' locked='false' title='Choose your language / Traduction.' type='HTML'/>

</b:section>

</div>

</div>

To you, of course, change the blog title. As agreed, we note that this code creates two sections most of the first. A section header-right "to be in the top right section and a" header-right-bottom "to be on the lower right. Here we are with our three divisions, just what we needed.

Step 4: Another piece of code to edit. In my case, my initial header, very simple, contained only # header without another section. So I had to get that piece of code and comment out as below:

\u0026lt;! -

# header {

padding-top: 0px;

padding-$ endSide: 0px;

padding-bottom: 0px;

padding-$ startSide: 0px;

margin-top: 0px;

margin-$ endSide: 0px;

margin-bottom: 0px;

margin-$ startSide: 0px;

border-bottom: 1px dotted $ bordercolor;

background: $ descbgcolor;

}

->

But in your case, your header can be more elaborate. Therefore, you must do the same maneuver as the # header FOR YOUR # header-wrapper and # header-inner potential : put everything in comment. If we disable some of the code, it should be replaced by another. Here's the code I have to introduce some custom for my blog:

# header-wrapper {

width: 1200px;

border: 1px solid # 000000;

margin: 0 auto 10px;

border:1px solid $bordercolor;

clear: both;

word-wrap: break-word;

overflow: hidden;

background:$pagetitlebgcolor

}



#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}



#header {

width: 58%;

float: left;

margin: 5px;

border: 1px solid $pagetitlebgcolor;

text-align: center;

color:$pagetitlecolor;

}



#header-right {

width: 40%;

float: right;

border: 1px solid $bordercolor;

color: $pagetitlecolor;

margin: 5px;



}

#header-right-top {

padding: 0 5px 10px;

}



#header-right a {
 color:#000000;
}
           
a:hover {
 color:$titlecolor;
}

a img {
  border-width: 0;
}



#header-right-bottom-section {

padding: 0 5px 10px;

}



#header-right ul {

margin: 0;

padding: 5px;

}



#header-right ul li {

display: inline;

padding: 5px;

}



#header-right-bottom {

width: 40%;

float: right;

border: 1px solid $ bordercolor;

color: $ pagetitlecolor;

margin: 5px;}





# header-bottom-right ul {margin

: 0;

padding: 5px;}





# header-bottom-right ul li {

display: inline;

padding: 5px;}

The changes I made are of several kinds. Warning , I have not seen the result in several configurations. Therefore, I can not guarantee as to how something appears on the screen of your visitors. The easiest way is to try with friends with different resolutions, different browser ... I initially set the size of the container to 1200 pixel. I must say that some have advocated not to exceed 950 pixels. I did not understand why ... Regarding the relative sizes of the sections, I adopted the percentage system more suited to my senses. The header title and description to 58%. Two at 40%. I also made sure that the frames around the header title and description is more apparent by applying color the bottom. By cons I left a border for sections widgets right. Finally, I added the following short code (already present just above, do not add it) which allows me to bring up the menu in the upper right in black:

# header- right a {
color: # 000000;}


a: hover {
color: $ titlecolor;}


a img {
border-width: 0;}

for this result has not been finalized:

Good. So far I have not added much to the basic tutorial. Simply to use, you may notice that your new sections do not include perhaps the way you want really. In general what you are proposing is to put a search link in one section and a menu in another. The menu does not pose a problem, as we shall see, and the search link is a widget "narrow". But in my case, the translation widget Goggle I want to put. Unfortunately, this widget is "thick" and poses a big problem if the offset is, as the top. Only solution I've found so far, put the menu up and down the Google widget. So all is well:

It's nice all this but how do I put it all in our newest section?

Step 6: Go from your dashboard on the layout of your blog. And then, surprise! The three sections of your new header is present in the layout (even if everything is a bit mixed up ...). They are therefore modifiable interactively:

From there, it's easy. For the menu, simply place a "list of links" in the top slot (in the case of a second widget "thick"). Like magic, the links are arranged in rows and not one over the other. Google translation for the widget, simply put quite conventionally element "HTML / Javascript and copy this code . In another widget, another code of course ...



And voila. to see my result, just look at the header of my blog. With you to customize your colors, widgets and even why not the number of your sections etc.etc.

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.