20 novembre 2010
Encadrer les commentaires avec les angles arrondis
Voici comment encadrer les commentaires de vos visiteurs avec les angles arrondis...
Fonctionne avec Firefox uniquement.
Ouvrez la page d'un message et repérez à l'aide de Ctrl+F le code suivant :
<p><$BlogCommentBody$></p>
Collez au dessus <div class="fullsample"> et en dessous </div> comme ceci :
<div class="fullsample">
<p><$BlogCommentBody$></p>
</div>
Validez.
Encadrer les commentaires version 2
Ouvrez la Page d'un message puis repérez la balise suivante :
<p><$BlogCommentBody$></p>
Vous devez coller ensuite cette balise sur la ligne du dessus <div class="commentaire">
Puis collez la balise </div> sur la ligne en dessus.
Ce qui donnera ça :
<div class="commentaire">
<p><$BlogCommentBody$></p>
</div>
Validez.
Ouvrez maintenant votre feuille de style et collez tout en bas de la page les blocs suivants :
.blogbody .commentaire {
background: #000000;
border : 2px solid #FF0000;
margin-bottom: 5px;
}
.blogbody .commentaire p{
color: #FFFFFF;
padding: 0em 1em 0em 1em;
margin-bottom: 5px;
}
Pour modifier l'apparence de votre cadre :
background: #000000; Permet de changer la couleur du fond du cadre
border : 2px solid #FF0000; Permet de changer l'épaisseur / le cadre / et la couleur des bords
color: #FFFFFF; Permet de changer la couleur de la police des commentaires de vos visiteurs
19 novembre 2010
Encadrer les commentaires
Nous allons voir comment encadrer les commentaires de vos visiteurs...
Ouvrez la page d'un message et repérez la balise </BlogCommentTitle>
Sous cette balise collez les codes suivants :
<p><table width="100%" cellspacing="1" cellpadding="1" bordercolor="#f90b2a" border="2">
<tbody>
<tr>
<td align="left"><strong><font color="#000000">
Collez la balise <$BlogCommentBody$> ici !ca
</font></strong>
</td>
</tr>
</tbody>
</table>
</p>
<p>
Collez cette balise <$BlogCommentBody$> au centre du code comme indiqué sur la capture ci-dessus.
Il ne vous reste plus qu'à mettre en forme le texte et changer la couleur du cadre...
Vous devez valider pour voir la résultat, faites une copie de votre page Html avant ;)
Afficher les smileys dans la liste des derniers commentaires
Si vous avez choisi de changer l'affichage des commentaires avec ce tuto, ce post n'est pas pour vous...pour les autres :
Ouvrez votre page d'accueil puis collez les codes ci-dessous (c'est la liste des smileys) avant la balise </head>
<script src="http://p7.storage.canalblog.com/77/88/198257/13901288.js" type="text/javascript" ></script> <script type="text/javascript"> <!-- function TableauGif() { var list = new Array(); list[list.length] = new Array("Zen","http://smileys.sur-la-toile.com/repository/Zen/levitation.gif"); list[list.length] = new Array("Oups","http://smileys.sur-la-toile.com/repository/Confus/0030.gif"); list[list.length] = new Array("Rire moqueur","http://smileys.sur-la-toile.com/repository/Rires/srigole.gif"); list[list.length] = new Array("sapin","http://smileys.sur-la-toile.com/repository/Nature/sapin.gif"); list[list.length] = new Array("pff","http://imagesforum.doctissimo.fr/images/perso/alicia183.gif"); list[list.length] = new Array("yes","http://imagesforum.doctissimo.fr/images/perso/sabath.gif"); list[list.length] = new Array("casse tete","http://imagesforum.doctissimo.fr/images/perso/alinou.gif"); list[list.length] = new Array("vieux","http://imagesforum.doctissimo.fr/images/perso/zefoxxy.gif"); list[list.length] = new Array("Bravo","http://p5.storage.canalblog.com/57/80/108589/9712543.gif"); list[list.length] = new Array("jap","http://imagesforum.doctissimo.fr/icones/smilies/jap.gif"); list[list.length] = new Array("Clin d oeil","http://p1.storage.canalblog.com/12/61/108589/9712564.gif"); list[list.length] = new Array("Coder","http://p1.storage.canalblog.com/19/43/108589/9712576.gif"); list[list.length] = new Array("cogiter","http://imagesforum.doctissimo.fr/images/perso/sadness2.gif"); list[list.length] = new Array("attention","http://imagesforum.doctissimo.fr/images/perso/angelette.gif"); list[list.length] = new Array("heu","http://imagesforum.doctissimo.fr/icones/smilies/whistle.gif"); list[list.length] = new Array("holalala","http://p6.storage.canalblog.com/67/17/108589/9712646.gif"); list[list.length] = new Array("moqueur","http://imagesforum.doctissimo.fr/images/perso/anatheme.gif"); list[list.length] = new Array("demolite","http://imagesforum.doctissimo.fr/images/perso/marymaude.gif"); list[list.length] = new Array("Salut","http://p0.storage.canalblog.com/05/96/108589/9712768.gif"); list[list.length] = new Array("flash","http://imagesforum.doctissimo.fr/images/perso/sophie241.gif"); list[list.length] = new Array("Peur","http://smileys.sur-la-toile.com/repository/Surpris/stress-ronge-les-ongles-95.gif"); return list; } // --> </script>
Ensuite...
Repérez dans votre page d'accueil le bloc de code des Derniers commentaires
puis collez juste après la balise </ul> les lignes suivantes :
<script type="text/javascript">
<!--
SwapCodeEmoticon("rigthbar","navlinks");
SwapCodeStyle("rightbar","navlinks");
// -->
</script>
Comme sur la capture :
Si votre liste des 10 derniers commentaires se trouve dans la colonne de gauche, vous devez remplacer rightbar par leftbar.
Comme ceci :
<script type="text/javascript">
<!--
SwapCodeEmoticon("letfbar","navlinks");
SwapCodeStyle("leftbar","navlinks");
// -->
</script>
Changer l'affichage des commentaires
Voici comment changer l'affichage des commentaires sur la page d'accueil de votre blog...
De façon à faire apparaitre en premier le pseudo du visiteur et non pas les premiers mots du commentaire.
Repérez dans la page d'accueil le bloc suivant :
<CBLastComments>
<li><a href="<$BlogCommentURL$>"><$BlogCommentTitle$></a> sur <a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastComments>
Remplacez la balise <$BlogCommentTitle$> par <$BlogCommentAuthorNickName$>
Validez le tour est joué !
Ajouter une barre d'outils dans les commentaires
Après avoir installé les smileys, vous pouvez passer à l'étape suivante...
Ouvrez la page d'un message et repérez le code suivant à l'aide de Ctrl+F
</CBControlForm>
Il doit y avoir en dessous ces codes :
<script type="text/javascript">
<!--
SwapCodeEmoticon("content","blogbody");
// -->
</script>
Remplacez les par ceux là :
<script type="text/javascript">
<!--
SwapCodeEmoticon("content","blogbody");
SwapCodeStyle("content","blogbody");
// -->
</script>
Repérez ensuite la ligne suivante :
<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">
Collez la ligne suivante juste au dessus :
<hr /> <p id="visu"></p> <hr />
Comme sur la capture :
Maintenant il faut insérer la barre d'outils ...repérez cette ligne :
<label for="commentBody">Commentaire :</label>
<br />
Puis collez en dessous les lignes suivantes :
<script type="text/javascript">
<!--
AffBOutils();
// -->
</script>
<br />
Comme sur la capture :
Maintenant vous devez remonter en haut de page et modifier le script qui contient la liste des smileys qui se trouve dans le <head>
c'est à dire cette partie là :
<script src="http://p0.storage.canalblog.com/04/62/151832/9837650.js" type="text/javascript" ></script> <script type="text/javascript"> <!-- function TableauGif() { var list = new Array(); list[list.length] = new Array("Zen","http://smileys.sur-la-toile.com/repository/Zen/levitation.gif"); list[list.length] = new Array("Oups","http://smileys.sur-la-toile.com/repository/Confus/0030.gif"); list[list.length] = new Array("Rire moqueur","http://smileys.sur-la-toile.com/repository/Rires/srigole.gif"); list[list.length] = new Array("sapin","http://smileys.sur-la-toile.com/repository/Nature/sapin.gif"); list[list.length] = new Array("pff","http://imagesforum.doctissimo.fr/images/perso/alicia183.gif"); list[list.length] = new Array("yes","http://imagesforum.doctissimo.fr/images/perso/sabath.gif"); list[list.length] = new Array("casse tete","http://imagesforum.doctissimo.fr/images/perso/alinou.gif"); list[list.length] = new Array("vieux","http://imagesforum.doctissimo.fr/images/perso/zefoxxy.gif"); list[list.length] = new Array("Bravo","http://p5.storage.canalblog.com/57/80/108589/9712543.gif"); list[list.length] = new Array("jap","http://imagesforum.doctissimo.fr/icones/smilies/jap.gif"); list[list.length] = new Array("Clin d oeil","http://p1.storage.canalblog.com/12/61/108589/9712564.gif"); list[list.length] = new Array("Coder","http://p1.storage.canalblog.com/19/43/108589/9712576.gif"); list[list.length] = new Array("cogiter","http://imagesforum.doctissimo.fr/images/perso/sadness2.gif"); list[list.length] = new Array("attention","http://imagesforum.doctissimo.fr/images/perso/angelette.gif"); list[list.length] = new Array("heu","http://imagesforum.doctissimo.fr/icones/smilies/whistle.gif"); list[list.length] = new Array("holalala","http://p6.storage.canalblog.com/67/17/108589/9712646.gif"); list[list.length] = new Array("moqueur","http://imagesforum.doctissimo.fr/images/perso/anatheme.gif"); list[list.length] = new Array("demolite","http://imagesforum.doctissimo.fr/images/perso/marymaude.gif"); list[list.length] = new Array("Salut","http://p0.storage.canalblog.com/05/96/108589/9712768.gif"); list[list.length] = new Array("flash","http://imagesforum.doctissimo.fr/images/perso/sophie241.gif"); list[list.length] = new Array("Peur","http://smileys.sur-la-toile.com/repository/Surpris/stress-ronge-les-ongles-95.gif"); return list; } // --> </script>
Vous devez changer l'adresse du fichier Js en tout premier :
http://p0.storage.canalblog.com/04/62/151832/9837650.js
Remplacez-la par celle-ci qui contient les éléments pour afficher la barre d'outils :
http://p7.storage.canalblog.com/77/88/198257/13901288.js
Validez...le tour est joué !
Un grand merci à Alérion.
Je vous conseille d'héberger le fichier Js chez vous :
Sélectionnez l'adresse, clic droit puis copier, collez cette adresse dans la barre d’adresse de votre navigateur internet puis faites Enter.
Une page blanche avec le contenu du fichier Js va s’ouvrir, faites
ensuite Fichier puis Enregistrer sous pour télécharger le fichier sur
votre ordinateur, vous n'avez plus qu'à importer le fichier dans un
nouveau message en passant par l'icône Insertion d'un fichier pour en
récupérer l'adresse.
Mettre des smileys dans les commentaires
Commencez par ouvrir la page d'un message et juste avant la balise </head> collez le code suivant :
Il contient la liste des smileys.
Toujours dans la même page, repérez cette balise :
</CBControlForm>
Puis copiez-collez le code ci-dessous sous cette balise en faisant un retour à la ligne comme sur la capture.
Repérez maintenant cette ligne :
<textarea id="commentBody" name="commentBody" rows="10" cols="50">
Copiez-collez à la ligne les codes suivants :
Comme ceci :
Validez...le tour est joué !
Pour changer les smileys, il suffit de changer l'adresse et le nom des smileys dans la liste.
Merci à Alérion.
Menu avec Rollover sur image
Ouvrez votre feuille de style et collez tout en bas les blocs suivants :
ul#menu li a {
border: 2px solid #910000;
background: #000000 url("Adresse de l'image au premier plan") no-repeat scroll left top;
display: block;
line-height: 40px;
text-indent: 10px;
text-decoration: none;
width: 180px;
margin-right: 0px;
margin-left: 4px;
top: 0;
font-size: 1.3em;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-weight: bold;
color: #FFFFFF;
}
ul#menu li a:hover {
border: 1px solid #910000;
background: #000000 url("Adresse de l'image au passage de la souris") no-repeat scroll left bottom;
}
ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
}
ul#menu li {
margin: 0 0 2px;
padding: 0;
}
Placez l'adresse des images du Rollover à l'endroit indiqué en blanc et changez les codes couleurs pour adapter le menu à votre blog.
Dans ce menu vos images doivent faire 180x40 px comme indiqué en gris.
Pour espacer les cellules les unes des autres vous devez modifier le bloc ul#menu li et changer la valeur 2px.
Ouvrez ensuite votre page d'accueil et collez le script suivant dans une de vos colonnes :
<ul id="menu">
<li><a href="Adresse de votre lien">Titre pour votre lien</a></li>
<li><a href="Adresse de votre lien">Titre pour votre lien</a></li>
<li><a href="Adresse de votre lien">Titre pour votre lien</a></li>
</ul>
Voilà, c'est tout...
Menu vertical pour mettre dans une colonne
Commencez par ouvrir votre feuille de style et collez les blocs suivants tout en bas de votre page...
#tablenavigation .blocfixe h2, #coinmoment .blocfixe h2 {
width:180px;
height:14px;
background-image:url("http://p4.storage.canalblog.com/41/57/493778/29912500.gif");
background-repeat:no-repeat;
background-position:left top;
background-color:#9102a6;
font-size:11px;
overflow:hidden;
padding:3px 10px 0px 10px;
margin:0px 0px 0px 0px;
font-weight:normal;
color:#FFFFFF;
}
#tablenavigation .sousmenufixe, #coinmoment .sousmenufixe {
list-style-type:none;
border-left:2px solid #c694d6;
border-right:2px solid #c694d6;
border-bottom:2px solid #c694d6;
background-color:#000000;
padding:3px 12px 3px 8px ;
font-weight:normal;
}
#tablenavigation .bloc, #tablenavigation .blocfixe, #coinmoment .blocfixe {
overflow:hidden;
margin:0 0 0.5em 0;
list-style:none;
font-size:11px;
}
#tablenavigation .bloc ul li a:hover,#tablenavigation .blocfixe ul li a:hover {
background-color:#9102a6;
color:#FFCCFF;
text-decoration:underline;
}
#tablenavigation .bloc ul li a,#tablenavigation .blocfixe ul li a {
color:#d69df4;
text-decoration:none;
}
#tablenavigation .sousmenufixe a, #tablenavigation .sousmenu a {
background:url(actionhover.png) 4px center no-repeat;
display:block;
padding:2px 2px 2px 14px;
text-align:left;
}
Ne me demandez pas à quoi sert tout ça, j'ai paramétré le menu afin que vous n'ayez pas de modif à faire, sauf pour les codes couleurs, c'est pas sorcier, un code couleur c'est ça #d69df4 dès que vous en voyez un, vous le changez et vous verrez bien ce qu'il se passe...
A moins que votre colonne soit noire, vous devez changer l'adresse qui se trouve dans le premier bloc en blanc :
http://p4.storage.canalblog.com/41/57/493778/29912500.gif
Copiez-collez cette adresse dans votre navigateur puis enregistrez là sur votre pc pour pouvoir la modifier..
Ouvrez-là dans Photofiltre pour changer la couleur des angles, vous devez mettre la même couleur que celle de votre colonne où ira le menu...
Récupérez l'adresse de cette nouvelle image et collez-la à la place de l'ancienne.
Ensuite, vous collez le script suivant dans votre page d'accueil, dans une de vos colonnes et hop...
<div id="tablenavigation">
<div class="blocfixe">
<h2>Accueil</h2>
<div class="sousmenufixe">
<ul>
<li><a href="Adresse de la page.html">Accueil</a></li>
</ul>
</div>
</div>
<div class="blocfixe">
<h2>Profil</h2>
<ul>
<li><a href="Adresse de la page.html">Mes passions</a></li>
<li><a href="Adresse de la page.html">Ma musique</a></li>
<li><a href="Adresse de la page.html">Ma cuisine</a></li>
</ul>
</div>
</div>
<div class="blocfixe">
<h2>Divers</h2>
<ul>
<li><a href="Adresse de la page.html">Mes liens</a></li>
<li><a href="Adresse de la page.html">Mon Livre d'or</a></li>
<li><a href="Adresse de la page.html">Contactez moi</a></li>
<li><a href="Adresse de la page.html">Mon Forum</a></li>
</ul>
</div>
</div>
</div>
Placez dans le script l'adresse de vos liens et aussi le titre qui apparait dans le menu et c'est tout !
18 novembre 2010
Menu déroulant avec ouverture dans une nouvelle fenêtre
Menu déroulant avec l'ouverture des liens du menu dans une nouvelle fenêtre...
<p>
<script LANGUAGE="JavaScript">
<!-- Script trouvé sur http://www.toulouse-renaissance.net/ D'après Vincent CARRIER - Forum amen.fr-->
<!--
var target = "blank" //Destination des URL: "blank", "top" "self" ou "nom du cadre"
function envoie(frm){URL = frm.mgros.options[frm.mgros.selectedIndex].value
if (frm.mgros.selectedIndex != 0){
if (target == "blank") mywindow = window.open(''+URL+'');
else if (target == "self") document.location = URL;
else parent.frames[target].location = URL;
}}
//-->
</script>
<form name="Form_1">
<select NAME="mgros"
onChange="envoie(this.form)"
style="font-family: Verdana; font-size: 10pt;background-color:#910000; color:#ffffff" size="1">
<option SELECTED>TITRE DE VOTRE MENU</option>
<option VALUE="http://www.Adresse de vos liens">Titre de vos liens</option>
<option VALUE="http://www.Adresse de vos liens">Titre de vos liens</option>
<option VALUE="http://www.Adresse de vos liens">Titre de vos liens</option>
</select></p>
</form>
<p>
Collez ce script dans votre page d'accueil où vous voulez que le menu apparaisse.
Modifiez la deuxième partie du code en entrant vos informations...
« 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
