Comme je reçois pas mal de mails à propos du design de mon blog, et de sa personnalisation, je me suis dis que ce serait sympa de faire un petit tutoriel ici. Rien de bien compliqué, ni de très innovant, juste quelques étapes qui peuvent donner une nouvelle jeunesse à votre blog. Notez que ces astuces fonctionnent sous Blogger/Blogspot.
Sauvegarder son blog
Croyez-moi, c’est toujours utile d’avoir son template enregistré sur son ordinateur, on ne sait jamais. Si vous devez réinstaller ce modèle, il suffira de le copier coller dans votre code HTML en effaçant le modèle déjà présent.
MODÈLE > SAUVEGARDE-RESTAURATION > TÉLÉCHARGER LE MODÈLE COMPLET.
Un peu de référencement
Il est primordial de fournir aux moteurs de recherche un résumé de votre blog ainsi que des mots clés. Cette méthode ultra simple permettra à Google de présenter votre Blog à travers la phrase d’accroche de votre convenance.
Modèle > Modifier le code HTML > Chercher <head>
<meta content=’Mots clés séparés par des virgules‘ name=’keywords’/>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<meta content=’Description de votre Blog‘ name=’description’/>
</b:if>
<meta content=’ALL’ name=’ROBOTS’/>
Enlever la Navbar
Personnellement je ne trouve pas que la Navbar de Blogger soit très utile. Au contraire, elle incite les lecteurs à quitter plus rapidement votre site. De plus, quelle est la probabilité pour qu’un potentiel visiteur arrive sur votre blog par ce biais ? Quasi nulle on est d’accord. Pour enlever la navabar de votre blog Blogger, voici la marche à suivre :
Modèle > Modifier le code HTML > Cochez la case développer des modèles de gadgets.
Chercher le code suivant (ctrl+F ou cmd+F) /* Variable definitions et juste après collez ce code :
#navbar-iframe {
display : none !important;
}
Changer de polices d’écritures sous Blogger
Il est possible d’insérer des nouvelles polices dans le code HTML de votre Blog Blogger. Cela vous permet de vous démarquer mais aussi d’aller plus loin dans la personnalisation. De plus, c’est assez simple !
1 – Chercher votre bonheur sur ce site : http://www.google.com/webfonts/
2 – Une fois votre police trouvée, cliquez sur « Add to collection » puis sur « Use »
3 – Copier le code obtenu, et coller le dans votre code HTML, juste après la balise <head> que vous aurez préalablement cherchée à l’aide des touches ctrl+F (cmd+F sur Mac).
4 – Collez le code. Mais attention, il faut le corriger. Avant le dernier signe « > » vous devez rajouter juste avant ce signe « / » de manière à former ceci « /> ». Voici un exemple corrigé :
<link href=’http://fonts.googleapis.com/css?family=Wendy+One’ rel=’stylesheet’ type=’text/css’/>
5 – Lorsque vous écrivez un article, allez dans la partie HTML (juste à côté de Rédiger), et collez ce code en remplaçant les données en violet clair par le nom de la police et de votre texte :
<span style= »font-family: Le nom exacte de votre police; font-size: 16px; »> Votre texte ici </span>
Récapitulatif des différentes fenêtres du site Google Web Fonts
Supprimer « Fourni par Blogger »
Pour supprimer l’attribution Fourni par Blogger il faut aller dans :
Modèle > Modifier de le code HTML
Chercher (avec le raccourci ctrl+F ou cmd+F) et supprimer les deux codes suivants :
<b:widget id=’Attribution1′ locked=’true’ title= » type=’Attribution’/>
<!– outside of the include in order to lock Attribution widget –>
Il faut ensuite cliquer sur » Enregistrer « . À ce moment là, Blogger va vous demander si vous souhaitez supprimer le Widget Attribution. Cliquez sur » Supprimer les Widgets « .
La balise Mailto
Quel plaisir vous avez, lorsque vous cherchez à contacter un blogueur, et que vous avez simplement à cliquer sur un bouton « contact » ou « mail » et que hop ! Une fenêtre apparaît et vous pouvez directement écrire votre message…. Magnifique, n’est ce pas ?
Mise en Page > Ajouter un Gadget > Image > Dans l’URL insérez le code suivant : « mailto :votremail@mail.com »
Laisser un commentaire
Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.
Génial ce tuto pour améliorer les performances de son blog ;)
New post – Kisses ♥
http://www.mademoisellemode.com/
Bon personnellement je suis sur Worpdress et je me débrouille pas mal avec HTML et CSS mais j’ai tout de même une question :)
Comment as-tu réalisé la dernière image avec écrit « À vous de jouer » ? J’adore l’effet tâches de peinture et les polices !
xx.
Alors pour la dernière image, je l’ai réalisée sur Photoshop. J’ai d’abord pris une image d’aquarelle déjà existante, et j’ai fais des effets de tâche avec l’outil tampon de duplication, en prenant comme image source celle de l’entête de l’article… Bon pas très clair, mais c’est comme ça que je fais :-) Peut être que je ferais un petit tuto prochainement tiens… Bisous.
Pour la police des titres, j’insère le nom de ma police alors moi quand j’ouvre la page de mon blog, je vois ma police INtheKnow, mais l’autre jour, sur l’ordi de mon frère, comme il n’a pas cette police je regarde mon blog, et la je vois que la police de mes titres n’est pas la même :/
C’est quelque chose qui arrive lorsque l’on change de navigateur en principe. Par exemple, je sais que sous Opera, les polices que j’ai choisie s’affichent toutes en Arial… C’est un peu dommage mais je n’ai pas encore cherché de solutions (il doit y en avoir c’est certain). Bon par contre s’il s’agit du même navigateur, là il doit y avoir un problème dans ton code lorsque tu as installé ta police je pense :-)
Moi aussi j’adore cet effet qui ressemble à celui de ta bannière! Et pareil, je suis sur wordpress :p Mais c’est quand même super chouette d’avoir pu lire tes petits conseils! Quand on voit ton joli blog, ça donne envie! :)
Je pense que pour certains éléments ça fonctionne aussi pour WordPress (notamment pour les polices). Mais la seule fois ou j’ai voulu toucher à autre chose que du CSS, j’ai fait bugué mon blog… Je n’ose plus rien faire… lol
Hihi c’est pour ça que je dis bien en début d’articles de penser à sauvegarder son code :D Parce que après autant de boulot, c’est un coup à faire une petite dépression ! Sinon oui effectivement certaines de ces astuces doivent marcher avec d’autres interfaces, mais de peur d’induire des personnes en erreur, je préfère laisser Blogspot, où je sais que ça fonctionne vraiment ^^ Bisous
Il est parfait cet article, justement je commence à vouloir tout modifier :)
Merci !
Bises
De rien, et bon courage :-) Bisous à toi
Merci beaucoup pour ce tutoriel, j’ai hâte de m’y plonger pour donner un coup de jeune à mon blog. J’ai posté la recette de la mousse de marron en réponse à votre commentaire. Bonnes fêtes
Merci beaucoup pour ce tutoriel, j’ai hâte de m’y pencher de plus près pour 2013. J’ai posté la recette de la mousse de marron en réponse à votre commentaire. Bonnes fêtes.
Merci pour tous ces précieux conseils!!!
Belle soirée à toi
Super ce tutoriel. Le seul souci, c’est que lorsque je fais ctrl+f et que je tape le code à rechercher, il me le trouve jamais.
Oui des fois c’est quelque chose qui arrive. Pour ma part, je reviens sur la page d’accueil, avant de ré-essayer dans le code, et là en principe ça fonctionne direct ! Sinon c’est que tu écris mal ce que tu recherches, il faut être très précise ;-)
Bonjour et merci pour ce tuto. Joli blog!
Je suis aussi sous blogger et je ne parviens pas à diminuer l’écart entre mes gadgets image: est-ce que tu sais faire? A bientôt
Comme mes widgets me plaisent comme ils sont, je n’ai pas réfléchis à un moyen de diminuer l’écart entre eux ou autre. Mais j’imagine que c’est tout à fait possible, cherches sur l’ami google peut être que tu trouveras :-)
ton blog est magnifique ! Ce que j’aimerais être douée en graphisme et en codes html…
Très intéressant !
Je touche le moins possible au design de mon blog… Je m’y connais un peu en html, mais dès que ça se complique ou que ça passe au php, c’est fini XD
Un article super intéressant d’autant plus que je commence tout juste un blog et que je suis un peu une nulle xD
Merci beaucoup, j’aime beaucoup ton blog d’ailleurs, il est super joli :) et les photos font rêver…
Merci d’être passé sur mon blog, ce qui me permets de découvrir le tien!!! c’est formidable, je crois que ton tuto va m’aider :))
hello, moi je cherche un tuto pour personnaliser le nouvel affichage dynamique de blogspot, comment mettre une image sur tout l’entête, effacer le titre du blog…
Je découvre tout juste ton blog, et franchement j’aime beaucoup. De belles photos de voyages, un design sympa, de jolis montages… Tout ce que j’aime! Et puis je suis assez fan de ce genre de billets, j’ai fait une bonne partie des modifs dont tu parles, ce sont des petits détails mais mine de rien ça fait la différence.
Bises
Merci beaucoup pour ce tutos. le code »meta content=’Mots clés séparés par des virgules’ … » à bien marché sur mon premier blog. Mais pas de résultat sur mon 2e (aussi sur blogspot). Est-ce parceque j’ai « acheter » le .com ? (et plus blogspot.com)
Merci pour ta réponse !!!
Merci pour ta réponse ! Sur mon blog je crois que j’ai du vérifier le lendemain. Là j’avais decider de le faire pour mon autre blog (et aussi celui de ma mère pour ses chambres d’hotes que j’ai acheté en .com aussi) et en verifiant de suite ça ne s’affichait pas. Donc je vais attendre demain alors ^^ (je suis une impatiente de la vie aussi -____-)
En tout cas merci de m’avoir répondu ^^
Bonjour ! Je suis tombée sur ton blog et plus particulièrement cet article en cherchant des astuces. Mon blog ne me plait plus du tout et je cherche à l’améliorer. Le truc qui m’embete c’est cette bordure blanche qu’il y a automatiquement autour des photos… Et sur ton blog elle n’y est pas, comment puis je faire pour l’enlever ?
Merci bcp…
Finalement à force de persévérer j’ai réussi… seulement pour les photos mais je suis sur la bonne voie ^^
Merci beaucoup pour ce tutoriel ! Je viens de commencer un blog et cela va m’être utile !
moi j’aimerai bien savoir si tu fais la meme chose avec overblog, car je n’arrive pas trop à me débrouiller, d’ailleurs si tu souhaites passer me faire un coucou sur mon blog pour me donner qq conseils de design ça serai avec grand plaisir!
bisous
Bonjour,
Top toutes les astuces. Je viens d’en appliquer certaines (notamment enregistrer le modèle !!).
je viens d’essayer de supprimer « fourni par blogger » selon ta méthode. Après enregistrer, il me met ce message d’erreur:
Erreur d’analyse XML, ligne 1968, colonne 11 : The element type « b:section » must be terminated by the matching end-tag « »..
Voici ce que donne la ligne 1968:
Tu pourrais me faire la traduction stp ? Je suis un peu paumée.
Merci par avance
Catherine
Merci pour les tuyaux ! Si tu as encore d’autres bonnes idées ce serait cool de partager ! :)
coucou, je vais peut etre passer pour une nouille mais la je t’avoue que je sèche complétement, moi et l’informatique ça fait dix mille, je suis larguée, je n’ai pas compris le truc avec navbar ni le truc du référencement, j’aimerai pouvoir personnaliser mon blog mais je rencontre des soucis pas possible c’est à s’arracher les cheveux, j’aimerais au moins pouvoir mettre une photos dans le titre mais quand je le fais ça donne pas l’effet escompté. Suis je si nulle que ça? devrais je me tourner vers un pro? ou y a t il encore un peu d’espoir?
theworldbysarahs
des bisous
Bonjour!
Merci d’avoir partagé ces astuces avec nous, c’est drôlement pratique!!
J’ai une question concernant les titres des articles, comment en personnaliser le format?
Merci d’avance =)
Agathe
Merci pour tes astuces ! Ils sont toujours d’une grande aide ! Au faite, sans faire exprès j’ai supprimer l’écart entre ma banniere et les articles. Pourrais tu me dire comment tu fait s’il te plait ?
Merci ;) Auriana
theshinystuff.blogspot.fr
Wahou ! je suis si contente d’être arrivée sur ton blog car je cherche à faire un nouveau design pour mon blog et disons que j’ai du mal avec les codes et tout le reste. Je vais lire tes conseils et essayer de les appliquer tant bien que mal.
Encore merci !
Salut!
Alors, avant tout: merci mille et une fois pour tes tutus, c’est exactement ce qu’il me manquait et ENFIN mon blog ressemble à quelque chose qui me tient à coeur. Merci encore hihi.
Maintenant, je voulais savoir… C’est sûrement une question débile mais tu as un coeur à côté de l’url de ton blog, enfin le lien. J’ai toujours ce « B » de Blogger (que je trouve immonde et déteste au possible) et j’aimerais savoir comment on l’enlève… Aurais-tu la solution à ceci? :/
Bisou ma belle, et merci encore pour ce blog et ces tutos, ils sont absolument géniaux!
L’image dont tu parles est un favicon. Tu peux le créer toi-même via un logiciel ou chercher une image sur internet en faisant bien attention de la redimensionner au format 32×32 pixels. Ensuite, il te suffit d’aller dans Mise en page et de cliquer sur modifier sur le widget Favicon tout en haut à gauche, de charger ton image et d’enregistrer le tout. L’icône Blogger sera remplacée par ton image personnalisée. Il arrive parfois qu’elle ne s’affiche pas tout de suite, auquel cas il faut vider le cache et les cookies de ton navigateur pour que le changement soit visible =)
Merci pour ce super tutoriel ! Grâce à toi mon blog gagne un peu en visuel :)
Tendresse et baisers sucrés
Bérengère in Wonderland
Hello!
J’ai un problème, j’ai suivi tes conseils pour mailto mais ça ne marche pas que faire?
Bisous ♥♥♥
Cécile! <3!!
Bonjour :-) Il n’y a pas de raisons que ça ne fonctionne pas, peux-tu me dire exactement ce que tu fais ? Bises
Coucou =)
merci pour tes supers conseils =)
cependant je voudrais supprimer « fourni par blogger » mais dans mon code HTML, les codes que tu donnes ne fonctionne pas, du coup je ne sais pas quoi supprimer .
Aurais tu une solution STP?
mercii <3
Coucou =)
Je viens de tomber sur ton blog, et j’admire vraiment sa qualité graphique, il est très beau ^^ Cet article m’a été très utile quand j’ai voulu supprimer les « Attributions », en revanche, j’ai voulu trouver le code pour supprimer la navbar et il n’a pas l’air d’exister ? J’ai vérifié manuellement dans le code du widget navbar mais rien ne correspond au « /* Variable definitions ». Voici le code du widget :
<script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes && gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
url: 'https://www.blogger.com/navbar.g?targetBlogID751337334315874918564\46blogName\75Sophie+J.+Fox\47s+Adventures\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75DISABLED\46layoutType\75LAYOUTS\46searchRoot\75http://sophiejifox.blogspot.com/search\46blogLocale\75fr\46v752\46homepageUrl\75http://sophiejifox.blogspot.com/\46vt754314732496812885099',
where: document.getElementById("navbar-iframe-container"),
id: "navbar-iframe"
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
Voilà, voilà, et j’allais oublier mais merci pour ces tutos, très clairs et faciles à appliquer ^^