04 décembre 2010
Les balises : Les paragraphes
<P>
Les balises <P> et </P> permettent de définir un paragraphe.
<p>Ceci est le texte du premier paragraphe.</p>
<p>Ceci est le texte du deuxième et dernier paragraphe de cet exemple.</p>
Ceci est le texte du premier paragraphe.
Ceci est le texte du deuxième et dernier paragraphe de cet exemple.
On peut définir l'alignement du paragraphe en utilisant l'attribut ALIGN="alignement" où alignement peut prendre les valeurs LEFT, CENTER et RIGHT.
<p align=center> Paragraphe centré.</p>
<p align=right> Paragraphe aligné à droite.</p>
<BLOCKQUOTE>
Les balises <BLOCKQUOTE> et </BLOCKQUOTE> permettent de définir un paragraphe avec une marge à gauche.
<p>Ceci est un paragraphe normal.</p><blockquote>Ceci est un paragraphe en retrait. Une marge à gauche est donc formée pour tout le texte de ce paragraphe.</blockquote>Retour à la normale.
Ceci est un paragraphe normal.
Ceci est un paragraphe en retrait. Une marge à gauche est donc formée pour tout le texte de ce paragraphe.
Retour à la normale.
<PRE>
Les balises <PRE> et </PRE> permettent de définir un paragraphe préformaté : le texte apparait dans le document comme dans le texte source.
<PRE>
Première ligne.
Deuxième ligne avec retrait.
</PRE>
Première ligne. Deuxième ligne avec retrait.
<H1>, <H2>,..., <H6>
Les balises <H1>, <H2>, ..., <H6> permettent de définir des titres de paragraphes de différents niveaux.
<h1>Titre de niveau 1.</h1>
<h2>Titre de niveau 2.</h2>
<h3>Titre de niveau 3.</h3>
<h4>Titre de niveau 4.</h4>
<h5>Titre de niveau 5.</h5>
<h6>Titre de niveau 6.</h6>
Titre de niveau 1.
...
...
Titre de niveau 4.
Titre de niveau 5.
Titre de niveau 6.
<HR>
La balise <HR> permet de terminer un paragraphe par un trait horizontal.
Mon texte.<hr>
Mon texte.
La balise <HR> admet les attributs WIDTH="taille" et SIZE="taille" qui permettent de définir la largeur et l'épaisseur du trait. La taille de la largeur peut être exprimée en pixels ou en pourcentage.
<BR>
La balise <BR> permet d'effectuer un retour à la ligne.
<p>Première ligne.<br>
Deuxième ligne.<br>
Troisième ligne.</p>
Première ligne.
Deuxième ligne.
Troisième ligne.
Mettre une bannière flash sur Canalblog
Vous n'avez peut être pas remarqué, mais ma bannière est une bannière Flash...elle apparait, disparait, des fleurs tombent du ciel ou tremblent...enfin, il se passe des choses quoi...
Un petit tuto ici pour réaliser ce genre de bannière.
Une fois votre bannière réalisée, importez-là dans un message en passant par Importation d'un fichier, pour récupérer son adresse, ça ressemble à ça :
http://storage.canalblog.com/01234567890.swf
Pour afficher la bannière flash vous devez ensuite insérer votre adresse.swf deux fois dans le code suivant :
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
WIDTH="978" HEIGHT="358" align=right
CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=5,0,0,0">
<PARAM NAME="MOVIE" VALUE="http://storage.canalblog.com/adresse bannière.swf">
<PARAM NAME="PLAY" VALUE="true">
<PARAM NAME="LOOP" VALUE="true">
<PARAM NAME="WMODE" VALUE="Transparent">
<PARAM NAME="QUALITY" VALUE="high">
<EMBED SRC="http://storage.canalblog.com/adresse bannière.swf" WIDTH="978" HEIGHT="358"PLAY="true" LOOP="true" WMODE="Transparent" QUALITY="high"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
Et changer les valeurs WIDTH="978" HEIGHT="358" en mettant les dimensions de votre bannière.
Vous devez collez l'adresse de votre bannière flash à deux endroits dans le code (en gris).
Maintenant que vous avez votre code, il faut ajouter un bloc à votre feuille de style, en remplaçant les valeurs par les dimensions de votre bannière :
#header {
position:relative;
width:978px;
height:358px;
}
Vous devez supprimer les blocs suivants qui permettaient de gérer l'affichage de votre ancienne bannière (faites une copie de votre feuille de style avant de supprimer quoi que ce soit) :
#topbar-logo {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
background: url("http://storage.canalblog.com/ancienne bannière.jpg") no-repeat 0% 0%;
height: 300px;
display: block;
}
div .logolink a {
display: block;
text-decoration: none;
width: 100%;
height: 300px;
}
Ouvrez maintenant votre Page d'accueil, descendez sur la ligne <body> et placez la balise <div id="header"> </div> comme indiqué sur la capture :
Dans cet exemple j'ai du mettre la balise </div> après la balise <div id="topbar-logo"> pour permettre l'affichage de mon menu au dessus de ma bannière, si vous n'avez pas de menu comme le mien, vous pouvez mettre la balise </div> juste après </OBJECT>.
Pensez toujours à visualiser avant de valider les modifications.
Vous devez bien sur insérer ce code dans toutes vos pages html pour que votre bannière s'affiche aussi sur les autres pages de votre blog.
Nuage de tag animé Wordpress sur Canalblog
C'est vrai que ça en jette un beau nuage de tags qui tournoie sur lui même non ?
Je commencerais par remercier Esod Le blog de juju j'ai repris son tuto avec son autorisation, en faisant quelques modif...c'est comme en cuisine, je peux pas m'en empêcher :o)
Ouvrez WordPad (Menu Démarrer/Tous les programmes/Accessoires)
Puis collez les codes suivants :
<html>
<body>
<body bgcolor="#000000">
<br><br><br><br><br><br>
<center>
<ul>
<li id="wp-cumulus" class="widget wp_cumulus_widget">
<!-- SWFObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/swfobject/ -->
<script type="text/javascript" src="http://storage.canalblog.com/75/11/18753/32716842.js"></script>
<div id="wpcumuluswidgetcontent"><p style="display:none;"></p>
<p>WP
Cumulus Flash tag cloud by <a href="http://www.roytanck.com">Roy
Tanck</a> requires Flash Player 9 or better.</p></div>
<script
type="text/javascript">var
rnumber =
Math.floor(Math.random()*9999999);var widget_so = new
SWFObject("http://storage.canalblog.com/47/80/18753/32716104.swf?r="+rnumber,
"tagcloudflash",
"180", "150", "9",
"#000000");widget_so.addParam("allowScriptAccess",
"always");widget_so.addVariable("tcolor",
"0x00FFFF");widget_so.addVariable("tcolor2",
"0x00FFFF");widget_so.addVariable("hicolor",
"0x00FFFF");widget_so.addVariable("tspeed",
"100");widget_so.addVariable("distr", "");widget_so.addVariable("mode",
"tags");widget_so.addVariable("tagcloud",
"%3Ctags%3E%3Ca+href%3D%27http%3A%2F%2Fwww.demolitetuto.fr%27+class%3D%27tag-link-89%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3EDemolite%3C%2Fa%3E%0A%3Ca+href%3D%27http%3A%2F%2Ftoutitange.canalblog.com%2Ftag%2FEsod%27+class%3D%27tag-link-94%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3EEsod%3C%2Fa%3E%0A%3%3E%0A%3Ca+href%3D%27http%3A%2F%2Fdemomiam.canalblog.com%2Ftag%2FLe+grand+mechant+cook%27+class%3D%27tag-link-94%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3ELe+grand+mechant+cook%3C%2Fa%3E%3E%3C%2Ftags%3E");widget_so.write("wpcumuluswidgetcontent");</script>
</li>
</ul>
</center>
</body>
</html>
Faites Enregistrer sous, donnez un nom à votre document et ajoutez .html
Cliquez sur Enregistrer.
Votre fichier Nuage.html est désormais sur votre bureau (Si vous avez choisi cette destination d'enregistrement).
Double cliquez dessus pour l'ouvrir dans votre navigateur internet.
Vous devez obtenir ceci :
Pour modifier les liens de votre nuage de tags...je dirais plutôt nuages de liens d'ailleurs...après tout, vous en faites ce que vous voulez...
Faites un clic droit sur le fichier Nuage.html puis sélectionnez Ouvrir avec puis WordPad.
Le fichier texte va s'ouvrir :
La zone de codes à modifier est celle-ci :
"%3Ctags%3E%3Ca+href%3D%27http%3A%2F%2Fwww.demolitetuto.fr%27+class%3D%27tag-link-89%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3EDemolite%3C%2Fa%3E%0A%3Ca+href%3D%27http%3A%2F%2Ftoutitange.canalblog.com%2Ftag%2FEsod%27+class%3D%27tag-link-94%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3EEsod%3C%2Fa%3E%0A%3%3E%0A%3Ca+href%3D%27http%3A%2F%2Fdemomiam.canalblog.com%2Ftag%2FLe+grand+mechant+cook%27+class%3D%27tag-link-94%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3ELe+grand+mechant+cook%3C%2Fa%3E%3E%3C%2Ftags%3E"
Voici une capture pour que ce soit bien clair :
Je vais essayer de détailler ce charabia pour vous montrer comment insérer vos liens sans faire de dégâts.
Je compte sur vous pour être très attentif, car c'est pas simple...
Voici déjà à quoi ressemble une ligne de code pour insérer un lien :
Ca+href%3D%27http%3A%2F%2Fwww.demolitetuto.fr%27+class%3D%27tag-link-89%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3EDemolite%3C%2Fa
Dans cette ligne de code, vous devez changer uniquement ce qui est en bleu (adresse du site et le nom de votre lien).
Pour ajouter une ligne avec un lien, vous devez repérer ce code qui se trouve tout à la fin :
%3E%3E%3E%3C%2Ftags%3E
Et placez cette ligne (avec le lien) juste devant et surtout sans espace :
%3E%0A%3Ca+href%3D%27http%3A%2F%2Fwww.demolitetuto.fr%27+class%3D%27tag-link-89%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3EDemolite%3C%2Fa
Voici comment se décompose la partie de codes à modifier, pour y mettre vos liens :
En rouge les codes que vous ne devez pas modifier.
En turquoise les lignes qui permettent d'insérer vos liens, je pas modifier les codes en turquoise.
En bleu les infos à changer et à remplacer par les votre.
"%3Ctags%3E%3Ca+href%3D%27http%3A%2F%2Fwww.demolitetuto.fr%27+class%3D%27tag-link-89%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3EDemolite%3C%2Fa%3E%0A%3Ca+href%3D%27http%3A%2F%2Ftoutitange.canalblog.com%2Ftag%2FEsod%27+class%3D%27tag-link-94%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3EEsod%3C%2Fa%3E%0A%3Ca+href%3D%27http%3A%2F%2Fdemomiam.canalblog.com%2Ftag%2FLe+grand+mechant+cook%27+class%3D%27tag-link-94%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3ELe+grand+mechant+cook%3C%2Fa%3E%3E%3C%2Ftags%3E"
En plaçant toujours ce code %3E%0A%3 à la suite pour enchainer les liens, comme ceci :
Ca+href%3D%27http%3A%2F%2Fwww.demolitetuto.fr%27+class%3D%27tag-link-89%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3EDemolite%3C%2Fa%3E%0A%3Ca+href%3D%27http%3A%2F%2Ftoutitange.canalblog.com%27+class%3D%27tag-link-89%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3EEsod %3C%2Fa
Etc...à répéter autant de fois que vous avez de liens.
Tous les codes doivent être collés les uns aux autres...en prenant soin de mettre au début le code d'ouverture "%3Ctags%3E%3 et à la fin le code de fermeture %3E%3E%3C%2Ftags%3E"
Comme indiqué plus haut sur la capture.
Une fois renseigné votre fichier doit ressembler à ça :
Vous n'avez plus qu'à l'enregistrez en .html et vérifier que tout est ok en double cliquant sur fichier.
Pour insérer le nuage dans une colonne, récupérer seulement cette partie de code :
<div class="title">NUAGES DE LIENS</div>
<br>
</div>
<center>
<ul>
<li id="wp-cumulus" class="widget wp_cumulus_widget">
<!--
SWFObject embed by Geoff Stearns geoff@deconcept.com
http://blog.deconcept.com/swfobject/ --><script
type="text/javascript"
src="http://storage.canalblog.com/75/11/18753/32716842.js"></script><div
id="wpcumuluswidgetcontent"><p style="display:none;">
</p><p>WP
Cumulus Flash tag cloud by <a href="http://www.roytanck.com">Roy
Tanck</a> requires Flash Player 9 or better.</p>
</div><script
type="text/javascript">var rnumber =
Math.floor(Math.random()*9999999);var widget_so = new
SWFObject("http://storage.canalblog.com/47/80/18753/32716104.swf?r="+rnumber,
"tagcloudflash", "180", "150", "9",
"#000000");widget_so.addParam("allowScriptAccess",
"always");widget_so.addVariable("tcolor",
"0x00FFFF");widget_so.addVariable("tcolor2",
"0x00FFFF");widget_so.addVariable("hicolor",
"0x00FFFF");widget_so.addVariable("tspeed",
"100");widget_so.addVariable("distr", "");widget_so.addVariable("mode",
"tags");widget_so.addVariable("tagcloud",
"%3Ctags%3E%3Ca+href%3D%27http%3A%2F%2Fwww.demolitetuto.fr%27+class%3D%27tag-link-89%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3EDemolite%3C%2Fa%3E%0A%3Ca+href%3D%27http%3A%2F%2Ftoutitange.canalblog.com%2Ftag%2FEsod%27+class%3D%27tag-link-94%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3EEsod%3C%2Fa%3E%3E%0A%3Ca+href%3D%27http%3A%2F%2Flantredulutin.com%27+class%3D%27tag-link-94%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3ELe+Lutin%3C%2Fa%3E%0A%3Ca+href%3D%27http%3A%2F%2Fdemolitetuto.canalblog.com%27+class%3D%27tag-link-89%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3EBienvenue+dans+le+monde+reel%3C%2Fa%3E%0A%3Ca+href%3D%27http%3A%2F%2Fdemomiam.canalblog.com%27+class%3D%27tag-link-89%27+title%3D%271+sujet%27+style%3D%27font-size%3A+8pt%3B%27%3ELe+grand+mechant+cook%3C%2Fa%3E%3E%3E%3C%2Ftags%3E");widget_so.write("wpcumuluswidgetcontent");</script>
</li></ul>
</center>
Pour remplacer les liens par des tags, vous devez mettre l'adresse de vos tags à la place de l'adresse des sites...
Ex : www.demolitetuto.canalblog.com/tag/liens à la pace de www.demolitetuto.fr, pensez à remplacer le titre du lien Demolite, par celui du tag.
Lorsque vous entrez un titre pour vos liens, les (é) ne sont pas acceptés, vous devez mettre un (e) sans accent.
Comme ceci :
Le grand mechant cook !
Vous remarquerez que dans les lignes de codes ci-dessus le titre des liens est écrit
comme ceci :
Le+grand+mechant+cook avec des + pour remplacer les espaces, mais après quelques tests je me suis aperçue que l'on pouvait mettre les espaces, alors allons-y...
Pour ceux que ça intéressent, voici à quoi correspondent certains codes :
Code pour mettre un / = %2F
Code pour mettre un ? = %3F
Code pour mettre un # = %23
Code pour mettre un ; = %3B
Code pour mettre un : = %3A
Code pour mettre un < = 3C
Code pour mettre un ' = 27
Voilà...je pense que je vous ai tout dit !
Comme dirait Esod...Bon courage ;o)
Mettre vos colonnes à la même hauteur que le #content
Quoi...y a quelqu'un qui n'est pas #content ici ? :o)
Ne me dites pas que depuis le temps que vous venez trainer vos guêtres ici vous ne savez toujours pas ce qu'est le #Content ?
Si vous êtes un petit nouveaux...soyez heureux...voire #content, car aujourd'hui vous allez apprendre quelque chose.
Le #Content est la zone centrale de votre blog, celle ou s'affiche vos articles, coincé sous la bannière et entre les colonnes...
Sur certains blogs, lorsque qu'ils y a des couleurs différentes pour les colonnes, le content et le container...
Les colonnes en couleur sont à des hauteurs différentes et c'est pas jojo...
Pour éviter ça, il suffit d'ajouter :
height: 2000px; à vos blocs : Content, rightbar et leftbar dans la feuille de style, comme ceci :
#content {
float: left;
width: 600px;
height: 2000px;
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;
}
#rightbar {
float: right;
width: 200px;
height: 2000px;
background-color: #FF6699;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
#leftbar {
float: left;
width: 200px;
height: 2000px;
background-color: #FF6699;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
}
Vous pouvez évidement modifier la valeur 2000px qui est un exemple et qui ne s'applique pas à tous les blogs...
Au final, voilà ce que ça donne :
Sachez qu'il est également possible en changeant juste le code couleur de #Container de faire descendre les colonnes jusqu'en bas à condition qu'elles soient de la même couleur...
Réduire l'affichage une playlist Deezer
Il est pour toi celui là Yoyo...j'ai récupéré le code de ta playlist sur ton blog pour réaliser ce tuto.
Yoyo se demandait ce matin au réveil..."Mais pourquoi mon player Deezer n'est pas aussi petit que celui de Demolite!?"
Ben tout simplement par ce que son player est une playlist...avec plusieurs titres, ce qui explique pourquoi son affichage est plus grand que celui d'un player avec un seul titre.
En tripatouillant comme à mon habitude les codes, je me suis aperçue que l'on pouvait réduire l'affichage des players en modifiant simplement les valeurs de width: 180px et height: 236px dans le script.
Voila le script tel qu'il est lorsque vous le copiez sur le site Deezer (j'ai fait quelques retours à la ligne pour que le script soit plus aéré).
<div style="width: 180px; height: 236px;">
<object width="180" height="236">
<param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=12008498&lang=fr&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=3490844">
<embed src="http://www.deezer.com/embedded/widget.swf?path=12008498&lang=fr&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=3490844" type="application/x-shockwave-flash" width="180" height="236">
</object>
<br><font size="1" color="#000000" face="Arial">Découvrez <a href="http://www.deezer.com/fr/jacques-brel.html">Jacques Brel</a>!</font>
</div>
Maintenant nous allons voir ce que l'on peut supprimer...et aussi modifier pour changer l'affichage.
<div style="width: 180px; height: 236px;">
<object width="180" height="236">
<param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=12008498&lang=fr&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=3490844">
<embed src="http://www.deezer.com/embedded/widget.swf?path=12008498&lang=fr&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=1&autoShuffle=0&id=3490844" type="application/x-shockwave-flash" width="180" height="236">
</object>
<br><font size="1" color="#000000" face="Arial">Découvrez <a href="http://www.deezer.com/fr/jacques-brel.html">Jacques Brel</a>!</font>
</div>
Commencez par supprimer les balises en bleu, ensuite pour enlever le lien sous le player (qui vous envoie sur Deezer pour en savoir plus sur "Jacques Brel") supprimez les codes en vert.
Maintenant pour réduire l'affichage du player vous devez modifier les valeurs de la balise object et aussi celle de embed.
Comme ceci :
<object width="176" height="85">
<param name="movie"
value="http://www.deezer.com/embedded/widget.swf?path=12008498&lang=fr&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=0&autoShuffle=0&id=3490844">
<embed
src="http://www.deezer.com/embedded/widget.swf?path=12008498&lang=fr&colorBack=0x525252&colorVolume=0x00CCFF&colorScrollbar=0x666666&colorText=0xFFFFFF&autoplay=0&autoShuffle=0&id=3490844"
type="application/x-shockwave-flash"
width="176" height="85">
</object>
Mettez "85" pour height et "176" pour width au deux endroits dans le code.
Pour réduire le player à un seul titre le principe est exactement le même, ça permet d'enlever la ligne grise sous le player avec écrit "Deezer.com et pop-up"...
Voilà, c'est de la bidouille...mais ça marche !
Une vraie Page d'accueil pour votre blog
Voici un exemple de page d'accueil : Le grand méchant cook !
Pour tout virer de la page d'accueil c'est rapide, mais le problème c'est que le dernier message posté est censé s'afficher sur la page d'accueil, alors du coup il ne s'affiche pas sur la page suivante, celle où se trouve tout le contenu du blog, et donc tous les messages...(*des explications en bas de page, sur comment forcer l'affichage de ce dernier message sur la page suivante).
Enfin, après moult tests et une recherche sur le forum de Canalblog, grâce à un message de kyungjin et un autre d'Alérion, j'ai fini par tester autre chose qui a marché !
A la bonne heure...
Ouvrez votre page d'accueil et faites le grand ménage !
Supprimez le contenu des colonnes en enlevant tous les codes qui se trouvent entre les lignes de codes indiquées sur la capture, puis remplacez les codes de Content (votre page centrale) par ceux encadrés en rouge.
<div> <blogger> </div>
<center><img src="Adresse de l'image que vous voulez mettre"></center>
<center><p>Ou écrivez ici, le message de bienvenue ou ce que
vous voulez faire apparaitre sur votre page d'accueil, <br>sans
oublier de mettre des balises pour que votre texte soit mis en
forme.</p></center>
<center><a href="http://demolitetest.canalblog.com/archives/p0-0.html">Page suivante »</a></center>
<div style="display:none"> </blogger> </div>
Vous devez changer l'adresse dans la page suivante, mettez celle de votre blog en vert .
Voilà ce que ça donne : (si comme moi vous n'avez mis qu'une image)
Pour empêcher l'affichage de la bannière et supprimer d'éventuels titres ou descriptions du blog, votre ligne du <body> doit être comme ceci : <body> <div id="container"> <div id="leftbar"> <div class="navlinks">
Maintenant, lorsque vous cliquez sur Page suivante >> vous arrivez sur la page des archives où se trouvent tous vos articles.
Vous pouvez ajouter un cadre ou n'importe quoi d'autre, du moment que vous placez les codes au bon endroit.
Ajoutez ce bloc dans votre feuille de style :
.cadre {
background: #404040;
color: #000000;
border: dotted 2px #FFFFFF;
padding: 15px;
margin-bottom: 10px;
}
Changez les codes couleurs et mettez solid à la place de dotted si vous voulez un cadre avec des bords pleins, réduisez ou augmentez les px pour des bords plus épais ou plus fins.
Le padding pour agrandir le cadre et le margin-bottom pour laisser un espace plus grand entre le cadre et le Page suivante >>.
Ajoutez votre texte entre les balises <div class="cadre">Votre texte ici</div> dans la page d'accueil comme sur la capture.
Comme ceci :
<div class="cadre">
Vous pouvez également ajouter un cadre pour mettre votre message de bienvenue...
</div>
Voilà...à vous de jouer maintenant !
Quelques explications :
*Pour forcer l'affichage du dernier article publié sur la page suivante (celle des archives), il faut récupérer l'adresse de Page suivante >> en bas de page qui ressemble à ça : http://demolitetest.canalblog.com/archives/p1-1.html si vous avez choisi d'afficher seulement 1 article sur la page d'accueil, si vous avez choisi les 5 articles elle sera comme ceci : http://demolitetest.canalblog.com/archives/p5-5.html.
Donc pour afficher le dernier article en page des archives il faut modifier l'adresse et mettre p0-0.
Et hop, notre dernier article s'affiche sur la page suivante.
Passons maintenant à quelques explications sur la balise <blogger></blogger> qui normalement entoure le contenu des codes qui permettent l'affichage de votre page centrale (le Content).
La balise <div> et <div style="display:none"> ont fait leur apparition.
<div> <blogger> </div>
<div style="display:none"> </blogger> </div>
Ce qui permet d'empêcher l'affichage du page suivante >> d'origine, celui qui envoie sur la page des archives, mais ou il manque le dernier message publié...(j'espère que je ne vous embrouille pas trop !)
C'est pour ça que l'on a ajouté la ligne <a href="http://demolitetest.canalblog.com/archives/p0-0.html">Page suivante »</a> pour remplacer l'ancienne qui ne marchait plus avec la nouvelle configuration du blog.
Toutes ces précisions font références à ce bloc de code (donné plus haut):
<div> <blogger> </div>
<center><img src="Adresse de l'image que vous voulez mettre"></center>
<center><p>Ou écrivez ici, le message de bienvenue ou ce que vous voulez faire apparaitre sur votre page d'accueil, <br>sans oublier de mettre des balises pour que votre texte soit mis en forme.</p></center>
<center><a href="http://demolitetest.canalblog.com/archives/p0-0.html">Page suivante »</a></center>
<div style="display:none"> </blogger> </div>
Maintenant lorsque l'on clique sur la bannière pour faire un retour à la page d'accueil, on tombe sur la page de présentation du blog qui est vide et ne présente plus trop d'intérêt pour la navigation des visiteurs...
Il faut donc modifier la ligne du body dans toutes les pages...
Ce que nous allons faire, c'est changer l'adresse automatique qui renvoie sur la page d'accueil de notre blog pour mettre l'adresse de notre page des archives qui est maintenant notre page avec tout le contenu de notre blog...ou presque.
Ouvrez la page des archives, et sur la ligne <body> vous devez avoir ceci :
Remplacez le code <a href="<$BlogURL$>"</a> par celui là :
<a href="http://demolitetest.canalblog.com/archives/p0-0.html"></a>
En mettant l'adresse de votre blog évidement...
Vous devez répéter cette manip sur toute les pages, sauf sur la page d'accueil et sur la feuille de style.
Sur la page d'accueil, vous pouvez même supprimer le code <a href="<$BlogURL$>"</a>, il ne sert plus à rien...
Maintenant, lorsqu'on se balade sur votre blog, on peut revenir à la page des archives sans passer par la page d'accueil...
Page d'accueil sans colonnes
Voici comment n'avoir que le dernier article posté sur sa page d'accueil.
Pour cela il faut supprimer le contenu des colonnes dans la page d'accueil et ensuite aller dans Paramètres/Options d'affichage et de mettre 1 dans la première case, qui gère le nombre d'article sur la page d'accueil.
Voici une vidéo pour vous montrer quels codes supprimer ou plutôt quels codes ne pas supprimer !
Il doit absolument rester les lignes de codes que j'ai déplacé au centre...et bien sur ne pas toucher aux codes de la page centrale (Content).
Voilà, c'est tout...une fois que vous avez fait ça, il ne reste plus que votre bannière et le dernier message sur votre page d'accueil, le page suivante >> permet aux visiteurs de passez sur les autres pages, qui elles ont gardé le contenu de leurs colonnes.
Mettre du texte dans sa bannière
Voici comment mettre du texte dans sa bannière...
Commencez par ouvrir votre page d'accueil, et sur la ligne <body> repérez la balise <div id="topbar"></div> si vous n'avez pas fait de modification pour supprimer le titre de votre blog, vous devez avoir à l'intérieur de cette balise les balises suivantes (en bleu) :
<div id="topbar"> <h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1> <h2><$BlogDescription$></h2> </div>
Supprimez-les.
Coupez la balise restante <div id="topbar"></div> et placez la devant la balise <div class="logolink"> qui se trouve sur la même ligne vers la gauche.
Ce qui donne ceci.
La flèche vous indique l'endroit où vous devez écrire votre texte, en ajoutant des balises pour mettre le texte en forme...
<div id="topbar"><p><font color="#FFFFFF">Bla bla dans ma bannière<br>je peux maintenant écrire ce que je veux !<br></font></p></div><div class="logolink">
Mais pour que votre texte soit placé correctement, vous devez avant modifier le bloc #topbar dans la feuille de style, ce qui permettra de le centrer avec margin-left, de le descendre ou de le remonter dans la bannière, de choisir la police, la taille du texte etc...
Pour vous simplifier la tâche copiez ce bloc et collez-le à la place du votre, faites ensuite les modifications que vous désirez...
#topbar {
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: justify;
padding: 40px;
margin-left: 280px;
}
Voila, c'est fini !
Cela doit donner ça dans votre page d'accueil :
Merci à Riesseg pour ce tuto.
Anti clic droit avec menu
Sujet déjà traité ici, mais cet anti-clic droit est un peu spécial...lorsqu'un visiteur fait un clic-droit sur votre blog, un petit menu s'ouvre sous le curseur.
Voir l'effet sur cette page !
Personnellement je ne suis pas trop pour ce genre de gadget, je parle de l'anti-clic droit...car vous l'aurez surement remarqué je suis pour le partage et l'échange...et puis de toute façon si quelqu'un veut vous piquer une photo ou un texte il pourra toujours le faire...
Disons que ça peut en dissuader quelques un...
Ouvrez votre page d'accueil et copiez-collez le code suivant juste avant la balise </head> :
<script type="text/javascript" src="http://storage.canalblog.com/94/66/255038/23216420.js" ></script>
<meta name="robots" content="index,follow" />
<div id="menuClicDroit" style="visibility:hidden;" >
<ul>
<li><a href="http://lestuto2demolite.canalblog.com/" class="newWindow">Retour à l'Accueil</a></li>
<li><a href="http://demomiam.canalblog.com/" class="newWindow">Mon autre blog !</a></li>
<li><span><u>Pour I.Explorer uniquement</u></span></li>
<li><a href="#" onclick="this.style.behavior='url(#default#homepage)'; this.setHomePage(location.href); return false;">Les tuto de Demolite en page d'accueil</a></li>
<li><a href="javascript:window.external.AddFavorite(location.href, document.title);">Ajouter aux favoris</a></li>
</ul>
</div>
Dans ce code vous avez entre les balises <ul> </ul> les lignes de votre menu, vous pouvez en ajouter ou en supprimer.
Les 2 dernières lignes permettent aux utilisateurs d'Internet Explorer (si il en reste) de mettre votre blog en page d'accueil et dans les favoris :o)
Mais rien ne vous empêche de mettre autre chose à la place...
Après avoir fait les modifications Validez.
Vous devez copier-coller ce code sur toutes les pages ou vous voulez installer l'anti-clic droit.
Ouvrez maintenant vote feuille de style et copiez-collez les codes suivants en bas de page.
#menuClicDroit {
position:absolute;top:0px;left:0px;z-index:500;visibility:hidden;
background-color:#C4C4C4;
padding:5px;
color: #FFFFFF;}
#menuClicDroit li { list-style-type:none; margin:0px; padding:0px }
#menuClicDroit ul { margin:0px;padding:0px }
#menuClicDroit a { text-decoration:none; color:#000000; }
#menuClicDroit a:hover { text-decoration:none; color:#FFFFFF; }
#menuClicDroit {position:absolute;top:0px;left:0px;z-index:500;visibility:hidden;border:2px dotted #FFFFFF;padding:3px;}
#menuClicDroit span{display:block; margin-top:5px; margin-bottom:1px;}
Vous pouvez modifier l'apparence de votre menu anti clic droit en changeant les codes couleur etc...
Supprimer la liste des mois dans le bloc des Archives
Voici comment supprimer la liste des mois dans les archives qui s'affichent dans votre colonne.
Ceci est le bloc entier 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>
Cette ligne correspond au titre du bloc des Archives :
<div class="title">Archives</div>
Ces lignes correspondent à la liste des mois :
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
Et enfin :
<li><a href="<$BlogArchiveFileName$>">Toutes les archives</a></li>
Qui correspond à la ligne "Toutes les archives"...qui suffit largement ! En cliquant sur le lien vous arrivez sur la page de l'index des archives.
Donc, supprimer cette partie :
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
Ce qui donnera ça au final :
<div class="title">Archives</div>
<ul>
<li><a href="<$BlogArchiveFileName$>">Toutes les archives</a></li>
</ul>
« 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
