Html - Exemples d' Alérion

« juillet 2008
dim	lun	mar	mer	jeu	ven	sam
		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

30 mai 2007 - Protection des photos

on, aller, je suis de bonne humeur aujourd'hui,

Donc le but du jeu étant comment "bloquer" l'accès à mon image que je viens de mettre dans mon message et en mode normal que ce soit par clique droit ou en faisant glisser par le gauche.

Attention c'est technique, mais rien n'arrête le courageux défenseur de droit d'image.

Dans un premier temps j'effectue le message normalement, (heuuu presque)
Là un petit post vite fait avec texte à gauche et image (piquée sur la toile) à droite
Je tape le texte....
Et j'insère l'image,
Important, l'insérer avec créer miniature, et afficher l'image à la taille originale dans une nouvelle fenêtre

image1b
Ce faisant, passer en mode html, et repérer l'image (oui je sais c'est un grand truc impossible à lire etc. etc. etc.)

et c'est là que commence les manips

Déjà sélectionner le lien qui est dans src="...." et le supprimer (c'est la réduction de l'image)

ensuite sélectionner le lien qui est dans href="..." c'est l'image qui est en grand

et le glisser dans le scr="" qui reste (pour afficher l'image en grand sur le blog)

à ce stade nous n'avons que transféré la grande image pour qu'elle s'affiche à la taille originale dans le message, procédons à l'antiglisse par clique gauche et retournons à href="" et y ajouter #

ensuite sélectionner le target="_blank", le supprimer, et y mettre oncontextmenu="return false" qui empèche le clique droit

voilà c'est terminé, reste à Publier le texte....

(bon c'est vrai que j'ai pris une petite image aussi, donc ça ne ressort pas trop bien là) et que se passe-t'il si on transfert la photo avec le click gauche?

mais c'est le lien qui est transféré :) pas l'image héhéhéhéhé

bon maintenant que vous avez tout fait, tout est bien et tout, devinez comment j'ai pris toutes ces photos, et surtout la dernière, malgré l'anticlick gauche et droit??? Hein?? Bah vi pas difficile de contourner tout ça:)

Posté par Alerion à 11:12 - Commentaires [12]

27 avril 2007 - J'ai mis du code HTML dans "Liens d'amis"

...et maintenant, ça n'affiche plus rien....

Au début, on a un code à insérer dans son blog, pour un compteur, une horloge, un post-it et/ou un éphéméride...

Et bien, sûr , comme on le veut sur une colonne pourquoi pas les "liens d'amis" bonne idée ça!!!!

oui oui oui, et zou c'est parti sauf qu'une fois qu'on a appuyé, le résultat n'est pas celui escompté, plus rien, un vide...

même plus les autres liens,

Rhaaaaaaa $£¤*ù%%, Diaule!!! mais qu'ai-je fait!!!!! (aparté pour ceux qui l'ont déjà fait dans les catégories - zêtes tétus vous....)

Bon.... on fait comment maintenant? Il faut corriger, supprimer la source du bug. (j'ai comme l'impression de me répéter moi).

Dans un premier temps il faut cliquer-droit dans cette fenêtre de "Gestion des liens" et sélectionner "Afficher la source"

Le code Html de la page va se retrouver dans le bloc-notes.

(Nota: Avec un navigateur FF, il faut tout sélectionner, le copier et recoller le code dans le bloc note pour pouvoir modifier et sauvegarder correctemement)
(attention très important, restez connecté sur votre interface canalblog pendant toutes les opérations)

et dans ce fichier source on va juste "bidouiller" un peu de code, en prenant toutes les précautions d'usage, d'accord?

déjà juste pour comprendre, il faut savoir que les liens et le dernier ajouté font partie du code html de la page, mais, comme ce dernier lien est du code incomplet, l'explorateur ne peut l'interpréter, et n'affiche plus rien après.

donc nous nous trouvons avec un fichier (ici my[2]), il faut repérer les lignes où sont inscrits les liens... vous reconnaîtrez facilement le votre.

