Blogger: Comment créer de belles infobulles 100% CSS

Il y a quelques jours je vous parlais d'une librairie 100% CSS qui permet d'obtenir des infobulles sympathiques sur votre site ou blog, bien sur il faut savoir l'intégrer. C'est pour cela que j'ai préparé un petit code pour l'intégrer facilement sur la plateforme Blogger.

Le fonctionnement est simple:

<span class="hint  hint--DIRECTION" data-hint="TEXTE DE L'INFOBULLE">
TEXTE QUI VA FAIRE APPARAÎTRE L'INFOBULLE AU SURVOL DE LA SOURIS
</span>

Voici quelques exemples (passer la souris sur le mot exemple pour avoir un aperçu, le code de chaque exemple est juste dessous:

---

EXEMPLE

<span class="hint  hint--bottom" data-hint="flèche en bas">EXEMPLE</span>

---

EXEMPLE

<span class="hint  hint--right" data-hint="flèche à droite">EXEMPLE</span>

---

EXEMPLE

<span class="hint  hint--top" data-hint="flèche en haut">EXEMPLE</span>

---

EXEMPLE

<span class="hint  hint--left" data-hint="flèche à gauche">EXEMPLE</span>

---

EXEMPLE

<span class="hint  hint--error" data-hint="bulle erreur">EXEMPLE</span>

---

EXEMPLE

<span class="hint  hint--warning" data-hint="bulle Attention">EXEMPLE</span></p>

---

EXEMPLE

<span class="hint  hint--right hint--always" data-hint="bulle toujours visible">EXEMPLE</span></p>

---

EXEMPLE

le premier <span class="hint  hint--info" data-hint="bulle information">EXEMPLE</span> d'infobulle</p>

---

Comment intégrer le code sur Blogger ?

Pour cela vous vous rendrez sur:

Mise en page -> Ajouter un gadget -> Gadget Html / JavaScript

Et vous copier coller le code ci dessous:

<style>/*! Hint.css - v0.1.0 - 2013-02-03 * https://github.com/chinchang/hint.css* Copyright (c) 2013 Kushagra Gour; Licensed MIT */.hint{position:relative;display:inline-block}.hint:before,.hint:after{position:absolute;opacity:0;z-index:1000000;pointer-events:none;-webkit-transition:.3s ease;-moz-transition:.3s ease}.hint:hover:before,.hint:hover:after{opacity:1}.hint:before{content:'';position:absolute;background:transparent;border:6px solid transparent;z-index:1000001}.hint:after{content:attr(data-hint);background:#383838;color:white;text-shadow:0 -1px 0 black;padding:8px 10px;font-size:12px;line-height:12px;white-space:nowrap;box-shadow:4px 4px 8px rgba(0,0,0,0.3)}.hint--top:before{border-top-color:#383838}.hint--bottom:before{border-bottom-color:#383838}.hint--left:before{border-left-color:#383838}.hint--right:before{border-right-color:#383838}.hint--top:before{margin-bottom:-12px}.hint--top:after{margin-left:-18px}.hint--top:before,.hint--top:after{bottom:100%;left:50%}.hint--top:hover:before,.hint--top:hover:after{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--bottom:before{margin-top:-12px}.hint--bottom:after{margin-left:-18px}.hint--bottom:before,.hint--bottom:after{top:100%;left:50%}.hint--bottom:hover:before,.hint--bottom:hover:after{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--right:before{margin-left:-12px;margin-bottom:-6px}.hint--right:after{margin-bottom:-14px}.hint--right:before,.hint--right:after{left:100%;bottom:50%}.hint--right:hover:before,.hint--right:hover:after{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)}.hint--left:before{margin-right:-12px;margin-bottom:-6px}.hint--left:after{margin-bottom:-14px}.hint--left:before,.hint--left:after{right:100%;bottom:50%}.hint--left:hover:before,.hint--left:hover:after{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--error:after{background-color:#b34e4d;text-shadow:0 -1px 0 #5a2626}.hint--error.hint--top:before{border-top-color:#b34e4d}.hint--error.hint--bottom:before{border-bottom-color:#b34e4d}.hint--error.hint--left:before{border-left-color:#b34e4d}.hint--error.hint--right:before{border-right-color:#b34e4d}.hint--warning:after{background-color:#c09854;text-shadow:0 -1px 0 #6d5228}.hint--warning.hint--top:before{border-top-color:#c09854}.hint--warning.hint--bottom:before{border-bottom-color:#c09854}.hint--warning.hint--left:before{border-left-color:#c09854}.hint--warning.hint--right:before{border-right-color:#c09854}.hint--info:after{background-color:#3986ac;text-shadow:0 -1px 0 #193c4c}.hint--info.hint--top:before{border-top-color:#3986ac}.hint--info.hint--bottom:before{border-bottom-color:#3986ac}.hint--info.hint--left:before{border-left-color:#3986ac}.hint--info.hint--right:before{border-right-color:#3986ac}.hint--success:after{background-color:#458746;text-shadow:0 -1px 0 #1a331a}.hint--success.hint--top:before{border-top-color:#458746}.hint--success.hint--bottom:before{border-bottom-color:#458746}.hint--success.hint--left:before{border-left-color:#458746}.hint--success.hint--right:before{border-right-color:#458746}.hint--always:after,.hint--always:before{opacity:1}.hint--always.hint--top:after,.hint--always.hint--top:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--always.hint--bottom:after,.hint--always.hint--bottom:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--always.hint--left:after,.hint--always.hint--left:before{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--always.hint--right:after,.hint--always.hint--right:before{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)}</style>

J'ai compressé le code originale, si vous voulez le modifier téléchargez plutôt le fichier sur la page du développeur.