Les tuto 2 Demolite

18 novembre 2010

Menu horizontal ou vertical

Posté par Demolite - Dans la catégorie Canalblog
Tags : Canalblog, Menu, Menu horizontal, Menu vertical, Mode Avancé

Celui là vous pouvez le passer d'horizontal à vertical en changeant 1 chiffre !
Il peut se mettre n'importe ou...dans une colonne, dans un message, au dessus de la bannière ou bien en dessous...

Voici le script, il y a juste à changer le 1 en 0 pour le passer d'horizontal à vertical, de changer les codes couleurs, et aussi la largeur et la hauteur des cellules pour l'adapter à votre blog :

Titre

<p>
<script>
menuhz = 1 //1:horizontal 0:vertical
bgcolor ='#000000'; //Couleur du fond
bgcolor2='#707070'; //Couleur au passage de la souris
bgcolor3='#FFFFFF'; //Couleur des bords
bgcolor4='#C4C4C4'; //Couleur du texte
largeur = 90
hauteur = 22
i = 0
menup = new Array;
menup[i++]='Titre'; //<- Nom
menup[i++]='http://Adresse.html'; //<- Adresse du lien
menup[i++]='Titre';
menup[i++]='http://Adresse.html';
menup[i++]='Titre';
menup[i++]='http://Adresse.html';
menup[i++]='Titre';
menup[i++]='http://Adresse.html';
menup[i++]='Titre';
menup[i++]='http://Adresse.html';
menup[i++]='Titre';
menup[i++]='http://Adresse.html';

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>
</p>

Ensuite changez le Titre et ajoutez l'Adresse des liens :

menup[i++]='Titre'; //<- Titre
menup[i++]='http://Adresse.html'; //<- Adresse du lien

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Commentaires désactivés actuellement : [13]

Menu déroulant pour photo

Posté par Demolite - Dans la catégorie Canalblog
Tags : Canalblog, Menu, Menu déroulant, photo

Un petit menu déroulant pour vos photos...pourquoi pas !
C'est bien pratique et ça ne prend pas de place...

Vous pouvez mettre autant de photo que vous voulez, de la taille que vous voulez, choisir la couleur du fond et des bords,
et aussi agrandir ou réduire la hauteur et la largeur...

Et bien sur de coller l'adresse de vos images dans le script...

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Commentaires désactivés actuellement : [0]

Menu très discret en 1 clic

Posté par Demolite - Dans la catégorie Canalblog
Tags : Canalblog, Menu, Mode Avancé

Voici comment ranger vos liens, vos blocs, tout ce qui traine et qui prend de la place dans vos colonnes...
Seul le titre du menu est apparent, il suffit de cliquer dessus pour afficher le contenu.

Voici le code de base :

Une fois que vous avez collé ce script dans votre colonne, vous devez ajouter l'adresse de vos liens que vous voulez mettre dedans et ajouter la balise <ul> au début et </ul> à la fin..

Comme ceci :

Ensuite vous devez collez les codes qui permettent l'affichage des Derniers messages...

Voila, ça marche avec tous les blocs...

Vous pouvez changer le code suivant dans le script :

<div class="title">DERNIERS MESSAGES</div>

C'est le titre qui s'affiche, mais vous pouvez mettre <h2>DERNIERS MESSAGES</h2> pour un affichage comme la date de vos articles.

<h3>DERNIERS MESSAGES</h3> comme le titre de vos articles

Ou encore <font color="#FFFFFF" font face="georgia">DERNIERS MESSAGES</font> pour modifier la police et la couleur du texte...

C'est comme vous vous voulez...

Mais Attention...ne touchez pas aux balises </a></p> qui se trouvent à la fin de cette ligne de code !

<div class="title">DERNIERS MESSAGES</div></a></p>

Vous pouvez aussi mettre des images cliquables comme ceci :

Amusez vous bien !

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Commentaires désactivés actuellement : [0]

Mettre en forme vos menus déroulants