on repère facilement les <a href="....>là se situe en général le nom du lien mais dans lequel figure maintenant le <script...> </td>
06lelien
on sélectionne tout ce qui est entre les balise <a href="..."> </a></td> et on y met "A supprimer" (bon c'est simplement pour bien définir celui qui est à effacer)

Ensuite on va encore modifier autre chose, en dessous de ce titre, il y a une ligne marquée :"<a href="/cf/my/action/FriendLinkController.cfc?bid...." cette ligne sert à supprimer le lien (3 ème ligne en dessous de celle qu'on a déjà modifiée)
il faut rajouter l'adresse de Canalblog juste avant "/cf/my/action...."

Voilà nous y sommes presque, ce fichier on va le sauvegarder sur notre disque, avec l'extension ".html": important, car ça va nous permettre de le lancer avec l'explorateur. (Démarrer - mes document - my[2].html)

Donc on le lance, la page va s'afficher il n'y aura pas de décoration, ni de mise en page, mais peu importe, le tableau avec les liens apparaît , dont le "a supprimer" (faute d'orthographe incluse)

et on va appuyer sur le carré à droite de "Editer" qui permet de l'effacer (un carré car pas d'image chargée), avec notre modif, la seule chose que vous pourrez effectuer est la suppression, tout le reste ne fonctionnera pas. donc go sur le bouton à droite de Editer

si tout va bien, vous devriez revenir sur un tableau avec toute la liste de vos liens

(et bon je le répète: ce n'est pas une raison, non plus, pour y remettre du code, ok?)

Posté par Alerion à 14:11 - Commentaires [65]

23 avril 2007 - Changer la bannière, en mode avancé

Oui!!

Bon alors,

On s'est créé un gentil blog, en mode normal on s'est mis une bannière, toute belle
tutoban01

tutoban02

Puis on a évolué, sommes passés en mode "avancé", avons ajouté des trucs de ci de là....
Et on veut changer de bannière parce que du coup ça ne correspond plus trop....

Heuuuuu oui, mais en mode avancé, il n'y a plus le choix de chargement du logo ou de la bannière,
- Diantre!! Mais où donc vais-je pour la changer, cette belle et nouvelle bannière?

Première étape,

Créer un nouveau message, qu'on sauvera en mode brouillon, pour pouvoir y retourner de temps en temps.
tutoban05
Et là, charger la photo (mais attention, pas par le traditionnel lien "d'insertion d'image", mais par l'insertion d'un fichier. Car.... la photo serait redimensionnée et ne correspondrait plus à la longueur de la bannière.
tutoban06
tutoban07

Ceci effectué, basculer en mode "html" [avec la touche <> ] et copier l'adresse url du document chargé.

tutoban08

Sauvegarder (publier en mode brouillon ne le rend pas accessible au public et permet de pouvoir récupérer au besoin l'adresse du fichier dans "mes documents" du blog).
tutoban12

Deuxième étape,

Editons donc nos fichiers de mise en page, et plus principalement la feuille de style
tutoban03

Recherchons la ligne du background dans le div #topbar-logo
tutoban04

On sélectionne l'adresse de l'ancienne bannière, et on y colle la nouvelle,
tutoban09

on valide, et on jette un oeil sur le résultat

tutoban11 (réactualiser la page au besoin)

Posté par Alerion à 19:32 - Commentaires [38]

23 mars 2007 - J'ai mis du code HTML dans "Catégories" ...

et maintenant ça ne marche plus....

Au début c'est facile, on se trouve un code à insérer dans son blog, pour un compteur, une horloge, un post-it et/ou un éphéméride...

Et bien, sûr , comme on le veut sur une colonne pourquoi pas les Catégories? Hein? Pourquoi pas?

oui oui oui, sauf qu'une fois qu'on a appuyé, le résultat n'est pas trop (même pas du tout) celui escompté.

Et.... Il n'y a plus rien, plus aucune catégorie, nada,
Rhaaaaaaa $£¤*ù%% de lutin qui me les a planquées.

Bon.... on fait quoi? Il faut corriger, supprimer la source du bug.

Dans un premier temps il faut cliquer droit dans cette fenêtre de "gestion des Catégories" et sélectionner "Afficher la source"
Le code Html de la page va se retrouver dans le bloc-notes.
(Nota: Avec un navigateur FF, il faut tout sélectionner, le copier et recoller le code dans le bloc note pour pouvoir modifier et sauvegarder correctemement)
(attention, restez connecté sur votre interface canalblog pendant toutes nos opérations)

et dans ce fichier source on va juste "bidouiller" un peu de code, En prenant toutes les précautions d'usage,
d'accord?déja juste pour comprendre, il faut savoir que la catégorie ajoutée fait partie du code html de la page, mais, comme cette catégorie est du code incomplet, l'explorateur ne peut l'interpréter, et n'affiche plus rien après. Pouvez chercher, il n'y a plus les copyright canalblog etc.
bon, revenons à notre fichier, ici my[2], il faut repérer les lignes où sont inscrites les catégories... vous reconnaîtrez facilement les votres et il y a forte chance que la première soit celle qui cause les problèmes.

>on repère facilement les <td width="200">là se situe en général le tittre de la catégorie</td>
on cherche donc notre <script là où il devrait y avoir du texte

on sélectionne tout ce qui est entre les balise <td width="200"> </td> et on y met "A effacer" (bon c'est simplement pour bien définir un titre et ne pas effacer un autre)

Ensuite on va encore modifier autre chose, en dessous de ce titre, il y a une ligne marquée :"<a href="/cf/my/action/BlogCatController.cfc?bid...." cette ligne sert à supprimer le titre de la catégorie (3 ème ligne en dessous de celle qu'on a modifiée) il faut rajouter l'adresse de canalblog juste avant "/cf/my/action...."

Voilà nous y sommes presque, ce fichier on va le sauvegarder sur notre disque, avec l'extension ".html", important, car ça va nous permettre de le lancer avec l'explorateur. moi j'ai mis un nom "effacercat.html" pour faciliter la recherche et le lancer (Démarrer - mes document - Effacercat.html)

Donc on le lance, la page va s'afficher il n'y aura pas de déco, ni de mise en page, mais peu importe, le tableau avec les titres des catégories apparaît , dont le "à effacer" on va appuyer sur le carré qui permet de l'effacer (un carré car pas d'image chargée)

avec notre modif, la seule chose que vous pourrez effectuer est la suppression, tout le reste ne fonctionnera pas. donc go sur le bouton à droite de Editer
si tout va bien, vous tomberez sur ça

confirmez, et là miracle, ça vous l'effacera,

vous devriez revenir sur un tableau avec toute la liste de vos catégories (bon ce n'est pas une raison non plus pour y remettre du code, ok?)

Posté par Alerion à 19:19 - Commentaires [50]

21 mars 2007 - Smileys

Comment faire

a toute première chose: être en "mode avancé"
La deuxième: éditer la "page d'un message"

Les étapes:

Prémière étape: le code situé en entête,
deuxième étape: Repérer l'Id et la Class
Troisième étape:Insérer le code pour afficher les smileys
Quatrième étape: Insérer le code pour pouvoir choisir dans le commentaire un smiley
Notas: diverses utilisations

Première étape:

Dans l'entête juste avant la balise </head> insérer ce code:
<script src="http://contesdeweb.free.fr/emoticon.js" type="text/javascript"></script>;
cette ligne est le coeur du système c'est ce qui permet de gérer les fonctions d'affichage.

-Bon moi j'ai créé un petit tableau de gif, mais rien ne vous empêche de le modifier pour y ajouter vos propre gif,
il suffit de modifier ou ajouter cette ligne:
list[list.length] = new Array("Nom du gif","adresse url du gif");
La liste des "gifs" ci dessous:

// -->
</script>

Deuxième étape

Ensuite, et là ça devient plus délicat, il faut bien repérer le <div id="..."> qui permet l'affichage des commentaires,
par défaut pour canalblog c'est "content" mais des plaisantins (comme moi) changent ce genre de truc.
Repérer également la class <Div class="..."> dans lesquels sont affichés les commentaires,
par défaut pour canalblog c'est "blogbody" mais des .../... trucs. :)
pour ceux et celles qui n'ont rien modifié ça se trouve dans ces lignes

</head>

         <body><div id="container"><div id="topbar-logo"><div class="logolink"><a href="<$BlogURL$>"></a></div></div><div id="topbar"><h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1><h2><$BlogDescription$></h2></div><div id="content"><div class="blogbody">

      <Blogger> <BlogDateHeader>

et plus particulièrement juste avant <Blogger> <BlogDateHeader> .

pour ceux qui ont changé, bon et bien ils savent où trouver donc. :)

Troisième étape:

Il faut maintenant repérer:

</CBComments> <CBControlForm>
<p><$CBControlForm$></p>
</CBControlForm>
<h2>Poster un commentaire</h2>

et insérer un code java juste après </CBControlForm>, comme ça:

</CBControlForm> (<===ça c'est l'existant, on y touche pas hein!!! On rajoute ce qu'il y a en dessous)

<h2>Poster un commentaire</h2> (<===ça c'est l'existant on y touche pas non plus, oki?)

cette partie remplace tous les codes utilisés par les smileys dans la class déclarée de id déclaré aussi

donc si <div id=...> est différent de "content" ainsi que class de "blogbody" il faut mettre votre définition, sinon ça ne marchera pas

Quatrième étape:

Juste avant le formulaire pour entrer les commentaires nous allons mettre en place "la fenêtre de vision":
Repérer :
<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">
et juste avant y insérer:
<hr> <div id="visu"></div> <hr>
<form action="" method="post" name="frmComment" id="frmComment" onsubmit="handleSubmit(this)">(<===ça c'est l'existant à ne pas modifier)

Dans la partie de renseignement du titre, on va insérer la barre d'outils:

dans la partie de saisie de commentaire juste en dessous du texte area à repérer:

il faut y insérer :

<textarea id="commentBody" name="commentBody" rows="10" cols="50"></textarea> (<===ça c'est l'existant à ne pas modifier)
</p><p>
<script type="text/javascript">

</script>
</p> (<=== ça aussi c'est l'existant à ne pas modifier)

ce texte permet d'insérer les émoticons en bas de la zone de saisie (et le cas échéant de mettre le code dans notre texte lorsqu'on clique dessus)

Notas:

pour afficher également les gif dans la liste des 10 derniers commentaires, il faut modifier "content" par "rigthbar"
(ou "leftbar" selon où se trouvent la liste des 10derniers commentaires) et "blogbody" par "navlinks"

exemple cette ligne
SwapCodeEmoticon("content","blogbody");
sera remplacée par
SwapCodeEmoticon("rightbar","navlinks");

et le code complet

à placé dans la rightbar après la balise </ul> qui permet d'afficher les commentaires ;)

(et dans les pages de texte, il est parfaitement faisable, en utilisant les code [le gif], de faire afficher les bons gif :))))

toujours grâce à : SwapCodeEmoticon("content","blogbody");

Voilà ça marche bien normalement.
en rapport (lointain, j'en conviens),allez voir Comment se passer d'une adresse mail dans les commentaires

Posté par Alerion à 10:43 - Commentaires [48]

« Accueil 1

Exemples d' Alérion

Pour infos, je ne suis qu'un simple "blogueur", et non un Employé de CanalBlog. Ce que je fais est juste pour vous dépanner lorsque j'en ai le temps, donc pas d'énervement si vous avez l'impression que je ne fais "que" mon boulot ;) oki? Sympa!!!