Attention !
Ce blog a déménagé et n'est plus mis à jour. Rendez vous sur le nouveau blog :
http://www.blogtuto.org/
jeudi 30 octobre
Un menu de plus sous la bannière
ça fait un bout de temps que je cherche un menu comme celui là.
Un menu qui s'intègre facilement dans une bannière qui soit facile à corriger.
Voici donc le principe.
la bannière doit avoir un fond uni pour intégrer harmonieusement les liens du menu.
Visuellement ça donne ça
Donc ça donne dans le script deux choses
Sur la feuille de style :
#topbar-logo {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: px;
border-color: #;
background: #000000 url("http://storage.canalblog.com/43/75/302457/31869260.jpg") no-repeat 0%; 0%;
height: 250px;
display: block;
}
div .logolink a {
display: block;
text-decoration: none;
width: 100%;
height: 250px; <-- ici la hauteur de la bannière
}
#topbar {
background-color: #CBAFBE; <-- ici la couleur du fond de votre bannière
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 10px;
display: block; <-- ici il faut avoir block à la place de none
Dans la page d'accueil, les archives, la page d'un message et la page de l'auteur il faudra ajouter le script de cette façon :
<body>
<div id="container"> <div id="topbar-logo"><div class="logolink"><a href="<$BlogURL$>"</a></a></div></div><div id="topbar">
<h1>
[<a href="http:votreadresse.com"> Accueil </a> ]
[<a href="http://votreadresse.com"> titre </a> ]
[<a href="http://votreadresse.com"> titre</a> ]
[<a href="http://votreadresse.com"> titre</a> ]
[<a href="http://votreadresse.com"> titre </a>']
</div> </h1>
<!-- colonne de gauche-->
<div id="leftbar"> <div class="navlinks">
Vous avez en gras la partie à coller!
Et voilà le tour est joué!
Chouette non?
Tags : menu
lundi 07 avril
Menu horizontal sous la bannière ou vertical en colonne
C'est le menu que vous voyez sous la bannière sur BlogTuto et sur de nombreux blogs.
Niveau de difficulté : facile
Mode : avancé
Le code est à mettre sur toutes les pages du script et après la bannière et avant le debut de la colonne de gauche (si vous en avez une) ou avant le content (si vous n'avez pas de colonne de gauche).
<SCRIPT>
menuhz = 1; //1:menu horizontal mettre 0 si vous voulez un menu vertical
bgcolor ='#EEEEEE'; //Couleur arrière
bgcolor2='#DDDDDD'; //Couleur arrière surbrillance
bgcolor3='#87D300'; //Couleur bordure
bgcolor4='#2080a0'; //Couleur texte
largeur = 138;
hauteur = 30;
i = 0;
menup = new Array;
menup[i++]='nom du lien';
menup[i++]='http://adresse.com';
menup[i++]='nom';
menup[i++]='http://adresse.com';
menup[i++]='nom';
menup[i++]='http://adresse.com';
menup[i++]='nom';
menup[i++]='http://adresse.com';
menup[i++]='nom';
menup[i++]='http://adresse.com';
menup[i++]='nom';
menup[i++]='http://adresse.com';
menup[i++]='nom';
menup[i++]='http://adresse.com';
menup[i++]='nom';
menup[i++]='http://adresse.com';
document.write('<style>');
document.write('.ejsmenu {color:'+bgcolor4+'; cursor:hand;}') //default
document.write('</style>')
document.write('<DIV ID=top><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='+bgcolor3+' WIDTH='+(menuhz?largeur*menup.length/2:largeur) +' HEIGHT='+hauteur+'><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=100%>'+(menuhz?'<tr>':''))
for(pass=0;pass<menup.length;pass+=2)
document.write((menuhz?"":"<tr>")+"<TD WIDTH="+largeur+" ALIGN=center BGCOLOR="+bgcolor+" onMouseDown='location.href=\""+menup[pass+1]+"\"' onMouseOver='this.style.background=\""+bgcolor2+"\"' onMouseOut='this.style.background=\""+bgcolor+"\"' CLASS=ejsmenu><FONT SIZE=1 FACE=Verdana><B>"+menup[pass]+"</B></FONT></TD>")
document.write('</tr></TABLE></TD></TR></TABLE></DIV>')
</SCRIPT>
Ce tuto vous est offert par Subjectif - Merci à elle!
Tags : bannière, menu
vendredi 04 avril
Un menu déroulant sur votre blog?
Un petit tuto pour un résultat comme celui ci-dessous?
le code est le suivant :
<!-- ARCHIVES-->
<div class="title">Si vous voulez un titre vous mettez cette ligne et le nom du menu</div>
<select name="archivemenu" onchange= " document.location.href=this.options[this.selectedIndex].value;">
<option selected>- Mes Archives -</option>
<option value="http://blogtuto.canalblog.com/archives/2008/04/index.html">Avril 2008</option>
<option value="http://blogtuto.canalblog.com/archives/2008/03/index.html">Mars 2008</option>
<option value="http://blogtuto.canalblog.com/archives/2008/02/index.html">Février 2008</option>
<option value="http: // Lien vers votre archive">Mois</option>
<option value="http://blogtuto.canalblog.com/archives/index.html">Toutes les archives</option>
</select>
Pour un menu déroulant avec les couleurs du fond, du texte, la police de caractère.... modulables, c'est ici (clic)!
Ce tuto vous est offert par Karipuce. Merci à elle!
Tags : menu, menu déroulant, mode avancé
Un autre genre de menu déroulant
Voilà un tuto que j'aurai bien aimé trouver tout fait sur le net mais hélas malgré mes recherches je n'ai pas eu d'autres choix que de m'y coller. Alors je partage avec vous le fruit de longues heures d'agacement devant mon écran mais quand je vois le résultat je me dis humblement que ça pourra sûrement servir. Et fidèle à ma conception du bénévolat en matière de tuto, je continue de penser que la rétention d'information c'est la constipation du cerveau. Je ne sais plus où j'ai lu cela mais je trouve cela très vrai.
A bon entendeur...
Vous avez déjà un tuto pour un menu déroulant que j'ai rédigé ICI qui vous permettra d'obtenir le résultat visible ci-contre dans la colonne de gauche, illustrer par notre rubrique "archives".
Ce tuto est lui consacré à un deuxième type de menu déroulant que vous pouvez apprécié en cliquant sur le mot "translation" toujours visible dans la colonne de gauche. Comme vous pouvez le constatez si vous cliquez dessus le petit moteur de traduction apparait et que même si on re-clique il disparait... Avouez qu'il n'est pas utile de l'avoir à demeure visible sur le blog...
Alors pour obtenir ce résultat...
Le code a insérer dans vos pages est le suivant :
<!-- Bloc 1 TRADUCTEUR --> <------ Nommez votre bloc surtout si vous envisagez d'en mettre plusieurs
<script type="text/javascript">
function showhide(blocid) {
var monbloc1= document.getElementById(blocid);
if (!monbloc1) return;
monbloc1.style.display = (monbloc1.style.display=="none" ) ? "block" : "none";
}
</script>
<p class="bloclien1"><a onclick="showhide('monblocdelien1')">
<div class="title">TITRE DE VOTRE BLOC DE LIENS</div></a></p>
<div id="monblocdelien1" style="display: none;">
<--- là c'est le code que vous souhaitez caché/montré en ajoutant <ul> en début et </UL> en fin
</div>
<!-- fin Bloc 1 -->
NB : Vous pouvez bien sûr mettre plusieurs liens à l'intérieur d'un bloc, exemple : tous les code de vos référencement
Vous pouvez également enchainer les blocs exemple : un blocs avec tous vos liens amis, un blocs avec tous vos référencements, un bloc "abonnement au blog"... dans ce cas partout où le chiffre 1 apparait (je l'ai mis en bleu pour que vous voyez, vous devrez renommer par 2, puis 3...). Attention, si vous en ratez un seul ça marche pas!
Un exemple concret en image sur mon blog dans ma colonne de droite (c'est pas de la pub, hein? Juste que des fois des images c'est plus parlant qu'un long discours!). Vous pourrez apprécier toutes les possibilités de ce bel outil.
Soyez très vigilant sur les codes sinon bug assuré. Il y a du vécu là...
Allez bon nettoyage de printemps!
Ce tuto vous est offert par Clochette93 - Merci à elle!
Tags : menu, menu déroulant