Widget "onglet de navigation" / Navigation par onglets

Un tutoriel pour ajouter le widget "Onglets de navigation" à votre blog Blogger.
Ce widget permet de naviguer entre plusieurs contenus grâce à des onglets de navigation exactement comme dans ce blog, en haut à droite.


Vous pouvez inclure dans un onglet n’importe quel type de widget : Libellés en flash, Archives, Tchatche, Articles Récents avec image, Vidéo, Musique, etc.
Vous pouvez également créer autant d’onglets que vous souhaitez et ajouter le widget "Onglet de navigation" autant de fois que vous voulez.
J’ai passé près d’une semaine à préparer ce Tutoriel et je peux vous garantir qu’il est fonctionnel avec n’importe quel blog Blogger. J’ai essayé de rendre le widget facilement personnalisable et de simplifier l’ajout/suppression du contenu des onglets.
Donc j’espère que vous allez apprécier ce widget et qu’il vous sera utile. Surtout, laissez vos impressions en commentaires et n’hésiter pas à me demander de l’aide si vous avez des difficultés.

Installation:
Avant toute chose, commencez par sauvegarder votre Template ou utilisez un blog teste si vous en avez un.
L’installation se fait en 4 étapes : quatre copier/coller dans votre HTML.
Ensuite vous pouvez ajouter /supprimer le contenue d’un onglet et changer les couleurs directement à partir du menu "éléments de page".

Etape 1:
Connectez vous à Blogger, Allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez par exemple : <Variable name=" et juste avant, ajoutez ces lignes:
<Variable name="OngletAPC" description="0nglet couleur arrière plan" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="OngletCB" description="Onglet couleur Bordure" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="OngletC2" description="Onglet Couleur du corps" type="color" default="#ffffff" value="#ffffff">
<Variable name="OngletC3" description="Onglet Couleur entête" type="color" default="#5588aa" value="#5588aa">
Etape 2:
Toujours dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez (Ctrl + F) le code suivant: ]]></b:skin> et juste avant, ajoutez ces lignes :
.tabberlive{margin:0;
padding:5px;
clear:both;
background:$OngletAPC;
border:1px solid $OngletCB;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $OngletCB;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $OngletCB;
border-bottom:none;
background:$OngletC3;
text-decoration:none;
color:$OngletC2;
}
.tabbernav li a:hover {
color:$OngletC3;
background:$OngletC2;
border-color:$OngletCB;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$OngletC2;
color:$OngletC3;
border-bottom: 1px solid $OngletC2;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $OngletCB;
border-top:0;
background:$OngletC2;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $OngletCB;
margin:0 5px;
padding:2px 0 5px 0;
}
Etape 3:
Toujours dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez le code suivant: </head> et juste avant, ajoutez ces lignes (je sais, c'est très long) :
<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
/*==================================================
$Id: tabber.js,v 1.9 2006/04/27 20:51:51 pat Exp $
tabber.js by Patrick Fitzgerald pat@barelyfitz.com

Documentation can be found at the following URL:
http://www.barelyfitz.com/projects/tabber/

License (http://www.opensource.org/licenses/mit-license.php)

Copyright (c) 2006 Patrick Fitzgerald
http://www.LeBlogger.com
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation files
(the "Software"), to deal in the Software without restriction,
including without limitation the rights to use, copy, modify, merge,
publish, distribute, sublicense, and/or sell copies of the Software,
and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
==================================================*/

function tabberObj(argsObj)
{
var arg; /* name of an argument to override */

/* Element for the main tabber div. If you supply this in argsObj,
then the init() method will be called.
*/
this.div = null;

/* Class of the main tabber div */
this.classMain = "tabber";

/* Rename classMain to classMainLive after tabifying
(so a different style can be applied)
*/
this.classMainLive = "tabberlive";

/* Class of each DIV that contains a tab */
this.classTab = "tabbertab";

/* Class to indicate which tab should be active on startup */
this.classTabDefault = "tabbertabdefault";

/* Class for the navigation UL */
this.classNav = "tabbernav";

/* When a tab is to be hidden, instead of setting display='none', we
set the class of the div to classTabHide. In your screen
stylesheet you should set classTabHide to display:none. In your
print stylesheet you should set display:block to ensure that all
the information is printed.
*/
this.classTabHide = "tabbertabhide";

/* Class to set the navigation LI when the tab is active, so you can
use a different style on the active tab.
*/
this.classNavActive = "tabberactive";

/* Elements that might contain the title for the tab, only used if a
title is not specified in the TITLE attribute of DIV classTab.
*/
this.titleElements = ['h2','h3','h4','h5','h6'];

/* Should we strip out the HTML from the innerHTML of the title elements?
This should usually be true.
*/
this.titleElementsStripHTML = true;

/* If the user specified the tab names using a TITLE attribute on
the DIV, then the browser will display a tooltip whenever the
mouse is over the DIV. To prevent this tooltip, we can remove the
TITLE attribute after getting the tab name.
*/
this.removeTitle = true;

/* If you want to add an id to each link set this to true */
this.addLinkId = false;

/* If addIds==true, then you can set a format for the ids.
<tabberid> will be replaced with the id of the main tabber div.
<tabnumberzero> will be replaced with the tab number
(tab numbers starting at zero)
<tabnumberone> will be replaced with the tab number
(tab numbers starting at one)
<tabtitle> will be replaced by the tab title
(with all non-alphanumeric characters removed)
*/
this.linkIdFormat = '<tabberid>nav<tabnumberone>';

/* You can override the defaults listed above by passing in an object:
var mytab = new tabber({property:value,property:value});
*/
for (arg in argsObj) { this[arg] = argsObj[arg]; }

/* Create regular expressions for the class names; Note: if you
change the class names after a new object is created you must
also change these regular expressions.
*/
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');

/* Array of objects holding info about each tab */
this.tabs = new Array();

/* If the main tabber div was specified, call init() now */
if (this.div) {

this.init(this.div);

/* We don't need the main div anymore, and to prevent a memory leak
in IE, we must remove the circular reference between the div
and the tabber object. */
this.div = null;
}
}


/*--------------------------------------------------
Methods for tabberObj
--------------------------------------------------*/


tabberObj.prototype.init = function(e)
{
/* Set up the tabber interface.

e = element (the main containing div)

Example:
init(document.getElementById('mytabberdiv'))
*/

var
childNodes, /* child nodes of the tabber div */
i, i2, /* loop indices */
t, /* object to store info about a single tab */
defaultTab=0, /* which tab to select by default */
DOM_ul, /* http://www.LEblOgger.com */
DOM_li, /* tabbernav list item */
DOM_a, /* tabbernav link */
aId, /* A unique id for DOM_a */
headingElement; /* searching for text to use in the tab */

/* Verify that the browser supports DOM scripting */
if (!document.getElementsByTagName) { return false; }

/* If the main DIV has an ID then save it. */
if (e.id) {
this.id = e.id;
}

/* Clear the tabs array (but it should normally be empty) */
this.tabs.length = 0;

/* Loop through an array of all the child nodes within our tabber element. */
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {

/* Find the nodes where class="tabbertab" */
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {

/* Create a new object to save info about this tab */
t = new Object();

/* Save a pointer to the div for this tab */
t.div = childNodes[i];

/* Add the new object to the array of tabs */
this.tabs[this.tabs.length] = t;

/* If the class name contains classTabDefault,
then select this tab by default.
*/
if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}

/* Create a new UL list to hold the tab headings */
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;

/* Loop through each tab we found */
for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];

/* Get the label to use for this tab:
From the title attribute on the DIV,
Or from one of the this.titleElements[] elements,
Or use an automatically generated number.
*/
t.headingText = t.div.title;

/* Remove the title attribute to prevent a tooltip from appearing */
if (this.removeTitle) { t.div.title = ''; }

if (!t.headingText) {

/* Title was not defined in the title of the DIV,
So try to get the title from an element within the DIV.
Go through the list of elements in this.titleElements
(typically heading elements ['h2','h3','h4'])
*/
for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/<br>/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}

if (!t.headingText) {
/* Title was not found (or is blank) so automatically generate a
number for the tab. http://www.lEBLogger.com
*/
t.headingText = i + 1;
}

/* Create a list element for the tab */
DOM_li = document.createElement("li");

/* Save a reference to this list item so we can later change it to
the "active" class http://www.LEBLOGGER.com */
t.li = DOM_li;

/* Create a link to activate the tab */
DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;

/* Add some properties to the link so we can identify which tab
was clicked. Later the navClick method will need this.
*/
DOM_a.tabber = this;
DOM_a.tabberIndex = i;

/* Do we need to add an id to DOM_a? */
if (this.addLinkId && this.linkIdFormat) {

/* Determine the id name */
aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

DOM_a.id = aId;
}

/* Add the link to the list element */
DOM_li.appendChild(DOM_a);

/* Add the list element to the list */
DOM_ul.appendChild(DOM_li);
}

/* Add the UL list to the beginning of the tabber div */
e.insertBefore(DOM_ul, e.firstChild);

/* Make the tabber div "live" so different CSS can be applied */
e.className = e.className.replace(this.REclassMain, this.classMainLive);

/* Activate the default tab, and do not call the onclick handler */
this.tabShow(defaultTab);

/* If the user specified an onLoad function, call it now. */
if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};


