Attention !
Ce blog a déménagé et n'est plus mis à jour. Rendez vous sur le nouveau blog :
http://www.blogtuto.org/
mardi 17 juin
Blogger / blogspot : Insérer un favicon
Peut-être avez-vous remarquez que certains sites ou blogs, comme ici sur BlogTuto, ont sur leur adresse dans la barre de navigation un petit logo à la place de celui de leur hébergeur, inutile certes, mais ô combien mimi!!!.
Vous pouvez échanger le gros B orange pas beau de Blogger... pour le personnaliser et mettre votre propre logo.
Un petit bémol avant de continuer : cette manip fonctionne sous
mozilla mais pas sous IE (Internet Explorer) parce que Blogger tout comme nos amis canalblog ne
prend pas le ".ico" et que du coup IE ne le reconnait pas. Donc, vive
firefox lol
1. Il vous faudra avoir une version miniature de votre logo de 16 x 16 pixels ou 32 x 32 pixels maximum. Pour la faire sous Windows, vous pouvez utiliser le logiciel Paint qui se trouve dans Démarrer - Tous les programmes - Accessoires
pour diminuer la taille de votre image, en prenant soin de la
sauvegarder sous un autre document pour ne pas perdre votre fichier
original. Sinon, vous pouvez, utiliser des
outils offerts en ligne et spécialement conçus pour créer ce genre
d'icône. Photofiltre est une bonne alternative...
2. Rendez-vous sur le site HTML Kit, à la page FavIcon from PICS. Suivez la procédure pour générer votre icône. C'est-à-dire, parcourez votre disque dur pour sélectionner votre image, puis cliquez sur Generate FavIcon.ico. L'outil en ligne se chargera d'en créer une version "icône". Vous aurez le choix entre une icône fixe (normale) et une icône animée à télécharger sur votre ordinateur.
3. Une fois votre icône sauvegardée dans votre ordinateur, changez son extension .ico pour l'extension .jpg OU .png
4. Chargez-la ensuite sur votre blog dans un message.
Une fois chargée cliquez sur "Modifier le code html" ce qui va faire apparaitre cela :
Ce qui nous intéresse c'est cette ligne en rouge dans le code qui est l'adresse de l'image :
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp2.blogger.com/_osNeObZ1rx8/SFe5HccYqGI/AAAAAAAAAGI/m7I2yK5r5_c/s1600-h/icone.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://bp2.blogger.com/_osNeObZ1rx8/SFe5HccYqGI/AAAAAAAAAGI/m7I2yK5r5_c/s200/icone.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5212838631250110562" /></a>
5. Vous êtes toujours là? Donc, cliquez sur Mise en page, puis Modifier le code HTML. Ensuite, avant la balise </head>
Insérez la ligne suivante:
<link href="url vers l'icone.png" type="image/png" rel="icon" />
Dans cette ligne, remplacez "url vers l'icône.png" par l'adresse de votre image, celle que vous avez copiée à l'étape 4 précédente. C'est l'adresse du chemin qui mène à votre image.
Comme j'ai mis une extension .jpg, mon code est le suivant
<link href="http://bp2.blogger.com/_osNeObZ1rx8/SFe5HccYqGI/AAAAAAAAAGI/m7I2yK5r5_c/s1600-h/icone.jpg" type="image/jpg" rel="icon" />
Voyez sur le modèle ci dessous juste avant </head>
7. Maintenant Valider et chargez la page de votre site pour voir si l'icône apparaît dans la barre d'adresse.
Tags : blogger, blogspot, favicon
dimanche 01 juin
Insérer une bannière sur blogger
Merci à mon amie Damouredo pour ce tuto!
Vous avez votre belle bannière Ban@nière Split...mais vous faites comment maintenant, hein !!
Pas de panique...j'explique tout ci-dessous :
Une fois sur son panneau d'administration Blogspot
Cliquez sur "Mise en page"
Vous arrivez alors sur cet écran et vous cliquez sur "MODIFIER"
Sur l'écran suivant
Faites bien attention de COCHER les 3 cases...à savoir :
x Image depuis votre ordinateur
x Substituer le titre et la description
x et Ajuster à la page
Ensuite allez chercher votre bannière dans votre fichier d'ordinateur et cliquez sur "OUVRIR"
La bannière s'affiche alors !
N'oubliez surtout pas de cliquer sur "ENREGISTRER LES MODIFICATIONS"
Vous pouvez ensuite cliquer sur "Aperçu" pour voir votre bannière insérée sur votre blog
Ce tuto vous est offert par Makanaï. Merci à elle!
Tags : bannière, blogger, blogspot