Bienvenue dans le monde réel...

3 février 2009

METTRE UNE BANNIERE FLASH SUR CANABLOG

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

Je prépare un tuto pour réaliser ce genre de bannière, mais il sera publié sur mon autre blog Demolitetuto.fr, alors allez-y de temps en temps ou bien inscrivez-vous à ma Newsletter pour ne rien rater.

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 :

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

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("https://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 pour que votre bannière s'affiche aussi sur les autres pages.

Posté par Demolite à 10:11 - Commentaires […] - Permalien [#]

Tags: bannière, Flash

Partager cet article

Vous aimez ?

0 vote

14 janvier 2009

NUAGE DE TAGS WORDPRESS SUR CANALBLOG

Salut les gens,

Bon d'accord...j'avais dis que j'arrêtais les tuto sur ce blog...et c'est vrai !

Mais comme j'ai une belle nouveauté à vous faire partager me revoilà avec un tuto qui je pense devrait vous plaire.

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

Ouvrez WordPad (Menu Démarrer/Tous les programmes/Accessoires)

Sans_titre_5

Puis collez les codes suivants :

<script type="text/javascript" src="https://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("https://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 gris (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 gris clair 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="https://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("https://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 tout dit !

Comme dirait Esod...Bon courage ;-)

Posté par Demolite à 21:26 - Commentaires […] - Permalien [#]

Tags: tags, animation, nuage

Partager cet article

Vous aimez ?

0 vote

5 janvier 2009

Tous mes Voeux de bonheur...

Bonjour à tous,

Je vous présente tous mes vœux de bonheur pour cette nouvelle année 2009...

Qu'elle soit sous le signe de la réussite dans tous les domaines...

Et bien sur de jolis blogs à tous les étages !!!

Demolitetuto is not dead...

J'ai juste changé de support, mais je continue à faire des tuto qui vous intéresseront surement, pour le vérifier, je vous invite à vous inscrire à ma Newsletter qui vous sera envoyée à chaque mise en ligne d'un nouveau tuto sur mon blog :

Demolitetuto.fr

Pour vous inscrire, c'est ici :

A bientôt !
Demolite.

Posté par Demolite à 14:18 - Commentaires […] - Permalien [#]

Partager cet article

Vous aimez ?

0 vote

31 octobre 2008

Oyez OYez...

Y a du nouveau sur Demolitetuto...

En fait, je viens vous annoncer la fin des tutos sur ce blog, je me suis lancée il y a quelques jours en achetant un nom de domaine et en créant un nouveau site.

J'ai dépassé les 300 tutos dernièrement sur ce blog et j'ai envie de passer à autre chose...

Maintenant je travaille sur Worpress et avec FireFTP ça fait tout bizarre...

Pas facile au début...heureusement que j'ai trouvé une bonne âme "Le petit lutin" qui a volé à mon secours, car elle aussi a sauté le pas il y a quelques mois...les rôles se sont inversés, avant c'était moi la maîtresse, aujourd'hui c'est elle !

La roue tourne comme on dit...mais si tu passes par là, Lulu...dis toi que j'ai bien l'intention de rattraper mon retard...et de reprendre ma place [Chesse]

C'est pas du tout la même chose, pour le moment je suis dans la découverte des possibilités et aussi l'apprentissage de ce nouvel espace d'administration...

Alors ne m'en voulez pas si je ne ne réponds pas à vos commentaires...je suis très occupée en ce moment.

Allez, je vous retrouverais peut être sur Demolitetuto.fr si un jour vous aussi vous sautez le pas.

Je suis entrain de refaire le design de ce blog pour le mettre aux couleurs sur nouveau ça peut prendre quelques temps, ne faites pas gaffe aux trucs bizarres, car j'ai renoncé à exporter mes articles sur Worpress, c'est vraiment trop de boulot, je vais mettre un lien vers ce blog et ça ira bien comme ça.

Posté par Demolite à 15:10 - Commentaires […] - Permalien [#]

Partager cet article

Vous aimez ?

0 vote

29 octobre 2008

METTRE UNE HORLOGE OU UN COMPTEUR EN MODE STANDARD

Oui...c'est possible, encore un tour de passe passe de l'aigle royal Alérion...

Ceux qui n'ont pas encore sauté le pas du Mode avancé vont faire des bons, et pouvoir eux aussi rivaliser en affichant la plus belle des horloges ou un compteur au top...Mais, il y a un "mais" pour que votre horloge reste en page d'accueil le message contenant le script doit rester afficher en page d'accueil, si il passe en page suivante...exit l'horloge !

Donc, vous devez régulièrement changer la date de votre message pour qu'il reste en page d'accueil, pour ne pas à avoir à le faire trop souvent, vous pouvez changer l'affichage du nombre de message sur votre page d'accueil (dans Paramètres/Options d'affichage) et l'augmenter le nombre dans la première case, comme ça vous êtes tranquille quelques temps...

Si ça vous saoule, passez en Mode avancé et le problème sera résolu...[Moqueur]

Ouvrez un Nouveau message et passez le en Mode Html.

Collez ensuite les lignes suivantes dans votre message puis collez entre ces deux balises le script de votre horloge (encadré en gris) ou de votre compteur, comme ceci (pour afficher l'horloge dans la colonne de gauche) :

Ou ces codes là, pour afficher l'horloge dans la colonne de droite :

Vous pouvez mettre un Player Deezer aussi, et placer le script du Player dans le même message, juste en dessous du script de l'horloge, en ajoutant la balise <p> ou <br> entre les deux scripts pour laisser un espace entre votre horloge et votre Player Deezer dans votre colonne...

Come ceci :

Posté par Demolite à 08:00 - Commentaires […] - Permalien [#]

Tags: horloge, player, mode standard, compteur

Partager cet article

Vous aimez ?

0 vote

28 octobre 2008

METTRE UNE IMAGE POUR LE RETOUR EN HAUT DE PAGE

Voici le code pour retourner en haut de page :

Pour mettre une image à la place du texte, il suffit de coller la ligne suivante contenant votre image à la place du texte "haut de page" comme ceci :

Posté par Demolite à 07:50 - Commentaires […] - Permalien [#]

Tags: Images, haut de page

Partager cet article

Vous aimez ?

0 vote

27 octobre 2008

UNE BARRE DE DEFILEMENT (SCROLLBAR) POUR VOTRE BLOG...

Si vous voulez que votre fond d'écran ainsi que votre bannière reste fixe et donc toujours à l'écran lors de la navigation sur votre blog, c'est le tuto qu'il vous faut.

Je m'explique...

Cette barre de défilement installée dans votre colonne de droite, permet de faire défiler le contenu de votre blog, c'est à dire la page centrale (#Content) + les 2 colonnes...

Comme ceci :

Ouvrez votre page d'accueil, sur la ligne <body> collez la ligne de code suivante juste avant la balise <div id="leftbar"> :

Comme ceci :

Dans cet exemple, #Container est égal à 800px...(dans la ligne de code j'ai mis le width à 799px pour que ma barre de défilement soit bien dans le prolongement de la bannière...)

Sans_titre_3

Donc, le width doit être équivalent ou légèrement en dessous du width de Container, pour laisser la place aux bordures, à vous de faire des tests pour voir quelle valeur est idéale sur votre blog...

Le height c'est la hauteur de la page en défilement, même chose...vous pouvez modifier cette valeur.

Posté par Demolite à 08:00 - Commentaires […] - Permalien [#]

Tags: tuto en vidéo, défilement, scrollbar

Partager cet article

Vous aimez ?

0 vote

26 octobre 2008

METTRE LE DIAPORAMA DE VOS ALBUMS PHOTOS DANS UN MESSAGE

Vous ne le savez peut être pas encore, mais vous pouvez très bien créer un Album Photo Fantôme...
C'est à dire, qu'il ne sera pas diffusé sur votre blog...

Pourquoi faire me direz-vous !?
Bin, imaginez que vous avez des photos que vous voulez seulement diffuser dans un article et non pas dans une colonne de votre blog...
Et bien, c'est possible...

Il faut rendre l'album invisible sur votre blog, récupérer le code source du Diaporama puis l'insérer dans un article, ni vu ni connu...

Pour cela, au moment où vous créez cet album, allez dans Configurer et mettez Non, dans la case comme ci-dessous :

Sans_titre_6

Dans ce cas l'album ne sera pas affiché avec les autres sur les pages de vos blogs...

Par contre, pour récupérer l'adresse de votre Diaporama, qui lui sera diffuser dans un message, il vous suffit de cliquez sur Voir l'album pour récupérer le code source.

Une fois sur la page de l'album invisible...

Sélectionnez le Diaporama et choisissez Code source de la sélection, si vous n'avez pas cette option dans le clic droit, affichez le code source de la page et repérez la ligne de code du Diaporama.

Copiez la ligne de code suivante :

Il ne vous reste plus qu'à coller cette ligne de code dans votre article en Mode Html.

Lorsque vous repassez votre message en Mode texte vous obtenez ceci :

Cliquez ici pour visionner le Diaporama

Il est également possible de copier les vignettes de votre album photo et de faire la même manip qu'avec le Diaporama, pour les afficher dans un message...

Sans_titre_8

Posté par Demolite à 08:00 - Commentaires […] - Permalien [#]

Tags: Albums, photos, Diaporama

Partager cet article

Vous aimez ?

0 vote

25 octobre 2008

METTRE EN FORME VOS MENUS DEROULANTS

Pour personnaliser vos menus déroulants, c'est à dire choisir la largeur, la couleur du texte, la couleur du fond, et les bords...

Collez dans votre feuille de style le bloc suivant, en modifiant les codes couleurs et la taille du width.

select {
      color: #000000;
      background-color: #FFFFFF;
      width: 190px;
      border-top : 2px solid #910000;
      border-left : 2px solid #910000;
      border-right : 2px solid #910000;
      border-bottom : 2px solid #910000;
}

Voilà ce que ça donne :

Posté par Demolite à 08:00 - Commentaires […] - Permalien [#]

Tags: menu, déroulant

Partager cet article

Vous aimez ?

0 vote

24 octobre 2008

METTRE UN PLAYER DANS UN ALBUM PHOTO

Si vous n'avez pas encore apporté de modifications à vos albums photos, il n'est pas vraiment conseillé d'ajouter un Player dans les pages de vos albums, car à chaque fois que vos visiteurs cliquent sur une photo dans la page de présentation d'un album, la page se recharge et la musique est coupée.

Même chose dans la page d'une photo d'un album, le fait de faire défiler les vignettes
avant << et après >> recharge la page et coupe la musique [Pfff]

Alors vous pouvez quand même mettre un Player...mais je ne suis pas certaine que ça serve à grand chose...

Pour mettre un Player comme ci-dessus, récupérez un script sur le site Deezer ou Myspace, et collez-le dans la page de présentation d'un album ou encore dans dans la page d'une photo d'un album.

Pour éviter d'avoir les pavés de pubs sous le Player, gardez uniquement cette partie du script :

En général, peut importe le site qui vous donne le script, l'essentiel se trouve entre les balises <embed> </embed>

Pour placer le Player au dessus du titre des photos, collez le script comme ceci :

Sans_titre_6

Voici l'autre solution que je vous propose...

C'est de mettre dans la page de présentation d'un album une page de musique non-stop...

Je vous donne le code de la Playlist qui se trouve sur ma page d'accueil, mais si vous êtes courageux vous pouvez créer la votre [Chesse] car c'est pas dit qu'on ai les mêmes gouts musicaux...

Collez ce code la ou vous voulez que le logo s'affiche, il s'ouvre dans une nouvelle page et permet une navigation sans coupure de musique...

Si vous avez modifié vos albums pour un affichage de vignettes sur une même page comme ceci :

Vous pouvez placez un Player...bien que la musique non-stop soit quand même à mon humble avis la solution idéale...

Collez le script dans votre page de présentation d'un album sous la ligne <body>

Voilou..

Posté par Demolite à 08:00 - Commentaires […] - Permalien [#]

Tags: Albums, photos, musique, player

Partager cet article

Vous aimez ?

0 vote