ajouter rangée gadgets en haut ecran

obtenir ces boutons

Ajouter une rangée de gadgets
en haut de l'écran

On peut facilement ajouter une rangée de gadgets en haut de l'écran.

La méthode est expliquée ci-dessous.

Le code ajoute 3 grands gadgets. Mais le nombre et la taille des gadgets sont modifiables en fonction des besoins.

Méthode : dans le "modèle" (template) du blog,

1) après :

#header .description {
...
}

ajouter :

/* Rangée de gadgets en haut de l'écran
--------------------------------------- */
#header2-1,
#header2-2,
#header2-3 {
border:1px solid #bbbbbb;
height: 279px;
padding: 15px;
background: #ecf8ff;
float: left;
margin-top: 15px;
margin-bottom:0px;
}
#header2-1 {
margin-left:10px;
width: 288px;
}
#header2-2 {
width: 294px;
padding-left: 14px;
padding-right: 21px;
margin-left:12px;
}
#header2-3{
width: 274px;
margin-left:12px;
}

2) après :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='tests mise en page blogger (en-tête)' type='Header'/>
</b:section>

ajouter :

<div id='header2'>
<div id='header2-1'>
<b:section class='header2-content' id='header2-1-content'>
</b:section>
</div>
<div id='header2-2'>
<b:section class='header2-content' id='header2-2-content'>
</b:section>
</div>
<div id='header2-3'>
<b:section class='header2-content' id='header2-3-content'>
</b:section>
</div>

5 commentaires:

Mehdi a dit…

BONJOUR,

aurait tu une solution pour faire apparaitre un gadget tout en haut de page avec les nouveau modèle blogger.


je ne trouve pas le bout de code que tu indique sur mon modèle dans le header.


je voudrait mettre mes bouton facebook, twitter et RSS en haut a droite AVANT ma bannière.

merci pour ton blog qui m'inspire chaque jour dans la construction du mien

je te donne le lien de mon blog car je ne me suis pas fait encore indexer par google (je me suis mis en non visible)

http://www.mariage-franco-marocain.com/



bon week end

Meiser a dit…

Avec les nouveaux modèles de blogger, il suffit d'utiliser l'outil de création de modèles de blogger.


behets marion a dit…

bonjour,

J'ai essayer ton code, mais blogger m'affiche un message d'erreur: The element type "div" must be terminated by the matching end-tag ""..

Pourtant j'ai fait un copier coller de ton code Html... Une solution

Merci d'avance

Meiser a dit…

Bonjour.

Il faut revoir les corrections que vous avez apportées. Cela arrive généralement quand on place une apostrophe au milieu des instructions.


Manu lebonfilmleblog a dit…

Il y a un souci avec ce code ou alors je le place mal mais je pense pas merci