Ajouter votre propre navbar

Il existe des blogs hors blogger où installé une navbar inamovible au dessus du Blog. Même en descendant la page, la navbar reste au même endroit et reste toujours visible. Beaucoup des bloggeurs ont ainsi vendu cet espace publicitaire à des annonceurs pour des centaines de dollars (en tout cas, il faut signaler que sur la blogosphère anglaise).

En passant sur Blogger au bout du doigt, vous constaterez que j’ai ajouté une telle navbar sur le blog afin de plus inciter les nouveaux visiteurs à s’abonner.

Pour avoir une navbar fait maison sur votre blog, il vous faut :

1. Vous connecter à Blogger et aller ensuite sur "Mise en page" puis sur "Modifier le code html"

2. Collez le code ci-dessous juste avant la balise ]]><b:skin> pour afficher la navbar au dessus de la page

#mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }

* html #mta_bar{ /*IE6 hack*/

position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }

#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}

#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}

#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}

#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}

#left_bar a { text-decoration: none; color: #0000FF; }

#left_bar a:hover { text-decoration: underline; color: #0000FF; }

Pour afficher la navbar au bas de la page, mettez plutôt ce css juste avant   ]]><b:skin>

#mta_bar {

background:#003366;

border-top: 3px solid #6699ff;

margin: 0;

padding: 7px 0;

z-index: 100;

bottom:0px;

right:0px;

width: 100%;

overflow: auto;

position: fixed;

}

* html #mta_bar{

/*IE6 hack*/

position: absolute;

width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");

}

#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}

#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}

#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}

#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}

#left_bar a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjyMgar3GpcJWcdusN1413WijnWPj6GM7s7W04oXhJ22Bd8fBwaa12xBWDdsIUzoegkZYcb5bnXmo2g-HKSzsR55Rt6piuqz4Iz3oro00w9XtJ4UCgXw7A5WfWM2jQENVpwLueXIHk_0Y/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}

#left_bar a:hover { text-decoration: underline; color: #fff; }

3. Collez le code suivant juste avant la balise </head>

<script type='text/javascript'>

//<![CDATA[

var mta_arr = new Array();

var mta_clear = new Array();

function mtaFloat(mta) {

mta_arr[mta_arr.length] = this;

var mtapointer = eval(mta_arr.length-1);

this.pagetop = 0;

this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;

this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);

this.mtasrc.height = this.mtasrc.offsetHeight;

this.mtaheight = this.cmode.clientHeight;

this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);

var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';

mtabar = mtabar;

eval(mtabar);

}

function mtaGetOffsetY(mta) {

var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);

var parentOffset = mta.mtasrc.offsetParent;

while ( parentOffset != null ) {

mtaTotOffset += parentOffset.offsetTop;

parentOffset = parentOffset.offsetParent;

}

return mtaTotOffset;

}

function mtaFloatInit(mta) {

mta.pagetop = mta.cmode.scrollTop;

mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";

}

function closeTopAds() {

document.getElementById("mta_bar").style.visibility = "hidden";

}

//]]>

</script>

4. Mettez le code ci-après juste au dessus de la balise </body>

<div id='mta_bar'>

<div id='left_bar'><span class='left'><a href='URL DE VOTRE FLUX RSS' target='_blank'>PHRASE A AFFICHER</a></span></div>

<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;votreblog.blogspot.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsHjZkStYPS67VSBunqnUyOdxDQUi4JgyAhS76KXcP7eKCvkaHrUS8wEEEEAyaHm42GLml0V3zg3_6SMRkaW2hwPexfB8d6gXMVdjrysD_MS9pQClcVsb_BcxRnmtpHSZoORw8OLKqFbo/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>

Dans le code ci-haut, la navbar invite les non abonnés à s’inscrire au flux rss du blog. Pour mettre les indications propres à votre blog, remplacez les éléments en gras par l’url de votre flux rss, le lien de votre blog et le texte qui doit apparaître.

Enregistrez le modèle et allez admirer le résultat. Dites Merci à O-o.com

Notez que vous pouvez changer la  couleur de la barre (notre article Comprendre le css de votre blog 2 peut vous y aider) et même l’utiliser à d’autres fins, comme faire la pub d’un autre de vos blogs. Dans ce cas, à la place de l’url flux rss vous mettrez l’url  du flux de celui-ci, pour la phrase, vous mettrez « visitez aussi mon blog xxxx » et ensuite vous mettre l’url de celui-ci.

@+