tabberObj.prototype.navClick = function(event)
{
/* This method should only be called by the onClick event of an <A>
element, in which case we will determine which tab was clicked by
examining a property that we previously attached to the <A>
element.

Since this was triggered from an onClick event, the variable
"this" refers to the <A> element that triggered the onClick
event (and not to the tabberObj). http://WWW.LeBlogger.com

When tabberObj was initialized, we added some extra properties
to the <A> element, for the purpose of retrieving them now. Get
the tabberObj object, plus the tab number that was clicked.
*/

var
rVal, /* Return value from the user onclick function */
a, /* element that triggered the onclick event */
self, /* the tabber object HTTP://www.LeBlogger.com*/
tabberIndex, /* index of the tab that triggered the event */
onClickArgs; /* args to send the onclick function */

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;

/* Remove focus from the link because it looks ugly.
I don't know if this is a good idea...
*/
a.blur();

/* If the user specified an onClick function, call it now.
If the function returns false then do not continue.
*/
if (typeof self.onClick == 'function') {

onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);

return false;
};


tabberObj.prototype.tabHideAll = function()
{
var i; /* counter */

/* Hide all tabs and make all navigation links inactive */
for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};


tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }

/* Hide a single tab and make its navigation link inactive */
div = this.tabs[tabberIndex].div;

/* Hide the tab contents by adding classTabHide to the div */
if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};


tabberObj.prototype.tabShow = function(tabberIndex)
{
/* Show the tabberIndex tab and hide all the other tabs */

var div;

if (!this.tabs[tabberIndex]) { return false; }

/* Hide all the tabs first http://www.LeBlogger.com */
this.tabHideAll();

/* Get the div that holds this tab */
div = this.tabs[tabberIndex].div;

/* Remove classTabHide from the div */
div.className = div.className.replace(this.REclassTabHide, '');

/* Mark this tab navigation link as "active" */
this.navSetActive(tabberIndex);

/* If the user specified an onTabDisplay function, call it now. */
if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{
/* Note: this method does *not* enforce the rule
that only one nav item can be active at a time.
*/

/* Set classNavActive for the navigation list item */
this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};


tabberObj.prototype.navClearActive = function(tabberIndex)
{
/* Note: this method does *not* enforce the rule
that one nav should always be active.
*/

/* Remove classNavActive from the navigation list item */
this.tabs[tabberIndex].li.className = '';

return this;
};


/*==================================================*/


function tabberAutomatic(tabberArgs)
{
/* This function finds all DIV elements in the document where
class=tabber.classMain, then converts them to use the tabber
interface.

tabberArgs = an object to send to "new tabber()"
*/
var
tempObj, /* Temporary tabber object */
divs, /* Array of all divs on the page */
i; /* Loop index */

if (!tabberArgs) { tabberArgs = {}; }

/* Create a tabber object so we can get the value of classMain */
tempObj = new tabberObj(tabberArgs);

/* Find all DIV elements in the document that have class=tabber */

/* First get an array of all DIV elements and loop through them */
divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {

/* Is this DIV the correct class? */
if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {

/* Now tabify the DIV http://www.LeBlogger.com */
tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}

return this;
}


/*==================================================*/


function tabberAutomaticOnLoad(tabberArgs)
{
/* This function adds tabberAutomatic to the window.onload event,
so it will run after the document has finished loading.
*/
var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

/* Taken from: http://simon.incutio.com/archive/2004/05/26/addLoadEvent */

oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}


/*==================================================*/


/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}

}

//]]>
</script>
Etape 4:
Toujours dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez le code suivant: <div id='sidebar-wrapper'> et juste après, ajoutez ces lignes :
<div class='tabber'>
<b:section class='tabbertab' id='1Onglet' maxwidgets='1'/>
<b:section class='tabbertab' id='2Onglet' maxwidgets='1'/>
<b:section class='tabbertab' id='3Onglet' maxwidgets='1'/>
</div>
Configuration :
  • Modifier les couleurs du widget:
Pour modifier les couleurs du widget, rien de plus simple. Allez dans "Mise en page", puis  "Polices et couleurs" et vous pouvez choisir la couleur de l'arrière plan, la bordure, le corps et l'entête du widget "Onglets de navigation".

  • Ajouter du contenu dans les onglets:
Allez dans "Mise en page", et  "Éléments de la page" et vous aurez  ceci :

Choisissez un onglet: 1, 2 ou 3 et cliquez sur "Ajouter un Gadget" et c'est tout.