Posté par Demolite - Dans la catégorie Canalblog
Tags : Canalblog, css, Menu déroulant, Mode Avancé

Pour personnaliser vos menus déroulants, c'est à dire choisir la largeur, la couleur du texte, la couleur du fond, les bords etc...

Collez dans votre feuille de style le bloc suivant, en modifiant les codes couleurs et la taille du width.

select {
      color: #000000;
      background-color: #FFFFFF;
      width: 190px;
      border-top : 2px solid #910000;
      border-left : 2px solid #910000;
      border-right : 2px solid #910000;
      border-bottom : 2px solid #910000;
}

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Commentaires désactivés actuellement : [0]

Menu déroulant

Posté par Demolite - Dans la catégorie Canalblog
Tags : Canalblog, Menu, Menu déroulant, Mode Avancé

Un petit menu déroulant discret à placer où vous voulez...

Copiez-collez le code ci-dessous dans vos pages html, remplacez le titre du menu, l'adresse des liens ainsi que le nom des liens par les votres...

<ul>
<form>
<p><select name="demolite" size="1" onchange="location.href=
(form.demolite.options[form.demolite.selectedIndex].value)" 0="[object HTMLOptionElement]" style="font-family: Georgia;background:#ffffff;">
<option value="0">Titre du menu</option>
<option value="0"></option>
<option value="Adresse de votre lien">Nom de votre lien</option>
<option value="adresse de votre lien">Nom de votre lien</option>
</select>
</p></form><p>
</ul>

Il faut bien sur rajouter autant de ligne que vous avez de lien dans votre menu :

<option value="adresse de votre lien">Nom de votre lien</option>

Pour changer la couleur du menu, modifiez le code couleur :

background:#cc99ff;

Pour changer la police remplacez Georgia par une autre police :

"font-family: Georgia;

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Commentaires désactivés actuellement : [0]

17 novembre 2010

Menu horizontal avec images cliquables

Posté par Demolite - Dans la catégorie Canalblog
Tags : Canalblog, image, Menu, Menu horizontal, Mode Avancé

Le code se présente comme ceci :

Chaque bloc de code est séparé par un espace et correspond à une image cliquable :

Exemple avec le premier bloc de l'Apéro :

En gris c'est l'adresse de direction, la page où l'on atterri si on clique sur l'image.
En blanc c'est l'adresse entière de votre image.

Vous n'êtes obligé de mettre le title="L'Apéro" ni le alt="L'Apéro" ça permet juste d'afficher le nom du menu lorsqu'on passe la souris dessus.

Une fois que vous avez entré toutes vos données dans le menu il ne vous reste plus qu'à l'insérer au bon endroit dans votre page d'accueil et dans les autres pages du blog (pages des archives et page d'un message).

Sur la ligne <body> repérez <div id="topbar"></div> faites un retour à la ligne à la fin de ce code et collez votre menu.

Faites de nouveau un retour à la ligne pour laisser un espace entre les codes <div id="leftbar"><div class="navlinks">
Ce qui permet d'y voir plus clair...(les espaces entre les balises n'ont pas d'incidence sur le blog).

En fait votre menu doit être collé entre <div id="topbar"></div> et <div id="leftbar"><div class="navlinks">

Voila ce que ça donne dans votre page :

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Commentaires désactivés actuellement : [1]

Menu déroulant vertical en css

Posté par Demolite - Dans la catégorie Canalblog
Tags : Canalblog, css, Menu, Menu déroulant, Mode Avancé, vertical

Alors celui là, vous avez été nombreux à me le demander...
Il est sympa et en plus il est compatible avec Firefox et Internet explorer !

Voici une capture du menu faite sur mon ancien blog :
Sans_titre_1

Un grand merci à PêUR chez qui j'ai trouvé ce script...
Son site va fermer, car madame la cigogne ne devrait pas tarder à faire un lâché de bébé au dessus de chez lui...si tu passes par là, tous mes voeux de bonheur.

