un code css mise en page dans un gadget

obtenir ces boutons

Placer un code css de mise en page
dans un gadget HTML/JavaScript

On peut directement ajouter un code CSS de mise en page dans le template (modèle) du blog.

Quand c'est possible, il est plus intéressant de mettre le même code dans un gadget HTML/JavaScript, en y ajoutant, avant et après, : <style type="text/css">.....</style>.

On peut ainsi éviter de modifier le template du blog :
- les corrections seront plus faciles par la suite ;
- elles ne disparaîtront lors d'un changement de template ;
- elles ne disparaîtront pas non plus lors d'une mise à jour du template.

On peut enfin ajouter des instructions différentes les unes à la suite des autres dans le même gadget HTML/JavaScript, en n'ajoutant qu'une seule fois <style type="text/css">.....</style>. Cela évite une multiplication des gadgets.

* * * * *

Exemple de gadget HTML/JavaScript :

<style type="text/css">
#navbar-iframe {display: none;}
.feed-links {display: none;}
.quickedit{display:none;}
.Attribution {display: none;}
</style>

La première ligne supprime la barre de navigation Blogger en haut de l'écran.

La deuxième ligne supprime le lien "Atom" en bas de l'écran.

La troisième ligne supprime les outils (tournevis et clé plate) d'accès aux gadgets.

La quatrième ligne supprime la phrase "Fourni par Blogger" en bas d'écran.

* * * * *
Rappel de la procédure pour ajouter un gadget HTML/JavaScript sur un blog : cliquer ici.

5 commentaires:

fadoua zekri a dit…

Merci

Yann.B a dit…

Bonjour, merci pour ces astuces.
J'ai réussi et la navbar, atom etc .. ont bien disparus.
Le problème c'est que l'entourage du gadget HTML ainsi ajouté est visible dans ma colonne, un petit rectangle vide (puisque je n'ai pas mis de titre) est apparu, cela prends donc de la place dans la colonne.
Comment y remédier.

Meiser a dit…

Bonjour.

Il doit y avoir dans le template que vous utilisez des instructions générales commençant par "#...widget" ou "...widget". Vous pouvez les corriger.

Vous pouvez aussi éviter qu'elles s'appliquent au gadget concerné. Ajouter par exemple "border:none!important;" pour supprimer le cadre (bordure). "!important" permet d'éviter l'application d'une instruction postérieure contradictoire.


b23021960v a dit…
Ce commentaire a été supprimé par l'auteur.
Romaric Andoh a dit…

Merci à vous