Création Tuto widget "Lecture en cours" pour votre blog littéraire

 Création et mise en oeuvre d'un gadget "Lecture en cours" sous Blogger

Enfin un nouvel article dans la section blogging. 

Je vous explique comment ajouter à votre blog une image avec un curseur de 0 à 100% pour montrer à vos visiteurs votre lecture en cours. Mais cela fonctionne aussi pour votre série en cours, ou tout autre projet, activité.

Depuis quelques temps, je rêvais de mettre ce gadget en oeuvre mais impossible de trouver le code HTML pour cela. 

C'est grâce à la blogueuse de My Little World qui m'a gentiment expliqué la methode que j'ai pu mettre en place ce nouveau gadget. Je vous conseille d'ailleurs d'aller découvrir son blog. Elle vous y parle de livres, films et séries avec beaucoup de bonne humeur, agrémenté des photos de ses chats. Un régal.

La procédure est très simple et même les novices y parviendront du premier coup.

Première étape :

Créer un nouvel article et inserer l'image de votre choix. Clic droit pour copier coller le lien de l'image.

Deuxième étape :

Rendez vous dans l'interface de votre blog, puis cliquer sur "mise en page".

Choisissez l'emplacement de votre futur gagdet et "Ajouter un nouveau gadget"

Une fenêtre s'ouvre, il suffit de choisir l'option "HTML/javascript"

Troisième étape :

Ajouter un titre à votre gadget si vous le souhaitez et en dessous coller la ligne de code suivante après l'avoir modifié en ajoutant 2 fois l'adresse de l'image.

<div class="separator" style="clear: both; text-align: center;">

<a href="adresse de l'image" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="adresse de l'image" /></a></div>

<div class="separator" style="clear: both; text-align: center;">

<p><progress id="avancement" value="35" max="100"></progress></p>35%<br /></div>

Ici c'est un avancement à 35%, il faut changer cette valeur en fonction de votre progression au fur et à mesure.

Si vous regardez cet article via un pc ou un mac vous verrez sur le coté droit de mon blog "Ma lecture en cours" et l'image associée. La version mobile ne permet pas toujours de voir certains gadgets, donc voici en image ce que cela donne : 

Voici le même code mais pour une taille d'image plus grande. Si vous souhaitez une taille encore différence, il suffit de changer les valeurs en gras.

<div class="separator" style="clear: both; text-align: center;">

<a href="adresse de l'image"1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="adresse de l'image" width="200" /></a></div>

<div class="separator" style="clear: both; text-align: center;">

<p><progress id="avancement" value="0" max="100"></progress></p>0%<br /></div>

Terminé et félicitations car je suis sure que vous y êtes arrivés du premier coup !

♥ Si vous avez des questions laissez un petit commentaire je viendrais vous répondre ♥

Bon blogging à tous et à bientot pour un nouvel article, n'hésitez pas à vous abonner au blog pour lire les dernières nouveautés.

D'autres astuces pour le blogging par ICI

                                                                                                               

                                                                                                                                     Rejoins moi sur Instagram