CSS/HTML pour les nuls : Gadgets et Joujoux [Part 2]

Publié le par celine

En lien avec "CSS/html pour les nuls : [gadgets et joujouxPart 1]" et "Le CSS pour les nuls : en + clair"

Sommaire/

Mode confiance :

>> Faire apparaitre un message pop up "alerte" (pour le fun!)
>> Faire un raccourci "Lire la Suite"
>> Inserer des bannieres ou mots animés
>> Votre cocktail de personnalité par prénom
>> Inserer une vidéo sur son blog (WMPlayer, QuickTime, RealPalyer)

Mode Privilège :

>> Compteur de visite en ligne/par pays
>> Capture par webcam en ligne sur votre blog
>> Horloges script soft



~~~~~~~~~~~~~~~~~

MODE CONFIANCE

>> Faire apparaitre un message pop up "alerte" (pour le fun!)
Voici un code à inserer en mode source (article, module, intervention forum...) pour faire apparaître un message "alerte" (cliquez pour aperçu).

<a href="javascript:alert('message');">test</a>

test


>> Faire un raccourci "Lire la Suite"
Lorsqu'un article est trop long, un petit raccourci "Lire la suite" est le bienvenu. Un code trés simple à insérer dans votre mode source à chaque fois que vous le désirez et hop! le tour est joué!

<a href="#nogo" onclick="document.getElementById('cache').style.display = 'block';
this.style.display = 'none';">Lire la suite...</a>
<div id="cache"> ICI VOTRE TEXTE </div>

ATTENTION : Cette propriété est déjà comptée, par défaut, dans votre CSS, si vous souhaitez placer plusieurs "lire la suite" dans la même page, et qu'ils fonctionnent tous, dans ce cas, il vous faut rajouter quelques petits détails.

CSS/


MODE SOURCE/
(rajouter un numéro 1, 2, 3... sur ('cache')et <div id="cache"> )
**********************
>> Inserer des bannieres ou mots animés

Un site trés mimi pour décoré et habillé votre blog à volonté. Pas de javascript donc accessible en confiance! Ecrivez des messages, bannières... avec des effets sur les lettres... Idéal pour "Bienvenue" ou "Merci, à bientôt"...

http://www.bigoo.ws/pg_componi_lettere.php

**************************

>> Votre cocktail de personnalité (par prénom) (ANGL)

Voici un site trés bien fait : Go Quiz
(beaucoup de possibilités!)

Mettez votre prénom puis copier coller le code html en mode source sur votre blog.
Exemple avec mon prénom

How to make a celine
Ingredients:
5 parts jealousy
3 parts arrogance
3 parts beauty
Method:
Stir together in a glass tumbler with a salted rim. Add a little caring if desired!
 ******************************

>> Inserer une vidéo sur son blog (WMPlayer, QuickTime, RealPalyer)

Absolument magique, cet article explique trés simplement l'insertion d'une musique ou vidéo sur son blog/site. Il utilise la balise <embed> (la plus courante) avec les 3 lecteurs génériques du web.
Inserer-une-video-dans-une-page-web



MODE PRIVILEGE


>> Compteur de visite en ligne/par pays [NOUVEAU !]

Voici un site trés bien fait, ave un design interessant... Ce compteur prend de la place mais vous donne une précision de la provenance de vos visiteurs et récapitule TOUTES leur provenances avec un tableau défilant.

NeoWorx - Neocounter
Il vous suffit de vous enregistrer avec un email et un mot de passe, puis ensuite, une fois loggué, vous choisissez le design de votre compteur (cliquez sur ENREGISTRE pour le visualiser, puis sur OK pour le valider : vous pouvez le rechanger à tout moment), et vous installé l'outil (inserer la ligne de code javascript dans votre mode source)

Votre compteur est donc opérationnel !
**************************

>> Capture par webcam en ligne sur votre blog

Bloggersnap est bien connu sur la blogosphère, pour son système de prise d'image camera en live. J'explique, pour avoir une idée de ce don je parle, allez faire un petit tour sur cet article (rapide) et vous visualiserez mieux.

Le site de bloggersnap est en anglais (http://www.bloggersnap.com/index.php), mais pas de panique, j'explique tout! 3 étapes :

>> l'inscription gratuite. Lorsque vous arrivez sur le site, cliquez sur SIGN UP (souscrire) a gauche sur fond vert. Prenez ensuite la version gratuite (ou payante comme vous voulez) BASIC. Puis entrez un email, un mot de passe, recopier les caractères anti-spam et validez. Vous êtes inscrit! Pas d'e-mail de confirmation, vous pouvez vous logguer tout de suite en revenant sur l'accueil. 

>> Les réglages. Une fois loggué, vous arrivez sur une page appelée SETTINGS (réglages), où vous pouvez changer les couleurs et les textes de votre affichage. Entrez tout d'abord l'url de votre blog, puis écrivez le texte de votre bouton de cliquage (BUTTON LABEL). Les codes suivants sont pour les couleurs; dans l'ordre : le fond, la bordure d'image, le fond de l'image, la bordure du bouton, le fond du bouton, le texte du bouton. Et cliquez sur UPDATE SETTINGS (actualiser les réglages).

>> En cliquant, vous actualisez mais restez sur la même page. Il vous suffit maintenant de copier/coller le code (iframe) dessous dans le mode source de votre blog (où vous le souhaitez).

Les photos prises via votre blogsnap ne seront pas répertoriés dans un album (sauf si vous le faites a chaque fois)... Une nouvelle image remplacera l'ancienne. Si vous désirez avoir votre propre galerie (album), bloggersnap la propose, mais version payante (à choisir au moment de l'inscription) pour 9,50?/an pour illimité ou 5,50?/an pour 150 photos gardées.

>> Horloges script soft

Rien de plus simple grâce à ce site : www.toutimages.com/horloge_flash
Pas de pub (juste un lien sous l'horloge)? Choisissez le modèle que vous souhaitez, copier/coller le code dans votre mode source à l'endroit où vous le voulez sur votre blog (article, module, entete, pied de page...) et voilà! votre horloge est prête!



Publié dans CSS-Design

Pour être informé des derniers articles, inscrivez vous :

Commenter cet article

Estelle 27/11/2006 18:36

Bonjour,
je viens de créer mon blog et ai envie de faire pleins de chose.
Ton blog propose des trucs trés intéressants, mais comment on fait pour passer en mode source?
Over-blog me propose mode normal et avancé.
Merci pour ton aide

Louis CHATEL 24/07/2006 00:22

brit m'a transmis l'adresse de ton article pour lire la suite... merci pour le boulot, c'est simple à lire !
Bonne nuit :o)

Cindy 26/06/2006 13:52

Je dois être un peu bète, mais je ne sais pas comment placer mon code pour faire les cams, si tu pouvais m\\\'envoyer un petit mail ou un commentaire sur mon blog, histoire que je m\\\'y retrouve, parce-que là je suis dans le flou.
Au passage je t\\\'embrasse, tu es une fille extraodinaire, je comprend pourquoi Christophe t\\\'adore. Bisous.
Cindy ;)

Flo 21/06/2006 18:32

Et bien tu en as fait un travail Céline pour chercher tout ça
Bravo et bisous
Flo