08 juin 2008
Supprimer les bordures
"Bonjour
J'aimerai savoir comment supprimer les traits qu'il y a sur mon blog je ne sais pas comment cela ce fait !!"
Réponse
Dans la feuille de style, 2 possibilités : Sur chaque blocs concernés
- soit vous mettez "none" à la place de solid (ou dotted) sur la ligne border concernée
- soit vous mettez "0 px" au lieu de 1 (ou 2) sur la "border-width"
Exemple :
#content {
float: left;
width: 700px;
background-color: #FFFFFF;
border-top-style: solid; <----------- soit je mets "none" à la place de solid
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px; <-------------- soit je mets 0 px au lieu de 1
border-color: #;
overflow: hidden;
Bonne journée !
La question du jour : agrandir l'espace texte!
"Bonjour
J'aimerai savoir comment il fallait que je face pour agrandir la zone de texte du milieu ( ou colonne du milieu )"
La réponse de votre tutrice préférée ;-)
Dans la feuille de style :
#container {
width: 1100px; <------------ ici c'est la largeur total de votre blog : colonnes + texte
padding: 0px;
background-color: #FFFFFF;
background: url
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-right: auto;
margin-left: auto;
}
#content {
float: left;
width: 700px; <------------ ici c'est la largeur de la zone texte de votre blog
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
<!--
a : { text-decoration : none }
//-->;
}
#rightbar {
float: left;
width: 200px; <------------ ici c'est la largeur de la colonne de droite
height:1300px;
background-color: #C8E476;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #ffffff;
overflow: hidden;
}
#leftbar {
float: left;
width: 200px; <------------ ici c'est la largeur de la colonne de gauche
height:1300px;
background-color: #B6D2EA;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #FFFFFF;
overflow: hidden;
Notez que 200 px (rightbar col de droite) + 200 px (leftbar col de gauche) + 700 px (content) = 1100px pour le container.
Si vous avez des bordures d'une largeur de 1px il faut aussi les ajouter à la largeur totale
28 avril 2008
Mes stats canalblog reste à 0!
Ce cas qui m'a été soumis par une lectrice a trouvé sa réponse sur le forum canalblog. N'hésitez pas à soumettre vos questions là bas, ils savent de quoi ils parlent.
La demoiselle avait fait fi de l'interdiction absolument de rentrer des widgets dans ses liens amis. Elle avait mis horloge et compteur dans ses colonnes en mode normal, ce qui pour le coup a bloqué ses stats canalblog.
Les widgets retiré tout est rentré dans l'ordre.
A bon entendeur...
Merci à elle de m'avoir donné la réponse.
On ne peut plus poster de commentaire sur mon blo
Cas classique chez le débutant-mode-avancé qui croit que Monsieur Canalblog a fait tous pleins de pages les mêmes, juste pour rendre la vie du blogeur plus compliquée...
Non!
Toutes les scripts des pages de votre blogs ne sont pas les mêmes ce qui signifie que vous ne pouvez pas copier-coller la page d'accueil de votre blog sur les autres pages! Sinon a justement ce genre de question... "Mais où qu'ils sont passés mes commentaires!"
Bon en réalité les scripts ne changent pas d'une page à l'autre sauf sur la partie du texte.
Alors comme ça arrive souvent, je vais vous copier les scripts de la zone texte de chacune des pages. Il vous suffira de les remettre dans les pages correspondantes pour que tout refonctionne.
Page d'accueil script de la zone texte
<div id="content"><div class="blogbody">
<Blogger> <BlogDateHeader>
<h2><$BlogDateHeaderDate$></h2>
</BlogDateHeader><a name="<$BlogItemNumber$>"></a> <BlogItemTitle>
<h3><$BlogItemTitle$></h3>
</BlogItemTitle>
<p><$BlogItemBody$></p>
<div class="itemfooter">Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div>
</Blogger>
<$CBControlNavLinks$>
</div></div>
Page des archives
<div id="content"><div class="blogbody">
<Blogger> <BlogDateHeader>
<h2><$BlogDateHeaderDate$></h2>
</BlogDateHeader><a name="<$BlogItemNumber$>"></a> <BlogItemTitle>
<h3><$BlogItemTitle$></h3>
</BlogItemTitle>
<p><$BlogItemBody$></p>
<div class="itemfooter">Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div>
</Blogger>
<$CBControlNavLinks$></div></div>
Page Index des archives
<div id="content"><div class="blogbody">
<h2>Toutes les archives</h2>
<p> <BloggerArchives> <a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a><br />
</BloggerArchives> </p>
<br />
<br />
<h2>Toutes les catégories</h2>
<p> <CBCategories> <a href="<$BlogCategoryURL$>"><$BlogCategoryName$></a><br />
</CBCategories> </p>
<$CBControlNavLinks$></div></div>
Page d'un message
<div id="content"><div class="blogbody">
<Blogger> <BlogDateHeader>
<h2><$BlogDateHeaderDate$></h2>
</BlogDateHeader><a name="<$BlogItemNumber$>"></a> <BlogItemTitle>
<h3><$BlogItemTitle$></h3>
</BlogItemTitle>
<p><$BlogItemBody$></p>
<div class="itemfooter">Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div>
</Blogger> <CBIfCommentsActivated>
<h2><a id="comments"></a>Commentaires</h2>
<CBComments> <a id="c<$BlogCommentId$>"></a> <BlogCommentTitle>
<h3><$BlogCommentTitle$></h3>
</BlogCommentTitle>
<p><$BlogCommentBody$></p>
<div class="itemfooter">Posté par <$BlogCommentAuthor$>, <$BlogCommentDate$> à <$BlogCommentTime$></div>
</CBComments> <CBControlForm>
<p><$CBControlForm$></p>
</CBControlForm>
<h2>Poster un commentaire</h2>
<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">
<p>
<label for="authorNickName">Nom ou pseudo :</label>
<br />
<input id="authorNickName" name="authorNickName" value="" maxlength="16" onchange="handleChange(this)" />
</p>
<p>
<label for="authorEmail">Adresse email :</label>
<br />
<input id="authorEmail" name="authorEmail" value="" maxlength="64" onchange="handleChange(this)" />
</p>
<p>
<label for="authorWebsiteUrl">Site Web (URL) :</label>
<br />
<input id="authorWebsiteUrl" name="authorWebsiteUrl" value="" maxlength="128" onchange="handleChange(this)" />
</p>
<p>
<label for="commentTitle">Titre du commentaire :</label>
<br />
<input id="commentTitle" name="commentTitle" value="" maxlength="128" />
</p>
<p>
<label for="commentBody">Commentaire :</label>
<br />
<textarea id="commentBody" name="commentBody" rows="10" cols="50"></textarea>
</p>
<p>
<label>
<input onclick="handleCheck(this)" type="checkbox" id="rememberInfo" name="rememberInfo" value="1" />
Se souvenir de mes informations personnelles</label>
</p>
<input type="submit" name="submit" value="Envoyer" />
<br />
</form>
</CBIfCommentsActivated><CBIfTrackBackActivated>
<h2><a id="trackbacks"></a>Rétroliens</h2>
<p>URL pour faire un rétrolien vers ce message :<br />
<$BlogItemTrackBackLink$></p>
<p>Liens vers des weblogs qui référencent ce message :</p>
<CBTrackBacks>
<p><a id="t<$BlogTrackBackId$>"></a> <a href="<$BlogTrackBackURL$>"><$BlogTrackBackTitle$></a> depuis <$BlogTrackBackBlogName$><br />
<$BlogTrackBackExcerpt$><br /> <a href="<$BlogTrackBackURL$>">Lire la suite >></a> </p>
<div class="itemfooter">Référencé le <$BlogTrackBackDate$> à <$BlogTrackBackTime$></div>
</CBTrackBacks> </CBIfTrackBackActivated>
<$CBControlNavLinks$></div></div>
Page d'un Auteur
<div id="content"><div class="blogbody">
<CBProfile>
<h2>A propos de l'auteur <$BlogMemberAuthorNickName$></h2>
<p>
<BlogMemberPictureURL><img src="<$BlogMemberPictureURL$>" border="0" style="FLOAT: left; MARGIN: 0px 15px 5px 0px" /></BlogMemberPictureURL>
<BlogMemberFullName><$BlogMemberFullName$><br /></BlogMemberFullName>
<BlogMemberBirthDate>Date de naissance : <$BlogMemberBirthDate$><br /></BlogMemberBirthDate>
<BlogMemberEmail>Email : <a href="<$BlogMemberNoSpamEmailLink$>">Contactez-moi</a><br /></BlogMemberEmail>
<BlogMemberIM>Messagerie instantanée : <$BlogMemberIM$> (<$BlogMemberIMType$>)<br /></BlogMemberIM>
<BlogMemberHomePage>Site Web : <a href="<$BlogMemberHomePage$>"><$BlogMemberHomePage$></a><br /></BlogMemberHomePage>
<BlogMemberCountry>Pays : <$BlogMemberCountry$><br /></BlogMemberCountry>
<BlogMemberCity>Ville : <$BlogMemberCity$><br /></BlogMemberCity>
<BlogMemberZipCode>Code Postal : <$BlogMemberZipCode$><br /></BlogMemberZipCode>
</p><div style="clear: both;height:0px;"> </div>
<BlogMemberAboutMe><h2>Quelques mots sur moi</h2>
<p><$BlogMemberAboutMe$></p>
</BlogMemberAboutMe>
<BlogMemberInterests><h2>Mes centres d'intérêt</h2>
<p><$BlogMemberInterests$></p>
</BlogMemberInterests>
<BlogMemberMovies><h2>Mes films préférés</h2>
<p><$BlogMemberMovies$></p>
</BlogMemberMovies>
<BlogMemberMusics><h2>Mes musiques préférées</h2>
<p><$BlogMemberMusics$></p>
</BlogMemberMusics>
<BlogMemberBooks><h2>Mes livres préférés</h2>
<p><$BlogMemberBooks$></p>
</BlogMemberBooks>
</CBProfile>
<$CBControlNavLinks$></div></div>
Question du jour! Lire le script et la feuille de style d'un blog qu'on visite
"Comment fait on pour lire les script et les feuilles de style des blogs qu'on visite ????"
Quand on est sur la page du site ou blog on clique sur "affichage" dans le menu à côté de la barre de navigation et on choisit "code source" ou "affichage du code source" (selon les navigateurs, ça peut être formulé différemment). Dans l'exemple sur le dernière ligne :
La page va s'afficher avec tout le script.
Pour lire la feuille de style il faut chercher dans ce script dans les 10/15 première ligne une adresse finissant pas style.css :
Dans l'exemple ci dessus la l'adresse est
http://blogtuto.canalblog.com/style/2/7/700072/style.css
En la mettant dans la barre de navigation on accède à la lecture de la feuille de style.
Bonne semaine ;-)
24 avril 2008
Trouver le code pour insérer des images dans les colonnes
La question du jour :
"Bonjour, super vos infos. J'aimerai savoir comment on peut trouver le code pour des images, si on veut mettre d'autres images, je sais je suis pas très débrouille !!! Merci d'avance"
La solution la plus simple consiste à télécharger l'image dans un Nouveau message de canalblog.
En cliquant sur l'image une fois téléchargée vous sélectionnez l'outil lien hypertexte symbolisé par les trois petits maillons. 
Pour le mode normal :
Ensuite vous faites un clic droit sur la souris et vous choisissez "code source de la sélection" ce qui donne
<a href="http://storage.canalblog.com/99/23/446950/24793364.png" target="_blank">
<img alt="Image_1" src="http://storage.canalblog.com/99/23/446950/24793364_p.png"
border="0" height="25" width="33"></a>
Ne gardez que la partie en rouge.
Et vous disposez désormais du code à insérer.
Ensuite vous procédez comme sur ce tuto pour insérer vos images dans vos colonnes
Pour le mode avancé :
vous faites <> et vous aurez le code à insérer dans les colonnes
21 avril 2008
Mettre un avertissement copyright en bas de page
Ici une question posée :
"Je cherche à mettre un texte en pied de page tout en bas avant "page suivante du style "ce blog est protégé bla bla etc" mais ne sais pas où le mettre exactement pouvez vous m'aider?"
Il faut en fait mettre la mention sur la page d'un message ET sur la page d'accueil dans l'espace blogbody. Ce qui donne :
Page d'accueil
<!--Zone du texte-->
<Blogger> <BlogDateHeader>
<h2><$BlogDateHeaderDate$></h2>
</BlogDateHeader><a name="<$BlogItemNumber$>"></a> <BlogItemTitle>
<h3><$BlogItemTitle$></h3>
</BlogItemTitle>
<p><$BlogItemBody$></p>
Si je veux que le texte apparaissent à la
fin de tous les billets sur ma page d'accueil, je le mets ici juste
avant le début de la ligne du pied du billet
<div class="itemfooter">Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div>
</Blogger>
<$CBControlNavLinks$>
Si je veux que sur la page d'accueil ce soit visible qu'une seule fois en bas de page je le mets ici
</div></div>
<!-- COLONNE DE DROITE -->
<div id="rightbar"><div class="navlinks">
Pour la page d'un message :
<div id="content"><div class="blogbody">
<Blogger> <BlogDateHeader>
<h2><$BlogDateHeaderDate$></h2>
</BlogDateHeader><a name="<$BlogItemNumber$>"></a> <BlogItemTitle>
<h3><$BlogItemTitle$></h3>
</BlogItemTitle>
<p><$BlogItemBody$></p>
Je mets mon texte ici "pas touche à mon blog ou je te casse la tête" et il apparaitra après mon texte mais avant mes commentaires
<div class="itemfooter">Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div>
</Blogger> <CBIfCommentsActivated>
<h2><a id="comments"></a>Commentaires</h2>
<CBComments> <a id="c<$BlogCommentId$>"></a> <BlogCommentTitle>
<h3><$BlogCommentTitle$></h3>
</BlogCommentTitle>
<p><$BlogCommentBody$></p>
<div class="itemfooter">Posté par <$BlogCommentAuthor$>, <$BlogCommentDate$> à <$BlogCommentTime$></div>
</CBComments> <CBControlForm>
<p><$CBControlForm$></p>
</CBControlForm>
<h2>Poster un commentaire</h2>
<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">
<p>
<label for="authorNickName">Nom ou pseudo :</label>
<br />
<input id="authorNickName" name="authorNickName" value="" maxlength="16" onchange="handleChange(this)" />
</p>
<p>
<label for="authorEmail">Adresse email :</label>
<br />
<input id="authorEmail" name="authorEmail" value="" maxlength="64" onchange="handleChange(this)" />
</p>
<p>
<label for="authorWebsiteUrl">Site Web (URL) :</label>
<br />
<input id="authorWebsiteUrl" name="authorWebsiteUrl" value="" maxlength="128" onchange="handleChange(this)" />
</p>
<p>
<label for="commentTitle">Titre du commentaire :</label>
<br />
<input id="commentTitle" name="commentTitle" value="" maxlength="128" />
</p>
<p>
<label for="commentBody">Commentaire :</label>
<br />
<textarea id="commentBody" name="commentBody" rows="10" cols="50"></textarea>
</p>
<p>
<label>
<input onclick="handleCheck(this)" type="checkbox" id="rememberInfo" name="rememberInfo" value="1" />
Se souvenir de mes informations personnelles</label>
</p>
<input type="submit" name="submit" value="Envoyer" />
<br />
</form>
</CBIfCommentsActivated><CBIfTrackBackActivated>
<h2><a id="trackbacks"></a>Rétroliens</h2>
<p>URL pour faire un rétrolien vers ce message :<br />
<$BlogItemTrackBackLink$></p>
<p>Liens vers des weblogs qui référencent ce message :</p>
<CBTrackBacks>
<p><a id="t<$BlogTrackBackId$>"></a> <a href="<$BlogTrackBackURL$>"><$BlogTrackBackTitle$></a> depuis <$BlogTrackBackBlogName$><br />
<$BlogTrackBackExcerpt$><br /> <a href="<$BlogTrackBackURL$>">Lire la suite >></a> </p>
<div class="itemfooter">Référencé le <$BlogTrackBackDate$> à <$BlogTrackBackTime$></div>
</CBTrackBacks> </CBIfTrackBackActivated>
<$CBControlNavLinks$>
Ici si je veux que ce que ce soit tout en bas après les commentaires
</div></div>
<!-- COLONNE DE DROITE -->
<div id="rightbar"><div class="navlinks">
etc
NB : si vous ne mettez les "touche pas à mon blog" que sur la page d'accueil en arrivant sur un message directement comme c'est le cas avec blog appétit on ne le verra pas. De même quelqu'un qui arrive sur la page d'accueil ne le verra pas si vous ne mettez la mention que sur le message à moins de vous laisser un commentaire.
14 avril 2008
Je veux changer la police de caractère, la couleur, la taille de mes titres de blocs
Vous avez envie de fantaisie et voulez changer la police de caractère de votre titre.
Votre feuille de style inscrit les polices de vos rubriques par défaut.
Vous pouvez donc changer dans la feuille de style vos polices.
Sinon si vous souhaitez que votre tître soit en comic sans ms que ponctuellement il vous suffira par exmple d'inscrire la police juste sur la ligne du titre. Exemple :
Un titre de bloc se présente sous cette forme sur votre script :
<div class="title">Catégories</div>
Vous voulez qu'il ait la police comic sans ms il deviendra :
Catégories
<div class="title"><font face="comic sans ms">Catégories</font></div>
Pour un titre centré ce sera :
<div class="title"><center><font face="comic sans ms">Catégories</font></div>
Pour une couleur ce sera :
<div class="title"><center><FONT COLOR="#00cc00"><font face="comic sans ms">Catégories</font></font></div>
taille
<div class="title"><center><FONT size="4"><FONT COLOR="#00cc00"<font face="comic sans ms">Catégories</font></font></font></div>
Etc...
09 avril 2008
Le contenu de mes colonnes a disparu (mode avancé)
Vous êtes passé en mode avancé et vous ne voyez plus rien ou qu'un partie du contenu d'un de vos colonnes ou des deux...
Vous devez aller jeter un oeil du côté de la feuille de style et vérifier ceci :
#rightbar { <-- colonne de droite
float: left;
width: 200px;
height: 4000px;<-- Hauteur de la colonne : c'est là que ça peut coincer si par exemple c'est à 200...
background-color: #DDDDDD;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
#leftbar { <-- Colonne de gauche
float: left;
width: 200px;
height: 4000px; <-- idem...
background-color: #DDDDDD;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
06 avril 2008
Comment filtrer mes commentaires ?
Pour x raisons, vous pouvez choisir de "filtrer" vos commentaires...Cela ne les empêchera pas...en revanche vous pourrez décider de les publier ou de les supprimer à votre convenance et avant qu'ils soient surtout visible par tous vos visiteurs !!
Comment faire ?
Cliquez sur l'onglet "PARAMETRES" puis "PARAMETRES DU BLOG" et "OPTIONS D'AFFICHAGE"
Lors de la saisie d'un commentaire sur votre blog, votre visiteur verra alors s'afficher le message suivant "Votre commentaire est enregistré, il sera bientôt validé par les responsables de ce blog."
A vous ensuite de valider leur publication ou de les supprimer.
Comment faire ?
Cliquer sur l'onglet "CONTENU" et "COMMENTAIRES".
Vous arrivez alors sur la liste de tous vos commentaires.
On vous indique l'état dans lequel ils se trouvent "Publié" ou "à Publier"
Pour le publier, vous cliquer sur "PUBLIER"
Pour le supprimer, vous cochez la case sous "sélectionner" et cliquez ensuite sur "SUPPRIMER" en bas de l'écran.
Si vous l'avez publié, il apparait ensuite en état "Publié" dans votre liste des commentaires et apparait sur votre blog !
Si vous l'avez supprimé...il n'apparait plus, ni dans votre liste, ni sur votre blog !