Alors, je ne vais pas rentrer dans certains détails que ni vous ni moi ne comprendrons, mais plutôt vous dire où et comment coller les codes pour avoir un zoli menu dynamique top moumoute.

Commençons par la feuille de style...ouvrez la.
En bas de page, collez les codes suivant :

.menuIE {
display:none !important;
display:block;
}
a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
color:#000;
width:90px;
height:18px;
display:block;
background:#c33;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family: verdana;
font-size:10px;
line-height:18px;
overflow:hidden;
}
a.boutonIE:hover {
color:#fff;
background:#000;
overflow:visible;}
a.boutonIE:hover table {
display:block;
background:#eee;
border-collapse:collapse;
}
.boutonFF {
color:#000;
width:90px;
height:18px;
display:block !important;
display:none;
background:#c33;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family: verdana;
font-size:10px;
line-height:18px;
overflow:hidden;
}
.boutonFF:hover {
height:auto;
cursor:pointer;
color:#fff;
background:#000;
}
a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
display:block;
width:90px !important;
width:88px;
height:18px;
border-bottom:1px solid #000;
text-decoration:none;
color:#000;
font-family: verdana;
font-size:10px;
text-align:center;
background:#eee;
}
a.SousMenu:hover {background:#BCCCD2;
}

Il y a une partie qui correspond au menu pour Internet explorer et l'autre pour Firefox.
Ne supprimez pas une partie ou une autre, car sinon les visiteurs n'utilisant pas le même navigateur que vous, ne verraient pas le menu...

Ouvrez votre Page d'accueil et collez le code ci-dessous à l'endroit où vous voulez que le menu apparaisse.

<div class="menuIE">
<a class="boutonIE" href="#nogo">Titre menu
<table><tr><td>
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
</td></tr></table>
</a>
<a class="boutonIE" href="#nogo">Titre menu
<table><tr><td>
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
</td></tr></table>
</a>
</div>

<div class="boutonFF">Titre menu<br />
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
</div>
<div class="boutonFF">Titre menu<br />
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
<a class="SousMenu" href="URL">titre</a>
</div>

Pour qu'il apparaisse tout en haut au dessus de votre bannière, collez le code juste après la balise <div id="topbar-logo"> en faisant un retour à la ligne, puis un autre après avoir collé le code ce qui permet d'y voir plus clair.

<body><div id="container"><div id="topbar-logo">
<-----Collez le code ici----->

Visualisez pour avoir un aperçu de votre menu...

Entrez vos informations pour renseigner le menu avec :
Le titre : Titre au menu
Puis chaque ligne : <a class="SousMenu" href="URL">titre</a> avec l'URL de destination et le titre.

Vous devez remplir de la même façon les blocs IE et FF.

Ne touchez pas au reste.

Maintenant, il faut s'occuper de l'apparence de votre menu...changer les couleur ou éventuellement agrandir les cases...

Ouvrez la feuille de style et changez les codes couleurs en place par de nouveaux.

Vous devez repérez les blocs pour IE et FF (Internet explorer et Firefox) et mettre les mêmes codes couleur.

Pour agrandir les cases, changez tous les width:90px;

Pour le menu de mon ancien blog, j'ai mis 177px à la place de 90px ce qui fait exactement la largeur de ma bannière, pour 5 cases...

Avec un peu de patience et en observant bien, vous y arriverez...

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Commentaires désactivés actuellement : [0]

Menu défilant

Posté par Demolite - Dans la catégorie Canalblog
Tags : Canalblog, Menu, Menu déroulant, Mode Avancé

Vous avez une ribambelle de liens dans vos colonnes...

Ce petit menu va vous faire gagner de la place !

Voici le code :

<marquee behavior="scroll" direction="up" height="50" width="160"
scrollamount="1" scrolldelay="1" onmouseover="this.stop()"
onmouseout="this.start()"><p>
<a href="Adresse">Nom du lien</a><br />
<a href="Adresse">Nom du lien</a><br />
<a href="Adresse">Nom du lien</a><br />
<a href="Adresse">Nom du lien</a><br />
<a href="Adresse">Nom du lien</a><br />
<a href="Adresse">Nom du lien</a><br />
<a href="Adresse">Nom du lien</a><br />
<a></a><br />
<a></a><br />
<a></a><br />
</p>
</marquee>

