[Fiche] Revue de Blog pour savoir où modifier le HTML et le CSS

Bonjour,

Il est bien de vouloir personnaliser son blog en utilisant les petits tutos du forum mais il est mieux de savoir où se met quoi.

Je vais donc passer en revue quelques uns de vos supports préférés pour que vous ne soyez plus perdu

Au sommaire:
- Jimdo
- Eklablog
- Canalblog
- Blogger
- Tumblr

A suivre, pour vos suggestions, merci de bien vouloir indiquer vos supports ici :
http://www.sims-artists.com/t4679-appel-a-l-aide-quel-support-de-blog-ou-site-utilisez-vous

Car je sais que nombreux lisent même quand le tuto est en cours, ainsi il sera complet au plus vite

1. Jimdo :

A. Modifier le HTML :

La modification se fait au niveau du site, lorsque vous ajoutez un nouvel élément vous allez choisir Widget/HTML


Vous coller ensuite la partie relative au code HTML


B. Modifier le CSS :

Deux cas de figures, veillez à vérifier dans quel cas vous êtes avant de mettre votre code, les sites sont assez susceptibles avec ce genre de choses...

-> Vous utilisez un design jimdo ou un design special et vous avez effectué des modifications sans passer par le design personnel

Vous allez devoir feinter le blog en rajoutant des instructions relatives au CSS, pour ce faire on va rajouter des instructions de style dans le head.
Vous devez donc aller dans Paramètres > Modifier le head


Vous allez ensuite coller votre code CSS à l'intérieur de balises qui sont

Code:

<style>votre code css</style>

Une fois enregistré, le logiciel vous indiquera qu'il a fait des corrections, c'est pour uniformiser le langage donc pas de soucis, qu'il uniformise si ça lui fait plaisir.

-> Vous avez modifié entièrement le code CSS de votre site en passant par design personnel

Auquel cas, vous savez déjà modifier le css, mais au cas où voici donc le lieu où tout se passe :
Design > Design personnel > CSS

2. Eklablog:

A. Modifier le HTML :

Pour insérer notre bouton nous allons donc Ecrire un nouvel article


Une fois que vous avez rédigé votre texte et que vous souhaitez insérer votre bouton, nous allons cliquer sur le bouton Editer le code source HTML


On y insére le code HTML et on clique sur Mettre à jour


B. Modifier le CSS :

En haut de l'écran vous avez un menu qui vous permet de modifier votre blog, on va aller dans Apparence > Modifier le thème


Au niveau des onglets latéraux on va dans Ajouter du CSS, il ne vous reste plus qu'à coller votre code et cliquer sur Appliquer et sauvegarder

3. Canalblog :

Alors après mon test j'ai une impression négative de Canalblog quand a son système de fonctionnement. Je m'explique...
Soit vous ne savez pas utiliser le HTML/CSS et alors toutes les options vous permettent une bonne personnalisation. Soit vous savez parfaitement intégrer un site et le mode avancé vous permet de modifier la structure et le style.
Par contre entre les deux, vous qui voulez customiser un peu le site et bien il n'y a rien pour vous. Donc mon conseil, si vous ne comptez pas modifier totalement le code en HTML et CSS alors abstenez vous car il n'y a pas de demi mesure !!!

A. Modifier le HTML :

Pour mettre le code, il nous faut créer un nouveau message


Une fois que vous avez rédigé votre texte et que vous souhaitez insérer votre bouton, nous allons cliquer sur le bouton Editer le code source HTML


On y met le code HTML et on clique sur Mettre à jour


B. Modifier le CSS :

POur espérer modifier le code CSS, on va aller dans Apparence > Liste des modèles > Paramètres


Afin de saisir du code CSS on va être obligé de convertir le fonctionnement des modifications du style du blog. Pour cela on doit le passer en avancé.
Ce qui signifie qu'à l'avenir si vous voulez changer une couleur ou une taille ou quoi que ce soit, vous devrez éditer le code CSS. Vous n'aurez plus des menu déroulant ou autre pour vous aider.
Cerise sur le gâteau, aucune possibilité de revenir en arrière

Vous voilà averti, voici donc comment procéder : cocher la case et validez


A présent nous allons Editer les fichier de modèle


Dans le menu déroulant vous devez sélectionner la feuille de style générale


Allez tout en bas du code, pour être sûr que vos instructions fassent force de loi, coller votre code et validez

4. Blogger:

A. Modifier le HTML :

Pour ajouter notre code, nous allons créer un nouveau message


Là c'est merveilleux nous avons un bouton en toute lettre qui nous appelle nommé HTML, on clique dessus et on ajoute notre code. Il ne reste plus qu'à faire publier.


B. Modifier le CSS :

On va à présent aller dans Modèle et contre toute attente faire Personnaliser

Petite aparté pour dire que Blogger là m'a séduite, car on peut soit ajouter du code CSS en tant que débutant et aller dans Personnaliser soit si on a envie de tout modifier et customiser son code on peut aller dans éditer le code HTML. La nuance qui me manquait justement dans l'expérimentation de Canalblog.
Ils ont pensé au débutant, ceux qui veulent mettre un peu les doigts dedans et ceux qui veulent tout changer.


On va donc dans le menu Avancé


On va scroller pour dans la seconde partie du menu trouver Ajouter le fichier CSS
Ajouter donc le fameux code CSS et en haut à gauche de votre fenêtre cliquez sur Appliquer au blog

5. Tumblr :

Sur cette plateforme nous allons faire les choses à deux endroits. Le code HTML se modifie depuis le tableau de bord et pour ajouter du CSS il va falloir aller dans la personnalisation du blog.

A. Modifier le HTML :

Pour insérer notre bouton nous allons donc créer un nouvel article, on clique donc sur Texte


Au niveau de l'éditeur de texte, une fois que vous avez rédigé votre texte et que vous souhaitez insérer votre bouton, nous allons cliquer sur le bouton qui nous permet d'éditer le code en mode HTML


On y insére le code HTML et on enregistre


B. Modifier le CSS :

Au niveau du panneau de configuration sur le côté vous avez votre pseudo et la liste de vos blogs. POur accéder à la modification de celui-ci on va cliquer sur le lien du blog qui nous intéresse


Vous êtes donc en mode visualisation de votre blog. En haut à droite de votre écran vous avez deux boutons, on clique sur Paramètres


Je vous ai mis l'image en entier. Donc sur la partie latérale, vous allez devoir scroller jusqu'à la fin. Vous êtes dans la section avancé et tout en bas, vous avez un petit cadre dans lequel vous pouvez ajouter votre code CSS
Pensez à cliquer une fois votre code mis sur le bouton vert Enregistrer qui se trouve tout en haut

Je garde ce post pour le cas où un nouveau support populaire verrait le jour

Voilà fin de la fiche, vous devriez ainsi savoir mettre quoi et ce qu'engage des manipulations qui permette de modifier le CSS sur certains suppports

N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle.
Pour d'éventuelles questions, c'est par ici et si vous avez besoin d'une aide plus longue, allez en salle Aides personnalisées. Enfin, si vous souhaitez en apprendre plus sur le sujet, demandez un Atelier.

Merci beaucoup Fuyaya. (cette fois ci, c'est bon XD)

Merci Fu !

Merci Fu pour cette fiche !

Merci Fu!

Merci Fu

Merci pour ce tuto super utile !

Merci pour le tuto.

merci beaucoup Fu' !

Merci pour cette fiche