17 novembre 2010
Insérer des smileys dans les articles
Voici comment insérer des smileys dans vos articles sans avoir à passer par l'icône Insertion d'une image mais seulement en tapant le nom du smileys entre les crochets [ ]
Comme ceci : [Bob]
Pour cela il faut commencer par coller la liste des smileys dans votre page d'accueil avant la balise </head>
Récupérez cette liste, collez-la dans un bloc-notes ou dans un Nouveau message, puis changez l'adresse des smileys pour y mettre les votre, changez les noms des smileys en place "Zen" "Oups" "Rire" etc...ne mettez pas de caractères spéciaux.
Si vous avez déjà installé les smileys dans les commentaires, récupérez la liste des smileys que vous avez déjà collé dans la Page d'un message.
Repérez dans votre page d'accueil à l'aide de Ctrl+F la le code suivant :
<p><$BlogItemBody$></p>
Collez à la ligne le bloc de code suivant :
<script type="text/javascript">
<!--
SwapCodeEmoticon("content","blogbody")
SwapCodeStyle("content","navlinks");
// -->
</script>
Maintenant lorsque vous écrivez un message il ne vous reste plus qu'à taper les [ ] avec le nom de vos smileys dedans = [Bob] [Bravo] etc...le smileys apparaitra à la place du code.
Pensez à faire cette manip sur la page des archives également, sur la page d'un message ce n'est pas la peine si vous avez déjà mis les smileys dans les commentaires...
16 novembre 2010
Placer un logo ou une image volante sur votre blog
Sur mon ancien blog j'ai triché !
Ma bannière flash n'était pas assez large, alors plutôt que de la refaire, j'ai préféré ajouter quelque images à droite à gauche, ni vu ni connu !
Avec ce code, vous pouvez placer toutes les images, logo etc...que vous voulez voir sur votre blog, en haut en bas où vous voulez !
Voici le code à copier-coller dans votre page d'accueil, après la balise </head>
<div style="position:absolute; top:10px; left: 10px; z-index:10">
<img src="http://Adresse de votre image.gif">
</div>
Coller l'adresse de votre image gif ou jpeg ou png dans le code ci-dessus, puis changez les valeurs de top pour déplacer votre image par rapport au haut de votre page et de left pour déplacer votre image par rapport à la gauche de votre page.
C'est tout !
Diaporama
Changez l'adresse des images pour mettre les votre dans cette partie du code :
var Pix = new Array
("http://p5.storage.canalblog.com/52/11/255038/15936403.jpg"
,"http://p5.storage.canalblog.com/55/16/255038/15936422.jpg"
,"http://p7.storage.canalblog.com/78/12/255038/15936427.jpg"
,"http://p4.storage.canalblog.com/40/62/255038/15936471.jpg"
);
Pour changer la vitesse de défilement des photos, changer la valeur :
var timeDelay = 2;
Ensuite, Pour que le Diaporama démarre au chargement de la page, ajoutez après la balise <Body> le code qui suit :
<body OnLoad="startPix()">
Et enfin, placez le code suivant à l'endroit où vous souhaitez que le Diaporama apparaissent.
Collez l'adresse de "la première image à afficher" :
<img name="ChangingPix" src="Adresse de la première image">
Note : Ce script n'est pas compatible avec le script des images qui se baladent sur l'écran, il faut donc choisir, vous ne pouvez pas avoir les deux sur la même page...
Pavé de Liens d'amis personnalisé
Pas mal ce petit pavé de liens d'amis non ?!
C'est pas bien compliqué...un peu d'imagination, de temps, un soupçon de patience et c'est tout à fait faisable.
Si vous voulez mettre ce pavé dans une colonne, pensez à choisir une image qui fait moins de 200 px, sinon l'image de l'angle en haut à droite retournera à la ligne et votre photo ressemblera à un puzzle...
Commencez par trouver une belle photo, ouvrez la dans Photofiltre et faites :
Filtre / Divers / Quadrillage
Régler la grandeur des cellules en pixels par rapport au nombre de liens que vous avez à mettre dans votre pavé, choisissez une couleur qui se voit bien pour dessiner le quadrillage, mettez l'épaisseur à 2, cochez les cases comme sur la capture, Aperçu puis Ok.
Le principe est simple, vous devez copier-coller chaque image (cellule) dans un nouveau cadre.
Servez-vous de l'outil sélection puis rectangle pour sélectionner la cellule.
Pour connaitre la taille de vos images (cellule), faites un clic droit dans la sélection et choisissez paramétrage manuel, notez la taille de votre première image (cellule) elles n'ont pas forcement toute ma même taille.
Dans cet exemple les 5 cellules du milieu font 58x47 alors que les 10 autres font 57x47, donc comme il nous faut 15 nouveaux cadres, faites Nouveau choisissez 58x47 et ensuite faites Ctrl+U 4 fois pour dupliquer le cadre et en obtenir 5 identiques.
Faites la même chose pour obtenir les 10 cadres de 57x47 en faisant Ctrl+U 9 fois !
Maintenant vous devez copier-coller chaque image dans le cadre qui correspond à sa taille et l'enregistrer avec le numéro qui correspond à l'ordre des images (1,2,3,4...), car au moment de mettre les adresses dans la page d'accueil ça sera plus pratique de pouvoir repérer les images dans le bon ordre...
Une fois que vous avez enregistré vos 15 images numérotées, il faut les importer une par une et dans l'ordre de préférence (1,2,3,4...) pour éviter de vous embrouiller...
Ouvrez un Nouveau message puis cliquez sur l'icône insertion d'une image, importez toute vos images...
Maintenant il faut créer le bloc de code que nous allons coller dans la page d'accueil dans une colonne, il vous faut la ligne de code suivante qui contient l'adresse du blog ou du site à visiter.
(*si vous voulez donner un effet lumière à vos images, descendez plus bas, le code n'est pas le même)
<a href="Adresse du site" target="_blank">
Vous devez ajouter à cette ligne l'adresse entière de votre image N°1
<img alt="Image1" src="http://Adreese de l'image.jpg" width="40" height="36" border="0" /></a>
Ce qui donnera pour cette première ligne :
<a href="Adresse du site" target="_blank"><img alt="image1" src="http://Adresse de l'image.jpg" width="40" height="36" border="0" /></a>
Vous devez répéter cette opération autant de fois que vous avez d'image et coller pour chaque image l'adresse url du site à visiter.
Une fois fait, ouvrez votre page d'accueil et collez votre bloc de code dans une colonne, visualisez avant de valider.
Ouf, une bonne chose de faite...
Votre pavé est en place, si vous cliquez sur une image un site s'ouvre dans une nouvelle fenêtre.
Vous pouvez maintenant remplacer le titre des images (1,2,3,4...) par le nom du site ou le nom pseudo de la personne à qui il appartient...sur Explorer, le titre s'affiche au passage de la souris sur l'image (alt="nom du site") pour que le titre s'affiche à tous les coups remplacez alt="nom du site" par title="nom du site".
Maintenant il faut donner un petit effet sympa au passage de la souris, un peu de relief ou un effet lumière, mais attention comme d'habitude l'effet n'est pas le même si vous utilisez Explorer ou Firefox...
Pour donner un effet lumière à vos images, il faut modifier le code de base*...
<a href="Adresse du site" target="_blank"><img alt="Image1" src="http://Adresse de l'image.jpg" ="slowlow(this)" ="slowhigh(this)" ="gradualshine" ="opacity: 0.25;" /></a>
Soit vous prenez directement ce code, soit vous le modifier en ajoutant la ligne de codes rouge, le plus simple est de prendre ce code dés le départ pour éviter les manipulations.
Pour un effet sombre sur le pavé et une image qui s'éclaire au passage de la souris, collez dans la page d'accueil ce script avant la balise </head>
Pour un effet lumière avec un cercle au passage de la souris sur Explorer et un effet relief image encadrée sur Firefox choisissez ce script et collez le avant la balise </head>
< type="text/css"> a:hover img {filter:alpha(finishopacity=0, =2); border:1px solid;} </></a>
Pour avoir les 2 effets en même temps, vous pouvez coller les deux scripts à la suite, mais sur Explorer ça fait sauter la page et c'est pas terrible, par contre sur Firefox c'est nickel...
Remplacez le titre de vos catégories par une image
Envie de changement ? vous pouvez créer vous même des fonds pour vos catégories et choisir une police un peu plus funky...
Ouvrez la Page d'accueil et repérez les lignes de titres de vos catégories (Vos blocs) en voici
trois exemple :
<div class="title">Catégories</div>
<div class="title">Derniers messages</div>
<div class="title">Derniers commentaires</div>
Ensuite c'est très simple, il vous faut une image de dimension inférieure à votre colonne si elle fait 200px, une image de 180x50 fera très bien l'affaire, il faut que vous avez créer votre belle image avec Photofiltre par exemple.
Il ne vous reste plus qu'à récupérer l'adresse de votre image (importez-la dans un message en mode html) et de la copier-coller dans le code ci-dessous entre les balises <div class="title"> </div> :
<div class="title"><img src="http:///Adresse de votre image.png"></div>
Remplacez ensuite la ligne d'origine en collant votre nouveau code à la place :
<div class="title">Catégories</div>
Vous devez répéter cette opération sur tous les titres de la Page d'accueil et également sur ceux de la Page d'un message et la Page des archives.
Pour glisser une image sous le titre des catégories sans enlever le texte c'est ici.
Mettre un bouton à la place des liens de vos catégories
Pour que tout le monde comprenne bien de quoi il s'agit, (car je n'ai pas d'exemple à vous proposer, cette option n'est pas installer sur ce blog), un bouton c'est une image cliquable qui envoie sur un site ou sur une autre page de votre blog.
Ici, nous allons remplacer les liens de vos Catégories par des boutons liens , donc...à la place des liens actuels il y aura des images cliquables, c'est plus clair ?
Un premier lieu, il faut que vos Catégories soient crées...c'est plus simple, vous pourrez en créer d'autres après bien sur...
Vous devez commencer par créer le code de vos boutons, pour chaque catégories.
Si vous avez 4 catégories : Les apéro, Les entrées, Les plats et Les desserts
Il va vous falloir 4 images pour les transformer en bouton liens...
Une fois que vous avez vos images, elles doivent êtres de la même taille, sinon ça fait cracra...
Si vous utilisez Internet Explorer, les images se placent automatiquement à gauche et sur Firefox, elles sont centrées, donc ne vous fatiguez pas à rajouter des balises <center> ou <left>, elles ne seront pas prisent en compte, vous avez donc tout intérêt à créer des boutons de la même taille que vos colonnes, enfin quelques px en moins quand même pour que votre image ne soit pas coupée.
Vos colonnes doivent faire 200 px, la dimension idéale pour vos images est donc 180x40 ou 190x40 vous pouvez jouer sur la hauteur et mettre des images plus hautes.
Ensuite, Ouvrez un Nouveau message et importez votre première image...
Pensez à décocher les 2 cases de calibrage si votre image est animée.
Passez votre message en Mode Html pour récupérer le code de votre image, vous devez avoir un code qui ressemble à ça :
<p><img width="180" height="40" border="0" src="http://p4.storage.canalblog.com/48/45/255038/11955802.jpg" alt="Bouton1" /></p>
Pour que votre image soit cliquable et qu'elle nous dirige sur votre catégorie, il faut ajouter le code en bleu comme ceci :
<p><a href="Adresse de votre catégorie"><p><img width="180" height="40" border="0" src="http://p4.storage.canalblog.com/48/45/255038/11955802.jpg" alt="Bouton1" /></p>
Pour récupérer l'adresse de la catégorie, il y a 2 possibilités, soit en cliquant droit sur le lien de la catégorie qui se trouve dans une de vos colonnes, puis de cliquer sur copier l'adresse du lien.
Soit en ouvrant un article de cette catégorie, dans le bas du message vous avez le nom de la catégorie dans laquelle est posté l'article, il faut cliquez droit dessus pour récupérer l'adresse comme indiqué sur la capture ci-dessus.
Maintenant nous allons voir où coller ce joli code dans la Page d'accueil...
<p><a href="Adresse de votre catégorie"><p><img width="180" height="40" border="0" src="http://p4.storage.canalblog.com/48/45/255038/11955802.jpg" alt="bouton1" /></p>
Ouvrez la Page d'accueil est repérez ce code (en cliquant sur les touches Ctrl + F simultanément, vous pouvez faire une recherche dans la page) :
<div class="title">Catégories</div>
Juste en dessous de cette ligne de codes, collez le joli code que vous venez de faire.
Ce qui doit donner ça :
Voila déjà une bonne chose de faite...
Si vous faites un aperçu, votre bouton est bien en place et si vous cliquez dessus, il vous dirige bien vers votre catégorie.
Par contre, la liste des catégories et encore là...et oui c'est pas fini...
C'est pour cela que vous devez commencez par faire toutes vos lignes
de codes pour chaque bouton, comme ça vous les mettez tous en même temps
(les codes à la suite les uns des autres, avec un <p> entre chaque code qui correspond un bouton, pour laisser un espace entre les boutons).
Vous pouvez passer à l'étape suivante, c'est à dire supprimer le code qui permet d'afficher les catégories...
Le voilà, ce fameux code :
<$BlogCategoryName$>
Pour que vos boutons apparaissent aussi sur les autres pages (page des archives et page d'un message), une fois que vous avez installé tous vos boutons, faites un copier du bloc catégories en entier et collez-le dans les autres pages.
Si un jour vous souhaitez remettre les catégories comme elles étaient, il suffit de créer un nouveau modèle et de récupérer le bloc de code d'origine de vos catégories.
Vous pouvez aussi collez vos lignes de code sous le titre de vos catégories comme ceci :
<div class="title">Catégories</div>
<p><a href="Adresse de votre
catégorie 1"><p><img width="180" height="40" border="0"
src="http://p4.storage.canalblog.com/48/45/255038/11955802.jpg"
alt="bouton1" /></p>
<p><a href="Adresse de votre catégorie 2"><p><img width="180" height="40" border="0" src="http://p4.storage.canalblog.com/48/45/255038/11955802.jpg" alt="bouton2" /></p>
Ce qui revient au même.
Mettre une image sous le titre de vos catégories (Blocs)
Voici comme faire pour glisser une image sous le titre des vos catégories...
Commencez par redimensionner une image elle doit être un peu plus petite que la largeur de votre colonne qui si vous ne l'avez pas changé doit faire 200 px.
180x21 ou 180x30 après c'est une question de goûts...
Allez dans la feuille de style repérez le bloc .navlinks .title {
puis ajoutez dans le bloc les lignes suivantes, la première est celle de votre image, n'oubliez pas de collez l'adresse dedans.
Les lignes margin et padding permettent de régler les espaces entre les blocs et le texte, de centrer les titres dans les blocs etc...
Pour vous faciliter la tâche je ne saurais que trop vous conseiller la barre magique Web developer toolbar !
background: url("http://Adresse de votre image.jpg") no-repeat;
margin: 10px 0px 0px 0px;
padding: 4px 3px 3px 5px;
Voici à quoi ressemble le bloc .navlinks .title sur mon blog :
Validez.
Si vous voulez mettre une image différente pour vos catégories, ouvrez la Page d'accueil et faites comme ceci :
<!--<div class="title">Catégories</div>--> <img src="Adresse de votre image">
Vous devez répéter cette opération pour tous les titres des catégories et également faire la même chose sur les autres pages de votre blog (page des archives, page des messages).
Merci à Perséphone et CGducanada
15 novembre 2010
Mettre une image devant le titre des messages
Choisissez une image, petite de préférence...
Ensuite Ouvrez votre feuille de style et rendez-vous au bloc .blogbody h3 {
.blogbody h3 {
color: #D4D4D4;
font: 10pt "Century gothic";
background: url("http://Adresse de votre image.png") no-repeat;
width: 110px;
height: 55px;
float: center;
padding: 10px 0px 0px 50px;
letter-spacing: 0px;
}
Ajoutez les lignes en bleu...
Collez dans la ligne background l'adresse de votre image.
Jouez avec la ligne padding en changeant les valeurs pour placer votre image comme vous le souhaitez.
Changez les valeurs de Width et height pour afficher l'image et aussi placer le texte.
Sur ce blog, j'ai placé une image seulement devant la date, c'est exactement la même méthode, sauf qu'il faut modifier le bloc .blogbody h2 {
Image en balade sur votre blog
Voici un script qui permet de faire se balader une petite bébête sur les pages de votre blog...
Si vos visiteurs ont peur des souris...il suffit de cliquer sur la vilaine bébête pour qu'elle disparaisse !
Copiez-collez le script ci-dessous en bas de page avant la balise </body> sur votre page d'accueil ou sur celle des archives ou bien celle des messages...et pourquoi pas sur les trois !
Repérez la quatrième ligne au début du script ci dessus.
floatimages[0]='http://http://Adresse de votre image volante.gif';
Remplacez l'adresse en place par celle de votre image.
Si vous voulez mettre 2 images, ajoutez une ligne, copiez-collez la même ligne en dessous en remplaçant la valeur [0] par [1]
floatimages[0]='http://http://Adresse de votre image volante.gif';
floatimages[1]='http://http://Adresse de votre image volante.gif';
Vous pouvez mettre 2 images différentes...un chat et une souris par exemple.
Voici le lien vers un générateur de script...
C'est la 3ème ligne les 2 Titis qui volent
Vous pourrez changer la vitesse de déplacement de vos images etc...
Mettre une image devant les liens dans une colonne
Voici comment mettre une petite image...devant les liens dans vos blocs...(Derniers commentaires, Derniers articles etc...)
Commencez par trouvez une image, elle ne doit pas faire plus de 16x16 px, si elle est plus grande redimensionnez la avec Photofiltre (clic droit sur l'image/ taille de l'image/ changer les valeurs)
Importez votre image dans un message puis passez-le en Mode Html pour récupérer son adresse :
<img src="http://Adresse de l'image.gif"/>
Collez cette adresse dans le bloc de codes suivant qui correspond aux Derniers commentaires, juste après la balise <li> vous pouvez mettre un espace à la suite de l'adresse, pour que votre image ne soit pas collée au texte, c'est plus joli...
<div class="title">Derniers articles</div>
<ul>
<CBLastPosts>
<li><img src="http://Adresse de l'image.gif"/><a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastPosts>
</ul>
Vous pouvez mettre une image dans tous vos blocs, Derniers commentaires etc...la manip est la même.
Vous devez répéter cette opération sur toutes les pages de votre blog (page d'accueil, pages des archives et pas des messages).
« 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