Vous devez coller vos liens à la place de "Adresse" et le nom de vos liens à la place de "Nom du lien" tel qu'ils défileront dans le menu.

Les dernières "lignes vides" permettent au menu de défiler correctement, car si vous n'avez que 2 ou 3 liens dans votre menu, le défilement est saccadé.

Vous pouvez changer la hauteur ou la largeur de votre menu en jouant avec :

height="50" width="160"

Il suffit de changer les valeurs.

Il ne vous reste plus qu'a copier-coller le code dans une de vos colonnes.

Avec Internet Explorer, le texte défile sur la gauche, avec Firefox le texte est au milieu dans les colonnes.

Pour que vos liens s'ouvrent dans une nouvelle page le code est le suivant :

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Commentaires désactivés actuellement : [0]

Supprimer l'encadrement des images

Posté par Demolite - Dans la catégorie Canalblog
Tags : cadre, Canalblog, Mode Avancé, supprimer

Un petit tuto tout simple mais qui rend bien service !
C'est une question qui revient régulièrement dans ma boite mail...

Voici comment vous débarrasser du cadre qui entoure certaines images sur votre blog...

Ouvrez votre feuille de style descendez jusqu'au bloc suivant, qui doit ressembler à ça :

.navlinks img {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #000000;
}

Mettez la valeur zéro à la place du 1 dans la ligne border-width

Comme ceci :

.navlinks img {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 0px;
border-color: #000000;
}

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Commentaires désactivés actuellement : [0]

Mettre un image différente pour vos Blocs

Posté par Demolite - Dans la catégorie Canalblog
Tags : Blocs, Canalblog, Catégorie, image, Mode Avancé

Dans ce tuto nous avons vu comment Mettre une image sous le titre de vos catégories (Blocs), aujourd'hui nous allons voir comment mettre des images différents pour chaque bloc.

Ouvrez la feuille de style, copiez le bloc .navlinks .title et collez-le à la suite, en ajoutant un 1 comme ceci :

.navlinks .title1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #292103;
font-size: small;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
text-align: center;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 3px;
border-color: #FFCC33;
padding: 3px;
background: url("Adresse de votre nouvelle image") no-repeat 0% 0%;
height: 90px;
padding-top: 10px;
}

Il faut coller l'Adresse de la nouvelle image à la place de l'image en place.

Ensuite il faut aller dans page d'accueil et ajouter un 1 à tous les titres de bloc que vous voulez changer.

Comme ceci :

<div class="title1">Derniers commentaires</div>

Voilà le tour est joué !

Il faut bien sur ajouter autant de bloc .navlinks .title { que vous voulez d'image différentes, en ajoutant un chiffre supérieur à chaque fois dans un nouveau bloc dans la feuille de style.

.navlinks .title1 { .navlinks .title2 { .navlinks .title3 {

Et changer aussi dans la page d'accueil le titre du bloc :

<div class="title1">Derniers commentaires</div>
<div class="title2">Derniers messages</div>
<div class="title3">Catégories</div>

Etc...

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Commentaires désactivés actuellement : [0]

« Début ‹ Précédent 9 10 11 12 13 14 15 16 17 18 Suivant › Fin »

« Accueil 1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

Blog tuto, aide à la création et au design des blogs et sites internet, Montage photo, trucs et astuces, logiciels gratuits...

18 novembre 2010

Menu horizontal ou vertical

Menu déroulant pour photo

Menu très discret en 1 clic

Mettre en forme vos menus déroulants

Menu déroulant

17 novembre 2010

Menu horizontal avec images cliquables

Menu déroulant vertical en css

Menu défilant

Supprimer l'encadrement des images

Mettre un image différente pour vos Blocs