09 décembre 2010
Créer des étiquettes à l'aide un Mask avec Photofiltre
C'est bientôt Noël...c'est le moment de préparer des petites étiquettes de Noël que vous pourrez (ou plutôt le père Noël) mettre sur vos cadeaux avec le nom des enfants dessus...
Dans ce tuto, je me suis servie d'un fond de 400x400 mais pour créer beaucoup plus d'étiquettes en une seule fois, prenez un fond plus grand.
08 décembre 2010
Mettre le formulaire d'email de canalblog dans un article
Si vous organisez un concours de cuisine ou je ne sais quoi d'autre qui demande à vos visiteurs de s'inscrire, ça peut être utile d'avoir le formulaire du contacter l'auteur dans un article...non ?
Commencez pour cliquez sur le lien Contacter l'auteur dans votre colonne, puis récupérer le code source du formulaire comme ceci :
Il ne vous reste plus qu'à le coller dans un Nouveau message en mode Html.
Voilà ce que ça donne :
Formulaire de contact
07 décembre 2010
La boite à tuto...le retour !
Pour fêter l'ouverture de ce blog, je remets en ligne La boite à tuto !
La boite à tuto, pour ceux qui n'ont pas connu mon ancien blog, c'est un formulaire de commentaire proposé par i-services, qui vous permet de faire une demande de tuto...
Avant de vous jeter sur le formulaire, assurez-vous que le tuto n'est pas déjà en ligne, servez-vous du moteur de recherche installé sur ce blog, vous gagnerez du temps et moi aussi par la même occasion, car 9 fois sur 10, le tuto que vous cherchez (façon de parler) existe déjà.
Alors si vous avez une question inédite...lâchez-vous ;o)
Pour installer ce service sur votre blog un tuto vous attends ici...
Pour ne rien rater des nouveautés, pensez à vous inscrire à ma Newsletter :
Newsletter
Mettre vidéo miniature dans une colonne
Voici comment réduire une vidéo et la mettre dans une de vos colonnes.
Voici un script récupéré sur Youtube :
<object width="700" height="450"><param name="movie" value="http://www.youtube.com/v/6_sjGfSijb0?fs=1&hl=fr_FR&color1=0x006699&color2=0x54abd6"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/6_sjGfSijb0?fs=1&hl=fr_FR&color1=0x006699&color2=0x54abd6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="700" height="450"></embed></object>
Vous pouvez commencer par faire un peu de ménage et supprimer quelques trucs inutiles :
<embed src="http://www.youtube.com/v/6_sjGfSijb0?fs=1&hl=fr_FR&color1=0x006699&color2=0x54abd6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="195" height="134"></embed>
Gardez seulement ce qui se trouve entre les balise <embed...> </embed>
Maintenant on va réduire la taille de cette vidéo...
Changez les valeurs de départ dans le script de width="853" height="505" passez-les à : width="195" height="134"
Vous pouvez mettre les dimensions que vous voulez du moment quelles ne dépassent pas la largeur de votre colonne ou de votre page centrale si vous mettez la vidéo dans un article.
06 décembre 2010
Calendrier avec diaporama
Voici comment changer le look de votre calendrier, avec un diaporama...
Tout le mérite revient à Alérion, pour d'autres détails allez voir son tuto.
Alors...
Commencez dpar choisir le thème de votre calendrier et rassemblez 7 images de la même dimensions (150x140px dans cet exemple).
Il vous faudra aussi un fond, une image fixe ou un image animée...
Dans cet exemple mon image est animée et fait 320x270px.
Collez le code suivant dans votre feuille de style, à la suite des codes du calendrier :
#cadrecalendar {
border:none;
background:transparent url("Adresse de l'image du fond");
height: 280px;
width: 180px;
display: block;
}
#imagecalendrier {
padding: 15px 5px 0 5px;
height:140px;
display:block;
}
.jourlucalendar {
background-color:#ffffff;
}
.jourmacalendar {
background-color:#ffffff;
}
.jourmecalendar {
background-color:#ffffff;
}
.jourjecalendar {
background-color:#ffffff;
}
.jourvecalendar {
background-color:#ffffff;
}
.joursacalendar {
background-color:#ffffff;
}
.jourdicalendar {
background-color:#ffffff;
}
Les lignes jourdicalendar background-color:#ffffff Correspondent aux pavés de couleurs sous les jours de la semaine.
Changez les codes couleurs uniquement.
Ensuite, mettez l'adresse de vos images dans le code suivant et collez-le dans votre page d'accueil avant la balise </head>
<script type="text/javascript">
<!--
var imageducalendar = new Array("Adresse image" ,
"Adresse image" ,
"Adresse image" ,
"Adresse image" ,
"Adresse image" ,
"Adresse image" ,
"Adresse image");
//-->
</script>
<script src="http://storage.canalblog.com/79/67/272783/19819048.js" type="text/javascript" ></script>
Dans cet exemple, les images font 150x140px.
Pour finir, repérez la ligne du calendrier dans la page d'accueil et collez ce code juste en dessous, comme sur la capture :
<script type="text/javascript">
<!--
NewCSSCalendar();
DateJourCalendar();
NewDaysCalendar("p");
AfficherImagesCalendar();
// -->
</script>
Ensuite vous devez jouer avec les valeurs du calendrier d'origine dans la feuille de style, et aussi avec la couleur des liens pour trouver ce qui rend le mieux avec votre nouveau calendrier...
a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
color: #ffffff;
text-decoration: none;
}
a:active {
color: #ffffff;
text-decoration: none
}
a:hover {
color: #e4263f;
text-decoration: none;
}
En 2 mots : bon courage !
Changer un bloc (une catégorie) de colonne
Pour repérez ce que j'appelle un Bloc c'est à dire "Catégories, Liens, Derniers messages etc..." vous devez ouvrir votre page d'accueil, et vos grands yeux...
Voici à quoi ressemble le bloc des catégories :
<div class="title">Catégories</div>
<ul>
<CBCategories>
<li><a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
</CBCategories>
</ul>
La première ligne correspond au titre.
Si vous modifiez Catégories entre les balises, un nouveau texte apparaitra à la place.
ex : <div class="title">Mes créations</div>
Maintenant si vous voulez changer de place le Bloc des catégories coupez le bloc de code ci-dessus et collez-le ailleurs.
Pour repérer vos colonnes dans la page d'accueil :
La colonne de gauche commence à partir de la ligne <body> et tout au bout de cette ligne vous verrez :
<div id="leftbar"><div class="navlinks">
Ce qui indique le début de la colonne de gauche.
Le corps du message (la partie centrale, le Content) commence avec cette ligne :
(Elle annonce aussi la fin de votre colonne de gauche...)
</div></div><div id="content"><div class="blogbody">
Et enfin la colonne de droite qui commence avec cette ligne :
(Elle annonce aussi la fin de la partie centrale...)
<$CBControlNavLinks$></div></div><div id="rightbar"><div class="navlinks">
Et qui se termine avec celle-la :
</div></div><div class="clear"> </div></div></body></html>
Voila...j'espère que c'est déjà un peu plus clair...
Je vous conseille de séparer les blocs de codes dans vos pages html, c'est plus facile ensuite pour se repérer et pour coller les scripts ou déplacer des blocs...
Quelques blocs :
Bloc des derniers messages :
<div class="title">Derniers messages</div>
<ul>
<CBLastPosts>
<li><a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastPosts>
</ul>
Bloc Albums photos :
<div class="title">Albums photos</div>
<ul>
<CBAlbum>
<li><a href="<$BlogAlbumURL$>"><img src="<$BlogAlbumCoverURL$>" width="75" height="75" alt="<$BlogAlbumTitle$>" /></a><br /><a href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a></li>
</CBAlbum>
</ul>
Bloc des Archives :
<div class="title">Archives</div>
<ul>
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<li><a href="<$BlogArchiveFileName$>">Toutes les archives</a></li>
</ul>
Bloc des Derniers commentaires :
<div class="title">Derniers commentaires</div>
<ul>
<CBLastComments>
<li><a href="<$BlogCommentURL$>"><$BlogCommentTitle$></a> sur <a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastComments>
</ul>
Bloc du Contactez l'auteur :
<div class="item">
<script type="text/javascript">
<!--
document.write('<a href="<$BlogOwnerNoSpamEmailLink$>">Contactez l\'auteur</a>'); // -->
</script>
</div>
Mettre un compteur live
Pour mettre un compteur live (un compteur qui affiche le nombre de visiteurs en temps réel qu'il y a sur votre blog) c'est tout simple...
Allez sur cette page de recherche Google ou j'ai lancé une recherche "Compteur live", choisissez le site et le compteur qui vous convient le mieux, récupérez le script et collez-le dans une de vos colonnes.
Apparence / Éditer les fichiers de ce modèle / Page d'accueil
Repérez dans votre page d'accueil une de vos colonnes rightbar ou lefltbar et collez le script à la ligne en dessus pour que votre compteur soit en haut de votre colonne.
<script language="Javascript" type="text/javascript" src="http://www.kidiblog.com/compteur-live.php"></script>
Comme ceci pour mettre le compteur dans la colonne de droite :
Visualisez et validez.
Moteur de recherche interne
Canalblog est maintenant équipé d'un moteur de recherche interne et c'est bien pratique.
Pour les autres, voici un moteur de recherche Google, qui cherche les articles sur votre blog à partir de mots clés.
Vous pouvez mettre le script dans un article en mode html et mettre le lien de votre message dans une colonne si vous êtes en mode standard, ou bien le mettre directement dans une colonne si vous êtes en mode avancé.
<center>
<ul>
<form method="get" action="http://www.google.fr/custom" target="google_window">
<table border="0" bgcolor="#000000">
<tbody><tr><td valign="top" nowrap="nowrap" height="32" align="left">
</td>
<td nowrap="nowrap">
<input type="hidden" name="domains" value="lestuto2demolite.canalblog.com" />
<label for="sbi" style="display: none;">Entrez les termes que vous recherchez.</label>
<input type="text" name="q" size="15" maxlength="255" id="sbi" />
</td></tr>
<tr>
<td> </td>
<td nowrap="nowrap">
<table>
<tbody><tr>
<td>
<input type="radio" name="sitesearch" checked="true" id="ss0" />
<label
for="ss0" title="Rechercher sur le Web"><font size="-1"
color="#c4c4c4">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="lestuto2demolite.canalblog.com" id="ss1" />
<label for="ss1" title="Rechercher lestuto2demolite.canalblog.com"><font size="-1" color="#c4c4c4">Sur ce site</font></label></td>
</tr>
</tbody></table>
<label for="sbb" style="display: none;">Envoyer un formulaire de recherche</label>
<input type="submit" name="sa" value="Recherche Google" id="sbb" />
<input type="hidden" name="client" value="pub-0248229401376013" />
<input type="hidden" name="forid" value="1" />
<input type="hidden" name="ie" value="ISO-8859-3" />
<input type="hidden" name="oe" value="ISO-8859-3" />
<input
type="hidden" name="cof"
value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1"
/>
<input type="hidden" name="hl" value="fr" />
</td></tr></tbody></table>
</form>
</ul>
</center>
Vous pouvez changer les codes couleur du fond et du texte et vous devez remplacer les lestuto2demolite.canalblog.com par l'adresse de votre blog.
Vous pouvez aussi enlever les balises <center> </center> au début et à la fin du script, si vous ne voulez pas centrer le moteur de recherche.
Menu déroulant horizontal avec sous menu
Voici une capture du menu installé sur un de mes anciens blog :
A vous de le personnaliser en passant par la feuille de style.
Vous pouvez mettre des images ou des liens à la place des titres ---- Catégorie ------>
Ajouter ou pas des -------> pour agrandir les colonnes
Changer la couleur des liens actifs et au passage de la souris (hover)
Changer la couleur du fond
Ajouter des séparateurs entre chaque Catégorie...
Commencez par coller le code ci-dessous dans le bas de votre feuille de style :
/*--------- Menu horizontal -----------*/
/* Credits: Stu Nicholls */
/* URL: http://www.stunicholls.com/menu/skeleton/skeleton.css */
#nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 10px georgia; border:1px solid #000; border-color:#000; border-width:1px 1px 1px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:30px; width: 900px; padding:0;}
#nav li {float:left;}
#nav li li {float:left;}
/* a hack for IE5.x and IE6 */
* html #nav li li {float:left;}
#nav li a {display:block; float:center; color:#000; border-right:1px solid #000; border-color:#FFF; margin:0 10px 0 10px; height:30px; line-height:30px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}
#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; top:22px;}
/* another hack for IE5.5 and IE6 */
* html #nav li:hover ul {left:10px;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
/* yet another hack for IE5.x and IE6 */
* html #nav ul {width:1px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover > a {text-decoration:underline; color:#;}
/* but IE5.x and IE6 need this lot to style the flyouts and path followed */
/* show next level */
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:0px; margin-left:100%; top:5px;}
/* keep further levels hidden */
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
/* show path followed */
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:none; color:#FF0000;} /* Hover sur les liens */
/* hide futher possible paths */
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#000;} /* Les liens */
/* ================================================================
The original version http://www.stunicholls.com/menu/skeleton.html
Copyright (c) 2005-2007 Stu Nicholls.
=================================================================== */
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
Ensuite collez le script suivant dans votre page d'accueil.
Pour que le menu s'affiche au dessus de votre bannière placez le script après la balise </head> en faisant un retour à la ligne.
Pour qu'il s'affiche sous votre bannière, placez le script juste avant la balise <div id="leftbar"> qui se trouve sur la même ligne que <body> (dans ce cas, retirez les balises <center></center> et <br> qui se trouvent en début et fin de script).
<br>
<center>
<script type="text/javascript">
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>
<ul id="nav">
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 ------------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
</ul>
</center>
<br>
Ne touchez pas à la première partie du script !
Ensuite, vous devez remplir le reste du script avec vos informations :
L'adresse de vos liens, le titre de vos liens et le titre de la catégorie principale.
Vous pouvez mettre une image pour la catégorie principale en collant l'adresse de votre image à la place du titre, comme ceci :
<li><a href="#nogo"><img src="http://adresse image.gif"></a>
Si vous voulez ajouter une catégorie ou en supprimer une, voici la zone d'un bloc:
<li><a href="#nogo">Catégorie 1 -----------></a>
<ul>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
</ul>
Pour supprimer une sous catégorie ou en ajouter une, voici la zone d'un bloc :
<li><a href="#nogo">Titre sous catégorie</a>
<ul>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
</ul>
</li>
Pour ajouter ou supprimer un lien, c'est cette ligne :
<li><a href="http://Adresse du lien.html">Nom du lien</a></li>
Revenons à la feuille de style...
Ne modifiez pas la seconde partie !
Pour changer les couleurs et tout le reste faites des tests en modifiant les valeurs et les codes couleur, je suis
sur que vous trouverez tout seul !
Allez amusez-vous bien...
Mettre un image devant le Posté par
Voici comment insérer une image sur la ligne du Posté par :
Ouvrez votre page d'accueil et repérez avec Ctrl+F la balise suivante :
<div class="itemfooter">
Cette ligne balise contient tout les ligne du posté par en bas de vos articles.
Collez l'adresse de votre image à la suite de cette balise, comme ceci :
<div class="itemfooter"><img src="http://Adresse de votre image.gif">
Vous devez répéter cette opération sur les autres pages Html de votre blog.
Attention sur la page d'un message vous avez 2 balises <div class="itemfooter"> une pour le pied de vos articles et une pour le pied des commentaires laissés par vos visiteurs.
La ligne qui nous intéresse est en premier dans la page.
« 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
