Voir la Liste des tutoriels.

 

 

Exemple :

 

 

1) Prenez votre gif animé, exemple :

Diminuer la taille de l'image :

 

- L'image étant trop grande, il ne faut pas dépasser 150 px de haut et de large, il convient donc de la rétrécir, allez sur le site online-image-editor.com.

 

- Importez votre image.

 

- Cliquez sur "Resize" :

 

- Diminuez votre image, cliquez sur le bouton "Apply".

 

- L'image est trop haute, pour couper le bas de l'image, cliquez sur "Crop" :

 

- Un carré rouge s'affiche sur votre gif, vous pouvez le déplacer, l'élargir, le rétrécir. Ce carré signifie l'intérieur qu'il restera de votre image. Une fois que c'est fait, cliquez sur "Apply".

 

- Enregistrez votre image.

 

- Allez sur le site gif-mania.net.

 

- Tapez votre texte.

 

- Cliquez sur "Valérie" pour choisir votre police de caractère. Sur le côté, il y a des ronds, le rond d'en haut est la taille du texte la plus grande et, le rond d'en bas est la taille du texte le plus petit.

 

- Cliquez sur le rond 3 pour choisir votre couleur.

 

- Cliquez sur le rond 4, pour choisir une figurine. Vous pouvez prendre celles du site Gif-mania. Pour mettre votre propre gif, cliquez sur le menu, sélectionnez "Tes figurines perso", cliquez sur le rond vert symbolisant "Ajouter", prenez votre gif.

 

- Cliquez sur "Créer" puis sur "Télécharger".

 

Effacer le lien sur l'image :

 

- Retournez sur le site online-image-editor.com, prenez votre image.

 

- Cliquez sur l'onglet "Advanced" :  .

 

- Juste en dessous, cliquez sur "Transparency" : 

 

- Sélectionnez "Drow Transparent Line" , mettez "25" :

 

- Avec votre souris d'ordinateur, ou tablette... effacez le lien rouge "Gif mania".

 

- Cliquez sur l'onglet "Basics" :   puis sur "Resize" : .

 

- Sous le bouton vert "Apply", cliquez sur "Cancel".

 

- Enregistrez votre image avec un clic droit sur l'image, puis, "Enregistrer l'image".

 

- 

 

Voir la Liste des tutoriels.

 

Je rajouterai du contenu ici

 

Mettre un texte :

 

<font size="6">TEXTE</font>  Changer l'intérieur Votre-texte-ici, et, changez le numéro, plus le numéro est élevé, plus le texte est grand.

 

<u>TEXTE</u> Pour surligner

 

<strong>TEXTE</strong>  Pour mettre le texte en gras

 

Liens de textes :

 

<a href=LIEN>TEXTE</a>  Pour faire un lien simple n'ouvrant pas un nouvel onglet.

 

<a href="LIEN" target="_blank">TEXTE</a>  Pour faire un lien ouvrant dans un nouvel onglet.

 

<a href="LIEN" style="color:#677E52">TEXTE</A> Lien en couleur n'ouvrant pas un nouvel onglet.

 

<a href="LIEN" style="text-decoration:none"><font size="2"  color="#8E3557">TEXTE</font></a> Lien  avec la taille du texte et la couleur modifiable.

 

Autres balises HTML :

 

&nbsp;  Pour faire un espace, on peut en mettre plusieurs pour plus d'espace.

 

<img src="URL-DE-L'IMAGE" alt="TITRE" /> Pour mettre une image, la balise alt est très importante, c'est pour que ce soit vu par les aveugles et, lorsque c'est vu par eux, c'est que l'image est aussi vu dans les moteurs de recherche, c'est donc favorable au référencement.

 

Sources : plusieurs recherches internet

 

Voir la Liste des tutoriels.

 

Je donnerai des explications ici.

 

Exemple :

 

Code HTML :

 

