Lifestyle
INSTALLER UN TEMPLATE (DESIGN) SUR BLOGGER EN 6 POINTS
jeudi, août 03, 2017
Vous me demandez souvent comment créer un joli design de blog sous Blogger, ou comment réaliser une barre avec un menu déroulant. La démarche est assez simple (même si elle peut un peu effrayer au départ les plus novices), il suffit de comprendre le fonctionnement et de filer sur le site Sora Templates pour y trouver le modèle que l'on préfère.
1. TROUVER SON MODÈLE / LES BASES DE L'INSTALLATION :
Une fois sur le site, promenez-vous sur la trentaine de pages et testez les modèles. Pour cela, cliquez sur le modèle choisi.
Cliquez ensuite sur (1) "Demo : See It Live". Vous aurez un aperçu sur un faux blog créé par Sora Templates et pourrez tester les différentes fonctionnalités du modèle. Si le modèle vous plait, qu'il s'adapterait parfaitement à votre blog, que les polices, le format des photos vous conviennent, vous pouvez le télécharger gratuitement en cliquant sur le (2).
Vous atterrirez sur cette page, cliquez sur Télécharger.
Le fichier va se télécharger sur votre ordinateur sous la forme d'un fichier compressé. Clic droit : extraire tout.
Rendez-vous sur votre blog. Pour plus de sécurité, et si c'est la première fois que vous tentez le coup, créez un blog Test : un blog bien différent du vôtre, qui servira juste à tester les modèles et à bien maîtriser l'installation avant de les appliquer à votre blog principal. Créez-y de faux articles avec des photos pour faire l'illusion au maximum d'un vrai blog avec du contenu.
Pour installer votre Template, rendez-vous dans (1) "Thème" puis dans (2) "Sauvegarder/Restaurer".
Sauvegardez votre thème (1), cela permettra s'il y a un problème de ré-importer votre blog existant. Puis (2) Choisissez un fichier, et allez chercher le thème que vous venez de télécharger.
Vous le trouverez dans le fichier que vous avez extrait, sous cette forme (un .XML).
Une fois ce fichier importé, le modèle sera installé sur votre blog ! Mais pleins de choses restent à personnaliser.
Dans les documents que vous avez téléchargés, vous trouverez un fichier Documentation, que vous pourrez consulter sur internet (cliquez sur Ouvrir si ce message apparaît).
Le fichier ainsi ouvert vous donnera (en anglais !) toutes les recommandations à suivre et les personnalisations à faire pour chaque modèle. En effet, chaque modèle est différent et ne se personnalisera pas de la même façon. Nous allons cependant voir ci-dessous les principales choses à savoir et qui reviennent pour la plupart des modèles.
2. PERSONNALISER LE NOM DU BLOG ET SES MOTS-CLÉS :
Rendez-vous dans Thème, Modifier le code HTML.
Le code peut vraiment effrayer ! Et en effet, mieux vaut ne pas se tromper et ne pas supprimer ni modifier n'importe quoi. Je vous rassure, je ne parle pas du tout le langage du code, mais j'ai appris à reconnaître ce qui m'intéressait et ce qui pouvait être changé. Dans votre modèle, recherchez (pour rechercher, cliquez quelque part dans le code et appuyez sur CTRL+F, la barre de recherche apparaîtra comme ici en haut à droite). Recherchez le mot "DESCRIPTION" jusqu'à atterrir à un code comme celui qui est ci-dessus. Vous pouvez modifier ce qui est dans les encadrés rouges avec la description et les mots-clés de votre choix, tout en veillant à bien rester dans les guillemets.
Ce qui donne par exemple ceci :
3. FAIRE UN MENU DÉROULANT :
Toujours en vous basant sur la recherche, allez sur le paragraphe ci-dessus dans votre code. J'ai recherché "class=menu" pour le trouver. Ce paragraphe représente les Catégories et les Sous-Catégories de votre menu déroulant. Apprenez à reconnaitre les blocs de paragraphes qui composent le code. Je vous ai encadré ci-dessus les blocs correspondants. Si vous voulez supprimer ou ajouter quelques catégories ou sous-catégories, sélectionnez bien toute la partie correspondante. Je vous ai souligner le nom des catégories en rouge (Home, Features..) qu'on retrouve sur le blog sous cette forme :
Il suffit donc pour changer le menu de :
- changer les noms soulignés en rouge et de les remplacer par vos noms de catégories à vous (Mode, Contact, A propos...)
- de remplacer les # par les liens sur lesquels vous voulez que les catégories renvoient.
Par exemple, ci-dessus j'ai remplacé les noms HOME, FEATURES, etc.. par les noms ACCUEIL, MODE, et j'ai remplacé les noms des sous-parties par LOOKS, SÉLECTIONS MODE et HAULS. Je veux du coup que quand on clique sur la catégorie LOOKS, on soit renvoyé vers tous les articles qui parlent de mode sur mon blog. Je vais donc remplacer le # du début de la ligne LOOKS (la ligne 4267) par le lien correspondant.
Pour cela, il faut que j'aille sur la page où sont référencés tout mes articles au libellé "Mode". Le lien se présente comme ceci : http://www.NOMDUBLOG.blogspot.fr/search/label/LIBELLE (changez NOMDUBLOG par votre nom de blog et LIBELLE par le libellé que vous avez choisi, exemple : mode. Nous avons donc ici : http://www.paulinedress.fr/search/label/mode (cliquez dessus, vous verrez du coup toutes mes tenues).
Pour créer des libellés, rien de plus simple. Dans la liste des articles que j'ai écrit, on voit par exemple que j'ai mis à chaque fois ce fameux libellé Mode.
Pour appliquer un libellé, quand vous rédigez ou modifiez un article, écrivez le ou les libellé(s) qui conviennent dans la case prévue à cet effet à droite. Vous pouvez écrire plusieurs libellés pour un article, il suffit de les séparer avec des virgules. Exemple : "mode, haul". Une fois que vous avez écrit un libellé dans un article, vous le retrouvez dans vos futurs articles, il suffit alors de cliquer dessus (comme ici avec le petit "mode" en bleu juste en dessous du cadre blanc des libellés).
Une fois que vous avez copié le lien sur lequel vous voulez rediriger votre catégorie, collez le à la place du # correspondant. Ici je redirige ma sous-catégorie Looks vers tout mes articles que j'ai libellé Mode. Vous n'avez rien compris ? C'est normal, reprenez pas à pas, le truc primordial est de bien comprendre la structure de ce code, et les emplacements à changer.
Ce qui nous donne donc un menu de ce type ! Avec les mots/liens qu'on a choisi !
4. REDIRIGER VERS SES RÉSEAUX SOCIAUX :
Comme vu plus haut, chaque modèle est différent. Orientez-vous grâce au fichier Documentation fourni avec le modèle. Exemple ici avec le modèle Oracle :
Grâce à la fonction recherche, trouvez dans le code le paragraphe ci-dessus (recherchez "Facebook" pour atterrir facilement dessus). Et modifiez les # entourés en rouge par les liens vers vos réseaux. Attention veillez à bien laisser les guillemets autour de vos liens, comme ci-dessous :
Comme à chaque fois que vous changez quelque chose dans le code, Enregistrez le thème et affichez votre blog pour vérifier que la manip a bien fonctionné.
Autre modèle, le modèle Winters :
Les réseaux sociaux se présentent ici sous cette forme.
Téléchargez le thème. Dans le fichier obtenu, vous trouverez un dossier "Widget Code". Dedans vous trouverez le fichier "Follow Code", ouvrez-le :
Copiez tout le texte.
Dans Mise en Page, Ajoutez un Gadget, choisissez un gadget "HTML/Java Script" et copiez le texte dedans.
Changez les liens de redirection avec vos noms de réseaux.
Les icônes apparaîtront sur votre blog, et redirigeront désormais vers vos différents réseaux sociaux !
5. CHANGER SA BANNIÈRE :
Allez dans Mise en Page. C'est là que vous pouvez mettre en forme et changer les blocs de construction de votre blog. On peut ici changer la bannière en cliquant sur "modifier" dans le gadget EN-TETE.
Supprimez l'image s'il y en a une déjà en place.
Et importez la votre ! Vous pouvez faire une bannière simple dans Paint ou sur le site Pic Monkey.
Et voilà ! Votre bannière est en place et votre site prend vraiment forme !
6. INSÉRER UN GADGET AVEC SES PHOTOS INSTAGRAM QUI DÉFILENT :
Nous pouvons installer ici un gadget Instagram.
Rendez-vous sur le site SnapWidget.com, vous pourrez, une fois après avoir créé votre compte, insérer un gadget qui fera défiler vos photos Instagram (ou Facebook, twitter... plusieurs choses sont proposées). Commençons par un encadré carré photo par photo.
Vous avez juste à renseigner votre pseudo dans l'encadré rouge, et éventuellement la taille (idéale pour la plupart des modèles : environ 300 px). D'autres paramètres sont modifiables (mettre un fond coloré, une bordure...), mais il s'agit des deux principaux réglages. Une fois que les deux cases sont renseignées, cliquez sur "Get Widget".
Copiez le code que vous obtenez.
Sur Blogger, dans mise en page, ajoutez un gadget, choisissez encore une fois un HTML/Java Script, et collez y le code.
Voilà le résultat ! Vos photos défilent ! Si la taille ne convient pas, cliquez sur les petits outils en bas à droite du gadget :
Changez les deux tailles (mettre la même taille), enregistrez. La photo se redimensionne.
Si vous voulez également installer une ligne de photos tout en bas de votre blog, c'est ce gadget là qu'il va falloir choisir sur Snap Widget.
Pour une ligne on choisit du 8 (environ) x 1. Comme avant, on copie le code obtenu, et on le colle sur le blog dans un gagdet HTLM.
Et voilà le résultat ! Les photos s'actualisent dès que vous en mettez de nouvelles sur Instagram.
Bon.. J'espère ne pas vous avoir trop assommés, c'est assez simple une fois qu'on a compris la démarche, et la documentation fournie sur Sora Templates explique généralement bien la procédure. N'hésitez pas à me partager le résultat en me laissant le lien de vos blogs, ou de m'envoyer un mail si vous avez des questions un peu plus poussées, ou des problèmes sur certains points. À très vite !
8 commentaires
Super l'article que j'attendais je suis en plein changement design, j'ai fait déjà quelques changement grâce à tes tutos Snapchat merci 😊, j'aimerai beaucoup que tu jètes un coup à mon blog pour voir ce que toi tu changerai comme j'aime beaucoup ton travail et tes conseils comme ça je saurai ce qu'il me reste à faire ;) merci pour tous tes conseils ;) bonne soirée
RépondreSupprimerMon blog : http//:labulledecaroline.blogspot.fr
Je suis allée voir, c'est sympa du coup =)
SupprimerPar contre où tu as mis tes réseaux, le "pour me retrouver" seulement trois s'affichent et ne sont pas alignés. Si c'était moi j'épurerais un peu le bas, c'est un peu chargé mais c'est personnel. ET bizarrement dans ta barre de menu, le petit signe "tournevis et clé" apparait, alors que normalement il n'apparait que pour le propriétaire du blog !
Mais sinon super, bravo =)
Super article merci, moi qui voulais changer de template !!
RépondreSupprimerSuper intéressant cet article, ça va m'aider pour certaines petites choses (surtout pour les codes que j'ose rarement toucher).
RépondreSupprimerAu top , merci pour tes conseils qui vont beaucoup m'aider pour améliorer mon blog
RépondreSupprimerBon on a pas tout finis mais MERCI beaucoup <3
RépondreSupprimerBonjour,
RépondreSupprimerVotre thème est une version d'essai payant ou 100% gratuit?
Sinon j'aimerai connaître son nom, le lien s'il vous plaît
Cordialement
Bonjour Jean-Jacques,
SupprimerOui c'est un 100% gratuit, c'est le Glam Up =)