+Plus:
-J'ai appelé ce truc "Onglets de navigation" mais si vous avez un nom plus cool, je le changerais volontiers.
-Je peux intégrer le widget "Libellés avec Animation Flash" en ajoutant quelques lignes dans l'étape 4, donc si ça vous intéresse laissez un commentaire et je ferais une mise-à-jour du tutoriel.
-Pour mettre en place ce widget, j’ai utilisé un Plug-and-Play JavaScript de BarelyFitz (étape 3). Dans les prochaines versions de ce widget j'utiliserais d’autres Scripts qui offrent plus de possibilités.

Laissez vos impressions en commentaires et n’hésiter pas à me demander de l’aide si vous avez des difficultés, ce Widget est tellement indispensable....
Libellés : , Publié le mercredi, juillet 15, 2009
174 Commentaires
  1. Wouw soufiane c'est très d'avoir ça, pris avec moi pour que ça marche

    RépondreSupprimer
  2. Moi je vais te demander de l'aide pour tout autre chose, voici mon site:

    sciencextra.com

    J'y ai mis les articles similaires mais comme tu le vois il n'apparaissent pas en page d'accueil alors que les articles sont en entier, peut tu me dire comment faire pour avoir la liste des articles similaires dés la page d'accueil?

    Merci

    ps: page avec le code



    http://blogger-au-bout-du-doigt.blogspot.com/2008/03/liste-darticles-similaires-la-fin-de.html

    RépondreSupprimer
  3. J'ai essayé et cela fonctionne, probléme l'entête du site diparait

    http://blogixtra.blogspot.com/

    RépondreSupprimer
  4. @ Panzer Marechal De Internaaze

    Pour les articles similaires t'as qu'à demander à la source, si ça répond pas je pourrais voir ce que je peux faire.

    Comme tu utilises LinkWithin tu pourrais regarder ça : Afficher un Widget dans des pages specifiques du Blog

    RépondreSupprimer
  5. @ Panzer
    J'ai ajouté quelque explication dans l'étape 4. ça devrais t'aider :)

    RépondreSupprimer
  6. @ nico-usa
    Il faut juste mettre un titre au widget que tu mets dans les Onglets.
    Quand tu ajoutes un widget tu ne laisse pas la champs "Titre" vide :)

    RépondreSupprimer
  7. Oui c'est fait, mais Rodney ne réponds pas et de mon côté je séche d'ou ma demande auprés de toi lorsque je suis tombé sur ton blog.
    Bien à toi


    Le 16 juillet 2009 11:42, Soufiane LeBlogger a écrit :

    Soufiane LeBlogger a laissé un nouveau commentaire sur le message "Widget "onglet de navigation" / Navigation par ong...":

    Panzer Marechal De Internaaze

    Pour les articles similaires t'as qu'à demander à la source, si ça répond pas je pourrais voir ce que je peux faire.

    RépondreSupprimer
  8. @ Panzal Marechal De Internaaze
    Je t'ai déjà répondu Panzer :) t'as vue le deuxième lien que je t'ai envoyé :?

    Bref, afficher les articles similaires dans la page d'accueil et dans les autres page il suffit de supprimer la première condition b:if
    C'est à dire que tu supprimes la première et la dernière ligne du code que tu as ajouté à ton Template :
    <b:if cond='data:blog.pageType == "item"'>
    et </b:if>

    Dit moi si ça marche et si c'est ce que tu voulais :)

    RépondreSupprimer
  9. Merci de ta réponse mais malheureusement cela ne marche pas, en fait tu a bien les articles similaires en page d'accueil mais 5 titres d'articles de TOUTES les rubriques et en plus sur le premier articles.

    Photo ici sur mon site test:



    http://politiquedefrance.blogspot.com/2009/07/articles-similaires.html

    RépondreSupprimer
  10. Merci soufiane c'est vraiment le widget insidpensable dans blogger, meme Wordpress n'a pas un widget aussi beau et pratique, j'ai galéré un peu avant de trouver le bon endroit où placer le code de l'étape 4 mais j'y suis arrivé et je sui vraiment très content.

    RépondreSupprimer
  11. en j'ai déjà essayé des widget comme celui si mais c'etait trop compliquer à utiliser, pour ajouter un wudget dans un onglet il fallait modifier le Template, et les couleurs je t'en parle pas,
    encore merci pour LeBlogger, et j'attend ce que donnerais les prochaine versions :D

    RépondreSupprimer
  12. salut soufiane ...

    je serai ravi de pouvoir utiliser cette astuce, j'ai, il me semble, suivi a la lettre ton tuto mais rien ne s'affice ... je suis pas un grand bidouilleur de code , mais peut etre n'est il pas compatible avec d'autre code que j'ai déja mis, toujours est il que si tu pouvais jeter un oeil sur mon blog et au besoin je t'envoie mon template ... si tu n'as pas le temps pas grave ... merci d'avance .
    http://hologique.blogspot.com

    RépondreSupprimer
  13. @ Yro
    Dans ton blog je vois le widget !
    Donc ça marche ????

    RépondreSupprimer
  14. ha tiens !?
    j'ai déjà vu des gens qui disait ne pas voir le rendu sur leur blog, dans tes commentaires, étrange , quand je vais dans mise en page , je vois bien le rajout de 1 2 3 et la possibilité de mettre le gadget , mais dans ma page rien , enfin je vais nettoyer le cache et je verrai bien ...

    RépondreSupprimer
  15. je viens de tester sur un autre pc et là oui ca marche

    RépondreSupprimer
  16. @ Yro
    hein? Le cache ?
    ça marche maintenant, tu confirmes ??

    RépondreSupprimer
  17. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  18. Bravo ! Je viens d'installer ces onglets sur mon blog et ça fonctionne à merveille. De plus, cela fait un peu respirer la mise en page du blog et le rend plus lisible. Merci beaucoup.

    RépondreSupprimer
  19. très bon widget
    tuto très bien fait, ça marche du premier coup.
    j'ai vu que Karine a réussi à placer le widget ailleurs dans sa page,
    quelques infos pour moi SVP
    merci

    @+

    RépondreSupprimer
  20. j'ai réussi, avec pas mal de prise de tête.
    vous pouvez voir ce que ça donne
    http://mr-do-just-for-fun.blogspot.com

    j'ai testé également plusieurs widgets dans un onglet, mais le problème est que je n'ai qu'un seul titre.
    donc pour l'instant je met en attente

    merci encore.
    @+

    RépondreSupprimer
  21. Bonjour,

    j'aimerai savoir comment insérer du code long comme tu l'as fait dans un post. C'est-à-dire l'insérer dans un cadre comme pour
    les étapes 2 et 3?

    Merci

    RépondreSupprimer
  22. @ Mя Đo™ јuŝт ғøя ғци
    MERCI c'est trop cool

    RépondreSupprimer
  23. C'est moi l'anonyme... peux-tu répondre stp?

    Merci

    RépondreSupprimer
  24. Je comprend pas pourquoi tu veux pas répondre?

    T'as laissé que des anonymes pose des questions, c'est pour cela que j'ai poster sous forme anonyme...

    C'est à cause de ça que tu veux pas répondre? Je suis en train de faire un site, je peux pas mettre plus d'information.

    Si quelqu'un d'autre sait la réponse à ma question, pouvez-vous me la dire?
    Sinon Soufiane tu peux me le dire...

    Merci

    RépondreSupprimer
  25. C'est n'importe quoi!!

    Alors là vraiment je suis déçu... autant je trouve le blog très instructif avec plein de très bonnes astuces, autant la gestion des commentaires par SOUFIANE me déçoit...

    Je pose une simple question:
    "Comment insérer du code long comme tu l'as fait dans un post. C'est-à-dire l'insérer dans un cadre comme pour
    les étapes 2 et 3?"

    Et je reçois comme réponse: "Moi pas Répondre!"

    ?????

    Si tu tiens un blog Soufiane c'est pour aider les personnes à solutionner leurs problèmes!

    Peux-tu me répondre stp, ça doit te prendre au maximum 1 minute de répondre

    MERCI j'en ai vraiment besoin.

    A plus... je reviendrais de toute façon, c'est le meilleur blog pour blogger.

    RépondreSupprimer
  26. @ Juan
    par exemple:

    <div class="separator" style="border: 0.5px solid rgb(128, 0, 255); height: 100px; margin: 0em; overflow: auto; padding: 5px; width: 540px;">

    bal bal bla bla bla


    </div<

    RépondreSupprimer
  27. Un grand MERCI Soufiane!

    RépondreSupprimer
  28. @ Juan
    Essai de laisser un commentaire dans un autre blog pour blogger, si on te répond c'est déjà trop bien.
    Si en te répond dans moins d'une semaine c'est le top du top.

    J'ai déjà eu de sale expérience avec des petit connard d'annonymes, c'est pourquoi je t'ai demandé de laisser ton blog, mais tu as changé annonyme par juan ce qui revien au même, tu trouves pas ?

    Enfin, j'ai répondu du mieux que j'ai pu à ce que tu me demandais et j'espère que ça te sera utile.

    RépondreSupprimer
  29. bonjour
    comment ajouter les boutons qui sont sous le titre partagez cet article
    merci
    eric

    RépondreSupprimer
  30. Salut Soufiane,

    Tout d'abord feleication pour ton blog! Y'a de l'infos!

    Je pense avoir suivi les 4 etapes mais je ne peux pas bouger le widget. Il est coller en haut a gauche et j'aimerais bien qu'il soit sur toute la largeur juste en dessous du titre. Est ce possible?

    Merci pour ton aide.

    Antoine

    RépondreSupprimer
  31. Bonjour Soufiane, J'ai testé les onglets dans un "blog test", comme d'habitude ça fonctionne bien très bien, installation propre :)
    Mais c'est au niveau de l'ergonomie que ça me pose un problème (il en faut tjs!)

    Ma sidebar n'étant pas très large et mes libellés étant eux plus nombreux et plus longs, je me retrouve avec les onglets sur plusieurs lignes, normal. Mais ils deviennent très peu lisibles car ils se chevauchent d'une ligne sur l'autre.
    Comment les espacer ?

    Merci d'avance

    Eric Tchi.

    ps: Est-ce qu'on peut placer ce widget "onglet" juste sous le header (je l'ai fait avec un autre widget html)

    RépondreSupprimer
  32. Super ça marche pour 3 onglets. Je n'arrive pas à en rajouter d'autres, comment procéder car quand je vais sur "élément de la page" on ne propose rien, enfin je n'ai pas trouvé. Merci pour ta réponse.
    ckkv

    RépondreSupprimer
  33. @ ckankonvaou
    Pour ajouter un 4èm Onglets, il suffit d'ajouter une quatrième ligne dans l'étape 4 :
    <b:section class='tabbertab' id='4Onglet' maxwidgets='1'/>

    RépondreSupprimer
  34. J'ai bien réussi à mettre les onglets et à en rajouter sur un blog d'essai, là :
    http://monblogdefolle.blogspot.com/
    Je voudrais savoir si on peut placer les onglets ailleurs qu'en en-tête ?
    Merci soufiane tu nous rend bien service.
    Les Emoticons j'ai réussi aussi, mais ça avait enlevé tout ce que j'avais fait pour les onglets...... merci de ta réponse si tu peux.

    RépondreSupprimer
  35. J'ai aussi réussi à mettre de onglets sur le blog ckankonvaou, mais ils ne peuvent se placer que dans la barre latérale, ce qui n'est pas pratique, j'ai tout viré !

    RépondreSupprimer
  36. @ckankonvaou Je pense qu'il y a moyen de mettre les onglets en widget placé sous le header....
    .... mais avant de passer l'automne (et peut-être l'hiver ) dessus je laisse Soufiane nous répondre ;)

    RépondreSupprimer
  37. @ Eric Tchijakoff
    @ Ckankonvaou
    Oui bien sur tu peux le placer où que tu veux, je vais essayer d'expliquer ça dans une MAJ du Message ....

    RépondreSupprimer
  38. je trouve pas Variable name=" dans la 1er etapes

    RépondreSupprimer
  39. @ trapatouni
    de quel blog tu parles ? dans http://invitationaulatin.blogspot.com/ tu as des <Variable name ........

    RépondreSupprimer
  40. nn mon frer je parle 2 elmezoued.blogspot.com

    RépondreSupprimer
  41. @ Eric Tchijakoff
    @ Ckankonvaou
    Désolé, j'ai oublié ou répondre ....
    tu vas dans "Mise en page", "Modifier le code HTML", et sans cocher la case "Développer des modèles de gadgets", tu recherches ce code :

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

    Et juste après tu ajoute le code de la 4ième étape.
    c'est tout, pas besoin de modifier quoi que ce soit d'autre ...

    Et dites moi si ça marche ...

    RépondreSupprimer
  42. Bonjour, moi j'ai essayé mais les onglet ne sont pas il faut et je n'arrive pas a changer le nom des onglets. Comment on fait pour paramétrer ce que l'on veut dans chaque onglet? Je débutant je sais, pardon.

    RépondreSupprimer
  43. Ok, merci Soufiane pour l'info concernant le positionnement des onglets de navigation sous le header. J'ai testé, ça marche. Pour le moment je vais rester avec mes onglets sur le coté.
    Comme tu peux le voir j'ai modifié les marges afin d'avoir le widget "Onglet" à l'intérieur de ma sidebar.

    www.leutchi.fr

    RépondreSupprimer
  44. @ Eric Tchijakoff
    Ok, je pense que c'est mieux ....
    Le prochain widget serais mieux adapté sous le header, si je fini un jour par le publier .....

    RépondreSupprimer
  45. Bonjour
    serait-il possible de mettre à chaque fin de page, les numéros des pages suivantes.
    (à la place de messages anciens, messages suivants)
    Merci pour la réponse

    RépondreSupprimer
  46. Bonjour,

    Je sais pas ou je pouvais poster cela mais est-il possible d'exporter un blog vers blogger ??

    Mon blog se trouve sur kazeo et je voudrais migrer vers blogger.

    merci @+

    RépondreSupprimer
  47. @ Tortank 1977
    olalala, kazeo (c'est quoi ce truc ) !!!!
    Je ne sais pas aucune idée pour l'instant, je te tiens au courant si j'apprends quelque chose.....

    RépondreSupprimer
  48. @ UDS
    Oui c'est possible, je prépare ça .......

    RépondreSupprimer
  49. @ Sofiane ;;) oui oui c'est une plateforme blog mdr

    mais je ne sais pas modifier le code html comme sur blogger et j'ai pas une aide précieuse comme sur ton blog.

    et transférer le tout aaarggghhh + de 2000 articles :((

    j'ai vu qu'il fallait un fichier .xml pour transférer j'ai trouver un site qui permettait de le transformer mais uniquement pour wordpress.

    @+

    RépondreSupprimer
  50. Hello Soufiane le blogger.
    Je n'avais pas vu ta réponse, je vais essayer pour les onglets et je te dis ça quand je l'aurais fait. pour le moment stand by !

    RépondreSupprimer
  51. @ Tortank1977
    Regard des les menus de kazeo si il y a un lien pour télécharger ton blog....
    S'ils n'offrent pas la possibilité de télécharger le contenu du blog, c'est mort....

    RépondreSupprimer
  52. eh bhen non c'est mort snif bon bhen je vais prendre mon courage

    RépondreSupprimer
  53. @
    tu vas faire quoi avec ton courage ??? 2000 copier/coller ???

    RépondreSupprimer
  54. Hello soufiane ! je me suis lancée dans les "onglets" comme tu l'as indiqué... pour que cela apparaissent dans le centre et non dans la side bar.... mais je ne l'ai plus sous forme d'onglet, si je complète les "ajouter gadgets" tout se retrouve à la queue leu leu.... mais que faire ?
    Merci de ta réponse toujours judicieuse.
    Ckkv

    RépondreSupprimer
  55. s'kuse, c'est bon, j'avais mal recopié le code de l'étape 2, je n'étais pas allée jusqu'au bout.... Merci encore Soufiane le blogger

    RépondreSupprimer
  56. TROP TROP FORT !!!

    TROP BIEN MERCI SOUFIANE !!

    T'ES LE ROI !!

    RépondreSupprimer
  57. Re Sofiane !!

    Là j'ai vraiment besoin de toi sur ce coup là !!

    J'ai installé le widget mais je viens de m'apercevoir qu'en cliquant sur un lien dans l'onglet "a voir" par exemple "argent colloidal" mon article n'apparait pas alors que mon message est bien enregistrer...alors que quand je clic sur "The signs" tout les liens apparaissent...
    Par contre en changeant la date de mon message par exemple la mettre à aujourd'hui le message apparait bien dans les articles récents...

    D'ou vient le problème ??

    Merci à toi, d'essayer de m'aider car j'avoue que mes visiteurs ne doivent rien comprendre.

    MON BLOG: http://jabamiah-antinouvelordremondial.blogspot.com/

    RépondreSupprimer
  58. @Jabamiah
    Je vois que ton blog est OK maintenant, désolé j'ai pas pû répondre avant ....
    C'était quoi le problème ??? j'ai vu que tu as enlevé le widget ....

    RépondreSupprimer
  59. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  60. Bonjour Soufiane.

    je viens de démarrer un nouveau blog sur Blogger, et par là même, j'ai utilisé ton chouette tuto pour organiser ce blog par onglets.
    Jusqu'ici, tout est ok, sauf que:
    J'en suis à l'étape de mise en page de chaque onglet, afin de définir la fonction de 1, 2 et 3.
    Et là, je ne sais quel widget associer à chacun d'eux, afin que cela soit à chaque fois une page indépendante par rapport au fil du blog principal qui s'ouvre
    (comme par exemple sur ce blog: http://www.sacadidieshop.com/ )
    ...Avec photos, liens (en fait, 1=Présentation, 2=Evènements, 3=Liste de shops...)
    Pour l'instant, j'ai choisi le widget "éditer du texte", mais le texte en question semble apparaitre en dessous de l'onglet, et non sur une page annexe...
    Merci à toi par avance de m'éclairer sur les bons outils à employer...et encore merci pour ce tutoriel! ^^

    Mon blog: http://www.missdigriz.com/

    RépondreSupprimer
  61. Merci beaucoup pour ce tuto très bien fait. Même les novis, comme moi, pourrons insérer des onglets de navigation dans leur blog.

    Merci encore.

    RépondreSupprimer
  62. hello

    Mon blog est http://nutritionetsante.blogspot.com/

    Peux tu m'expliquer comment ajouter des sous onglets avec 4/5 catégories dans chaque!

    Merci

    RépondreSupprimer
  63. salut soufiane :D
    merci :)
    comment je peut l'ajouter a cette place =)
    http://i48.tinypic.com/iwojo4.jpg

    RépondreSupprimer
  64. Hello, mon blog est http://lescreationsmichelle.blogspot.com/
    j'ai essayé par 3 fois de mettre suivre ton tuto pour ajouter des onglets et il me reviens toujours avec le message suivant:
    Impossible d'enregistrer votre modèle

    Veuillez corriger l'erreur ci-dessous et renvoyer votre modèle.
    Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
    Message d'erreur XML : The element type "script" must be terminated by the matching end-tag "".

    RépondreSupprimer
  65. Je viens de voir le blog à Tine (qui est super en passant!) et j'aimerais avoir mes onglets comme elle, en dessous du titre. Comment faire (suite de mon message d'avant) merci!

    RépondreSupprimer
  66. @Michelle
    Tu as oublié de copier le </script> dans l'étape 3 ;)
    j'ai vu d'onglet dans le blog de Tin ;)

    RépondreSupprimer
  67. Bonjour Soufiane.
    Comme j'ai changé de template sur mon blog, j'ai du recommencer cette manip pour y rajouter des onglets.
    Seulement, souci, le code à retrouver de l'étape 4: div id='sidebar-wrapper'> n'existe pas et est introuvable dans l'ensemble de mon code html.
    Ou dois je donc placer le script? Y a til un terme équivalement à rechercher?
    Merci par avance de ton aide.

    http://www.missdigriz.com/

    RépondreSupprimer
  68. comment faire pour ajouter votre botton " lire la suite " dans un texte ?
    mercie d"avance
    vous etes le meilleur

    RépondreSupprimer
  69. ;) ;) ;)
    Tape lire la suite dans le widget de recherche....

    RépondreSupprimer
  70. Bonjour Soufiane,
    Tout d'abord bonne année à toi et merci pour tes tutos que je consulte régulièrement.
    Ici, j'ai tout bien fait comme tu l'as expliqué pour installer mes onglets, mais y'a certainement une manip qui a dû m'échapper.
    Lorsque je coche mon numéro d'onglet que j'ajoute un gadget (je suppose que c'est HTML/JavaScript) je mets le code de ma page (http://histoiresdefemme.blogspot.com/)pour ma page d'accueil par exemple, il ne se passe rien lorsque je clic sur l'onglet correspondant et ceci pour tous les onglets....est-ce grave docteur?
    Enfin en bref, ça marche pas, dois-je désinstaller le widget et tenter autre chose?
    Merci d'avance.

    RépondreSupprimer
  71. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  72. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  73. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  74. bonjour, j ai suivi a la lettre ce tutoriel et je n arrive pas a trouver pour faire la 4é partie . je ne trouve pas .pourriez vous s il vous plait m aider . cela des jours que je galère... merci encore

    RépondreSupprimer
  75. Bon j y suis quand meme arrivé. mais maintenant mon souci c'est que je souhaiterais que cette barre d'onglets soit au dessus des messages et non en dessous. comment faire..?? merci .

    RépondreSupprimer
  76. @ilathan
    Regard ce commentaire : http://www.leblogger.com/2009/07/onglet-navigation-widget-blogger-tabbed.html#c1072883159531911560

    RépondreSupprimer
  77. Bonjour.

    Merci pour ce billet fort utile et intéressant.

    Chez moi tous semble marcher cependant le soucis et que ma barre des onglets ce retrouve au milieu de la page coupant en deux mon blog.

    C'est l'etape 2 qui foire semble t'il.

    En fait j'aimerais la mettre tout en haut juste en dessous de l'entête.

    Voici mon blog: http://sveliamoci.blogspot.com/

    Merci d'avance

    RépondreSupprimer
  78. je ne comprend pas ce que tu ceux dire et je ne vois rien dans ton blog ;)

    RépondreSupprimer
  79. bonjour soufiane et tout d'abord félicitation pour ton blog

    comment rajouter des onglets suplémentaire stp ?

    mon blog : http://select-ddl.blogspot.com/

    RépondreSupprimer
  80. J'ai enlevé la barre avec les onglets 1 2 3 car elle apparait au milieu de mon blog le coupant en deux:

    http://nsa12.casimages.com/img/2010/02/15/100215050228901592.jpg

    Je me retrouve avec les article au dessus et la barre latéral en dessous.

    Il doit probablement y avoir quelque chose a modifier dans le html pour placer la barre en dessous de l'en tete mais je ne sais pas comment m'y prendre.

    RépondreSupprimer
  81. Voilà, j'ai de beaux onglets tout neufs.
    C'est tout simplement génial (oui je sais, je l'ai déjà dit mais depuis que j'ai découvert ton blog, je suis comme un petit fou...)

    RépondreSupprimer
  82. Tiens, pour une fois, j'ai une question : j'ai testé les onglets en les mettant soit sous le header, soit dans ma barre latérale et ça marche nickel mais je voudrais savoir si je peux les mettre sous l'élément "Messages du blog" ?
    Si c'est possible, peux tu me dire comment m'y prendre ?

    RépondreSupprimer
  83. @SELECT-MU
    Question déjà posée plusieurs fois, regard les commentaires précédents, Il faut ajouter une ligne dans l'étape 4

    RépondreSupprimer
  84. bonsoir soufiane, j'avais déjà compris la manip mais malheureusement je ne sait pas positionner le code car la structure du code html a changé :


    ou dois je mettre le code :

    je voudrais faire une cinquantaine d'onglets, comment faire ?
    Merci pour tes précieux conseils

    RépondreSupprimer
  85. <div class='tabber'>
    <b:section class='tabbertab' id='1Onglet' maxwidgets='1'/>
    <b:section class='tabbertab' id='2Onglet' maxwidgets='1'/>
    <b:section class='tabbertab' id='3Onglet' maxwidgets='1'/>
    <b:section class='tabbertab' id='4Onglet' maxwidgets='1'/>
    <b:section class='tabbertab' id='5Onglet' maxwidgets='1'/>
    </div>

    RépondreSupprimer
  86. merci soufiane tout marche nickel !

    RépondreSupprimer
  87. bonjour et oui encore moi
    svp sofiane peux tu me dire comment présenter les onglets comme si c'était une barre de navigation
    le "résultat" du changement de "page" serait au même endroit
    tout ca pour quoi ?
    parce que j'ai une cinquantaine d'onglets et je veux aérer la présentation
    merci a toi par avance

    RépondreSupprimer
  88. J'ai enlevé la barre avec les onglets 1 2 3 car elle apparait au milieu de mon blog le coupant en deux:

    http://nsa12.casimages.com/img/2010/02/15/100215050228901592.jpg

    Je me retrouve avec les article au dessus et la barre latéral en dessous.

    Il doit probablement y avoir quelque chose a modifier dans le html pour placer la barre en dessous de l'en tete mais je ne sais pas comment m'y prendre.

    RépondreSupprimer
  89. @SELECT-MU
    Je ne sais pas ce que tu essai de faire mais 50 onlets :-L il faudra une heure pour que le widget soit chargé !!!!!!

    RépondreSupprimer
  90. Bonsoir soufiane
    Svp vas sur http://select-ddl.blogspot.com/
    je m'en sers pour afficher les flux rss de différents blogs ou site
    merci et svp peux tu me donner des pistes ...

    RépondreSupprimer
  91. bonjour soufiane
    svp peux tu répondre à mon dernier commentaire ?

    RépondreSupprimer
  92. Ce commentaire a été supprimé par un administrateur du blog.

    RépondreSupprimer
  93. bonsoir soufiane
    peux tu m'expliquer comment modifier le positionnement des différents onglets
    merci et bravo pour ton site

    RépondreSupprimer
  94. Salut

    J'ai mis ton widget sur mon blog teste et sa marche nickel par contre j'ai une question, tu as deja répondu plus haut mais comme tes com's on était supprimer je vois pas ta réponse ...

    Comment fait ton pour changer l'emplacement du Widjet ? (Je le voudrai dans ma colonne de droite au milieu)
    Il est possible de cacher les libeller et qu'il s'affiche seulement si on clique sur le titre ?

    Merci :)

    RépondreSupprimer
  95. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  96. Je sais que tu as beaucoup de commentaires questions, j'attends ta réponse pour minimum le déplacer sur le milieu de ma colonne de droite pour remplacer les libeller nuage flash qui ne fonctionne plus.

    Merci

    RépondreSupprimer
  97. @Juliiiia
    Envoi moi ton code HTML, c'est plus rapide, et je te dirais où placer le code de la 4ième étape pour pour mettre le widget au milieu du sidebar.

    Dit moi aussi exactement où tu veux l'afficher, en dessous de VOTEZ POUR LE SITE MERCI ;)

    Utilise le formulaire de contact ...

    RépondreSupprimer
  98. Je tes envoyer mon code par E-mail merci beaucoup :)
    Je voudrai l'afficher a la place de libeller que j'ai deja sur mon blog sous "Liens divers"

    http://movies-city.blogspot.com/

    RépondreSupprimer
  99. Salut,
    Est il possible d'ajouter des sous menu a certains onglets?
    Merci

    RépondreSupprimer
  100. salut Sofiane

    est ce que je peux trouver un tuto pour créer un menu accordéon sur blogger avec jquery

    merci

    RépondreSupprimer
  101. @xtremfirst
    Tu peux utiliser n'importe quel tuto jQuery dans Blogger !!!

    RépondreSupprimer
  102. Salut Soufiane,

    Je t'apporte ma p'tite contribution. (J'm'amuse encore a chipoter =)) )

    class='tabbertab tabbertabdefault'

    tabbertabdefault a pour fonction d'ouvrir en premier lieu l'onglet qui a reçu cette classe...

    Petit aperçu : http://coupecourt.blogspot.com/2010/04/nox.html (en dessous de la vidéo ;-) )

    Bonne journée...

    RépondreSupprimer
  103. salut Soufiane
    je cherche un tuto bien détaillé pour le menu accordéon.
    j'ai essayé plusieurs tuto mais ... b-(

    RépondreSupprimer
  104. ça va Soufiane j'ai trouvé un tuto, il marche bien :D

    merci pour tes tutos que je consulte régulièrement.

    RépondreSupprimer
  105. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  106. salut moi je ne trouve pas la valeur en question dans mon html j'ai développer les widjet mais rien a faire http://agadirevent.blogspot.com

    RépondreSupprimer
  107. Super tuto, mais j'ai une petite question: comment faire pour que l'onglet dirige vers une page externe ? ( en l'occurence vers une flux podomatic)
    merci !

    RépondreSupprimer
  108. Ce commentaire a été supprimé par un administrateur du blog.

    RépondreSupprimer
  109. Bjr, j'ai un problème dès l'étape 1 :(

    Ce message s'inscrit lorsque je veux enregistrer les modifs :

    "Impossible d'enregistrer votre modèle
    Veuillez corriger l'erreur ci-dessous et renvoyer votre modèle.
    Déclaration de la variable incorrecte dans l'apparence de page : Entrez L'analyse des variables du thème a échoué, car elles sont incorrectes."

    Un petit coup de main?

    Merci !

    RépondreSupprimer
  110. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  111. salut Soufiane;je n'arrive pas à passer l'etape4;il n'existe pas chez moi ce code 'sidebar-wrapper'

    RépondreSupprimer
  112. bonsoir soufiane
    le code de la 4eme étape est introuvable, marci de ta réponse

    RépondreSupprimer
  113. Salut Soufiane,

    Moi non plus je ne trouve pas le code de l'étape 4, pourtant j'ai bien cherché ! Peut-être a-t-il été supprimé par blogger et remplacé par un autre code... Peux-tu nous l'indiquer si tu le connais ?

    Merci !

    RépondreSupprimer
  114. Salut Soufiane
    Le code de l'étape 4 n'existe pas.

    RépondreSupprimer
  115. La même pour moi le code 4 n'existe pas? Pourrai tu nous éclairer? MErci Soufiane!

    RépondreSupprimer
  116. Pareil....pas de Sidebar-wrapper sur un template modifié déjà.
    Merci pour ton aide

    RépondreSupprimer
  117. ce bien merci mais je pense que j'ais un pb ):

    RépondreSupprimer
  118. merci pour cet article

    RépondreSupprimer
  119. Dommage !
    j'ai un blog trois colonnes et je ne peux pas appliquer l'étape 4 car le "div id='sidebar-wrapper'" n'est pas présent dans mon html.
    Aurez tu une idée d'emplacement du code 4 ? stp Soufiane

    RépondreSupprimer
  120. Hello !
    J'ai le même problème que Rayon Bleu, j'utilise le design simple et je ne trouve pas le code de l'étape 4 dans mon html :( ...

    RépondreSupprimer
  121. Bonjour,
    J'ai le même problème! Une solution?

    RépondreSupprimer
  122. Bonjour Soufiane,

    je suis un futur nouveau blogger, j'ai découvert ton super blog depuis un moment et je le parcours beaucoup.

    Je remarque que le fil de cet article n'as plus eu e réponse depuis un bon moment, mais bon, je m'essaie quand même.

    J'ai exactement le même problème que les derniers messages : je ne trouve pas où insérer l'étape 4

    voici l'adresse de mon blog, qui n'est pour le moment qu'en phase de test.

    si tu pouvais m'aider je t'en serait très reconnaissant.

    RépondreSupprimer
  123. euhn dsl j'avais oublié l'adresse de mon blog
    (qui n'est qu'un blog d'essaie)

    http://tout-et-anything.blogspot.com/

    RépondreSupprimer
  124. Rebonjour

    au sujet de l'absence de la ligne de code :

    div id='sidebar-wrapper'

    nécessaire à l'étape 4, j'ai fait deux tests.

    1- j'ai créer un nouveau blog test et j'ai recherché cette ligne de code. Je ne l'ai pas trouvée. j'ai ensuite appliqué tous les modèles proposé par l'Outil de création de modèles et la ligne de code ne s'y trouvait pas non-plus.

    2- j'ai téléchargé une ancienne sauvegarde de mon modèle de blog (il y a qualques années je m'étais créé deux pages blog, que je n'avais finalement jamais utilisées) et ...

    la ligne en question s'y trouvait bien.

    donc, j'en déduit que Google à changé le code de leurs pages de base et que ta méthode convenait aux anciens modèles.

    Comme je ne m'y connais pas, en langage html, je ne sais pas si ça change qqc que j'utilise l'ancien code pour débuter ma page.
    Est ce que je vais rencontrer des limitations à cause de ce vieux code, je ne le sais pas. On verra ça.

    J'espère que ça expliquera un peu pk certaine personne ont eu ce problème.

    RépondreSupprimer
  125. A cause du grand intérêt de cette astuce que tu as publiée, d'avoir des onglets, ça serait quand même super si tu pouvais la mettre à jour.

    Merci d'avance et bonne suite.

    RépondreSupprimer
  126. bonjour, je rencontre les memes difficultés pour l'étape 4 de ton astuce. J'ai crée mon blog tour du monde et cet outil m'est indispensable pour une bonne organisation des differents pays visités... Merci d'avance et félicitations pour votre blog.

    RépondreSupprimer
  127. slt, moi aussi je ne trouve pas div id='sidebar-wrapper'.

    pourrais tu nous donner une alternative.

    merci d 'avance. Et merci pour tt tes autres tutos!!!!

    RépondreSupprimer
  128. Votre réponse ici : http://www.leblogger.com/2009/07/onglet-navigation-widget-blogger-tabbed.html#c1072883159531911560

    RépondreSupprimer
  129. Bonjour Soufiane,
    Avant tout un grand merci pour ton travail, j'ai récemment voulu utiliser ton template Fullminima que je trouve très bien, mais j'ai quelques erreurs à corriger:
    1. La barre de navigation par onglets n'apparaît plus sur mon template, pourrais-tu me renvoyer le code et la démarche à suivre pour le remettre à sa place?
    2. J'ai une erreur de code "-->" qui apparaît sous les titres de mes articles, je voudrais y faire apparaître une annonce AdSense, peux-tu me dire comment je dois faire, et surtout où je dois mettre le script Adsense?
    Merci !
    Mon blog est http://comparerlescouts.blogspot.com

    RépondreSupprimer
  130. bonjour soufiane , je ne comprend , pas , je fais ( la touche avec le logo pomme + f ) je tappe dans le truc de recherche qui s'affiche en haut la phrase rouge de l'etape 4 mais il ne la trouve pas ???
    que faire ?

    RépondreSupprimer
  131. Bonjour Soufiane...

    J'ai essayée toutes les étapes mais cela ne fonctionne pas, quand je souhaite sauvegarder ma page, il s'affiche :

    "Impossible d'enregistrer votre modèle
    Veuillez corriger l'erreur ci-dessous et renvoyer votre modèle.
    Déclaration de la variable incorrecte dans l'apparence de page : Entrez L'analyse des variables du thème a échoué, car elles sont incorrectes. :"

    j'ai également vérifié si je n'avais pas oublié un mot ou une phrase, mais tout y est. Ou se trouve le problème ?

    pour l'étape 4 j'ai fait un peu n'importe quoi. Je l'est fait en premier avant les autres sinon je n'aurais pas pût y passer, j'ai pris exemple sur votre commentaire un peu plus haut ou vous dîtes qu'il ne faut pas cocher la case de développement de modèles.

    RépondreSupprimer
  132. Salut Sofiane,

    excellent site ! Merci pour toutes ces astuces.

    J'ai un problème depuis que j'ai ajouté des widjets.

    Le champs recherche ne semble plus fonctionner. As-tu une idée ?

    Merci de ton aide

    RépondreSupprimer
  133. Bonsoir

    L'étape 4 n'a pas été possible, texte non trouvé
    A moins qu'il ne faille sauvegarder entre chacune ...

    Dommage,
    mais je ré-essauerai !!

    D

    RépondreSupprimer
  134. Salut Sofiane,
    Comme tout les autres j'ai un problème avec l'etape 4 si tu pouvais y remédié je te serais reconnaissant :)
    Bonne continuation

    RépondreSupprimer
  135. J'ai aussi un problème avec la première étape:
    j'ai copier le code, et je l'ai collé au-dessus de <Variable name="
    j'enregistre, et la problème l'ordinateur m'affiche:
    "Déclaration de la variable incorrecte dans l'apparence de page : Entrez L'analyse des variables du thème a échoué, car elles sont incorrectes. :"
    Merci de répondre à mes 2 messages :)

    RépondreSupprimer
  136. bonjour tt le monde

    meme probleme..

    RépondreSupprimer
  137. Le même problème que tout le monde, il y à du avoir une mise a jour de Blogger qui modifie le HTML et donc le tuto n'est plus correct. Attendons une modif d'une âme charitable.

    RépondreSupprimer
  138. j'ai essayé, mais ça ne marche pas. Ca me donne erreur.

    RépondreSupprimer
  139. Bonjour, j'aurai une petite question comment as tu fait pour insérer tes codes dans le rectangle blanc (comme dans tes étapes 1,2,3 et 4) s'il te plait je trouve nul part la réponse alors cela m'aiderai beaucoup merci par avance .

    RépondreSupprimer
  140. Salut ! J'ai un problème avec l'étape 4 ;) Le code à rechercher ne s'affiche pas .. Merci de m'aider le plus tot possible !

    RépondreSupprimer
  141. idem, pas de code pour l'étape 4 donc je sais rien faire.... tjs pas de solution ? merci d'avance !!

    RépondreSupprimer
  142. sinon ton tuto est vraiment genial, bravo mais je bloque aussi a cette étape, je n'arrive pas a trouver cette liqne :S

    RépondreSupprimer
  143. Bonjour, je n'arrive pas à intégrer des sous menu à un menu et à associer un message au bon menu.
    J'ai essayé la manip ci dessus mais je n'ai pas tous les scripts demandés.
    Pouvez vous m'aider ?

    RépondreSupprimer
  144. bon ben pareil je viens de passer 1H à essayer de trouver où insérer le code de l'étape4 en essayant plein de choses et pas trouvé :(

    RépondreSupprimer
  145. Je vois que Soufiane ne répond plus... Ce qui m'ennuie parce qu'effectivement je rencontre le problème de la 4eme étape et ne trouve pas le code ! Ton tuto est vachement bien mais ça nous aiderais vraiment que tu réponde ! Jme doute que t'as mieux à faire mais bon un blog c'est quand même une responsabilité si tu t'engages à répondre à tout le monde à vitesse grand V.... Merci de nous aider ! :/

    RépondreSupprimer
  146. J'ai aussi un problème avec la première étape:
    j'ai copier le code, et je l'ai collé au-dessus de <Variable name="
    j'enregistre, et la problème l'ordinateur m'affiche:
    "Déclaration de la variable incorrecte dans l'apparence de page : Entrez L'analyse des variables du thème a échoué, car elles sont incorrectes. :"
    Merci de répondre à mes 2 messages :)

    PAREIL:(

    RépondreSupprimer
  147. coucou,

    j'ai le même problème de variable incorrecte et je ne trouve pas la solution .... HELP

    merci pour me spetits nerfs :D

    RépondreSupprimer
  148. salut soufiane moi je bloque a l'etape 4 psk jai beau faire la recherche mais il ne trouve rien que faire ?

    RépondreSupprimer
  149. marche pas chez moi, me mets en erreur

    RépondreSupprimer
  150. salut c interessant ton site merci beaucoup j'arrete dans l'etape 4 je trouve pas le code

    RépondreSupprimer
  151. idem je trouve pas div id='sidebar-wrapper'

    RépondreSupprimer
  152. Bonjour!

    Je suis à renouveler le look de mon blog (lescomestibles.blogspot.ca) et, comme daydream, je ne trouve pas div id+'sidebar-wrapper'. Est-ce que c'est parce que cet item a été remplacé par un autre code dans les versions plus récentes de templates blogger? Si oui, est-ce que quelqu'un a une idée de la nouvelle nomenclature?

    Merci!

    Nathalie

    RépondreSupprimer

Copyright 2015 Soufiane.fr