<div style="width: 97%; padding-top: 0px; padding-bottom: 13px; border: 3px solid #A96ECD; text-align: center; background: #EED8F4; border-radius: 10px;"> <div style=";text-align: center; width: 100%;"> <div style="width: 100%; background-color: #a96ecd; font-size: 20px; text-align: center;"><span style="color: #ffffff;">Partenaires</span></div> </div> <p><br /><img src="http://ekladata.com/5RcmwlTV3xd6x7MwkoY3p-ReCmY.png" alt="- " /><a href="http://ac-world.eklablog.com/" target="_blank">Animal Crossing Horizons Leaf</a>    -    <img src="http://ekladata.com/5RcmwlTV3xd6x7MwkoY3p-ReCmY.png" alt="- " /><a title="Annuaires de sites, blogs et forums" href="http://annuaire.eklablog.com/annuaires-de-sites-blogs-et-forums-p2958402">Annuaires de sites, blogs et forums</a><br /><br /><img src="http://ekladata.com/5RcmwlTV3xd6x7MwkoY3p-ReCmY.png" alt="- " /><a href="https://www.felinepub.com/" target="_blank">Féline Pub</a>    -    <img src="http://ekladata.com/5RcmwlTV3xd6x7MwkoY3p-ReCmY.png" alt="- " /><a href="http://manola-tubes.eklablog.com/" target="_blank">Manola Tubes</a>    -    <img src="http://ekladata.com/5RcmwlTV3xd6x7MwkoY3p-ReCmY.png" alt="- " /><a href="http://digit-arts.eklablog.com/" target="_blank">Digit'Arts</a></p> </div>

Voir la Liste des tutoriels.

 

Le point négatif de ce tutoriel est qu'il faut mettre le même code HTML en haut de toutes les pages de votre blog.

 

- Dans "Ajouter du CSS" mettez ce code :

#fleche { position: fixed; top: 500px; right: 1%; }

 

- Il faut modifier toutes vos pages pour mettre l'image "Haut" et "Bas" en mettant ce code HTML ci-dessous. Pour cela, il faut pour toutes vos pages cliquer sur "Éditer" puis "Code source" et mettre ce code tout en haut :

<div id="fleche"><a href="#header"><img src="http://ekladata.com/WE6UmOKjP6zZ3_rD2vJzAe1VX-U.png" alt="haut" /> </a> <br /><br /> <a href="#footer"><img src="http://ekladata.com/hw3I9_cDIWsXegwbhy8F7jXf1kg.png" alt="bas" /></a></div>

 

- La première URL d'image est la flèche "Haut" à remplacer par la votre et la deusième URL de l'image est la flèche "Bas" est aussi à remplacer. Il y a deux balises <br/> dont chacune d'elles servent d'espaces entre vos deux flèches, vous pouvez en rajouter pour plus d'espace ou en mettre qu'une pour le moins d'espace possible entre vos deux flèches et si vous retirez tout les <br/> vos flèches seront l'une à côté de l'autre.

Voir la Liste des tutoriels.

 

Mettre une image de fond sur la barre eklablog qui est au dessus de votre blog :

Allez dans "Ajouter du CSS", puis ajoutez ce CSS :

/* Mettre une image à la place barre blanche d'eklablog */ #menubar { background: url(http://ekladata.com/zhCxSLjTlt9x5m86dLSEniDbBgE.jpg);} .menubar_section {background-image: none} #menubar_notifications {background-image: none} #menubar_signin_username, #menubar_signin_password { background: url(http://ekladata.com/zhCxSLjTlt9x5m86dLSEniDbBgE.jpg); } /* Supprimer les barres blanches verticales dans la barre blanche d'eklablog */ #menubar_logo{} .notif_msg {color:darkred;} .menubar_separation{background: none;} #menubar_favorites, .menubar_section, #menubar_logo, #menubar_section_plan, #menubar_section_ad {background-image:none ;}

Remplacez l'URL de l'image (2 fois dans ce code) par votre URL d'image. Il vaut mieux une image hébergé sur eklablog pour ne pas que ça disparaisse.