Les tuto 2 Demolite

04 décembre 2010

Mettre une bannière flash sur Canalblog

Posté par Demolite - Dans la catégorie Canalblog
Tags : bannière, Canalblog, flash, Mode Avancé

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://p0.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 :

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.

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

Commentaires désactivés actuellement : [2]

Nuage de tag animé Wordpress sur Canalblog

Posté par Demolite - Dans la catégorie Canalblog
Tags : Canalblog, Mode Avancé, Nuage de tag

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)

Sans_titre_5

Puis collez les codes suivants :

<script type="text/javascript" src="http://p7.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://p4.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

Sans_titre_6

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.

Sans_titre_7

Vous devez obtenir ceci :

Nuages de liens Demolitetuto

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.

Sans_titre_8

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">
<script type="text/javascript" src="http://p7.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://p4.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)

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

Commentaires désactivés actuellement : [2]

Mettre vos colonnes à la même hauteur que le #content

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

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...

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

Commentaires désactivés actuellement : [5]

Réduire l'affichage une playlist Deezer

Posté par Demolite - Dans la catégorie Truc et Astuces
Tags : Affichage, Divers, Musique, Player, Playlist, Trucs et Astuces

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.

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 :

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 !

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

Commentaires désactivés actuellement : [1]

Une vraie Page d'accueil pour votre blog

Posté par Demolite - Dans la catégorie Canalblog
Tags : Canalblog, Mode Avancé, Page d'Accueil

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.

Sans_titre_1

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.

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):

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 :

Sans_titre_7

Remplacez le code <a href="<$BlogURL$>"</a> par celui là :

Sans_titre_6

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...

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

Commentaires désactivés actuellement : [17]

Page d'accueil sans colonnes

Posté par Demolite - Dans la catégorie Canalblog
Tags : Canalblog, Colonne, Mode Avancé, Page d'Accueil

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.

Sans_titre_1

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.

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

Commentaires désactivés actuellement : [0]

Mettre du texte dans sa bannière

Posté par Demolite - Dans la catégorie Canalblog
Tags : bannière, Canalblog, Mode Avancé, texte

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) :

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.

Sans_titre_4

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...

Sans_titre_2

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.

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

Commentaires désactivés actuellement : [0]

Anti clic droit avec menu

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

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> :

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...

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

Commentaires désactivés actuellement : [0]

Supprimer la liste des mois dans le bloc des Archives

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

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 :

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 :

Ce qui donnera ça au final :

<div class="title">Archives</div>
<ul>
<li><a href="<$BlogArchiveFileName$>">Toutes les archives</a></li>
</ul>

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

Commentaires désactivés actuellement : [0]

Laisser un espace entre les blocs

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

Il suffit d'ajouter entre vos blocs, là où vous voulez laisser un espace la balise <p> ou la balise <br> si vous voulez laisser plusieurs lignes mettez autant de <br> que vous voulez de ligne.

Exemple, pour laisser un espace entre le Calendrier et la ligne de Toutes les archives, il faut placer la balise <p> comme ceci :

<ul>
<li><center><a href="<$BlogArchiveFileName$>">Toutes les archives</a></center></li>
</ul>

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

Commentaires désactivés actuellement : [3]

« Début ‹ Précédent 1 2 3 4 5 6 7 8 Suivant › Fin »

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

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

04 décembre 2010

Mettre une bannière flash sur Canalblog

Nuage de tag animé Wordpress sur Canalblog

Mettre vos colonnes à la même hauteur que le #content

Réduire l'affichage une playlist Deezer

Une vraie Page d'accueil pour votre blog

Page d'accueil sans colonnes

Mettre du texte dans sa bannière

Anti clic droit avec menu

Supprimer la liste des mois dans le bloc des Archives

Laisser un espace entre les blocs