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

SOMMAIRE /

Mode Confiance :

>> Inserer un cadre de texte
>> Inserer un livre d'or
>> Apercu photo agrandit au roll-hover
>> Les infos-bulles sur une image en roll-hover (l'auteur : PêUR [A VOIR])
>> Placer un "lien vers haut de page"
>> "Imprimez l'article"

Mode Privilege :
>> Inserer une forme "selection"
>> Inserer un compteur de visites sans digit [simplifié]
>> Inserer un cadre post-it Express
>> Inserer une horloge colorée et scintillante

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

Mode confiance


>> Inserer un cadre de texte :

Version simple :
<textarea class="recherche" style="WIDTH: 350px" rows="5" name="box3">EXEMPLE</textarea>

donne :  EXEMPLE


Version personnalisée :
<textarea class="recherche" style="width: 205px; height: 60px; background-color: rgb(0, 0, 139); color: rgb(255, 255, 255); font-family: arial; font-style: italic; font-size: 12px;" rows="2"VOICI LE TEXTE A INSCRIRE DANS VOTRE CADRE</textarea>

donne :  VOICI LE TEXTE A INSCRIRE DANS VOTRE CADRE


Explications/
width = la largeur de votre cadre
height = la hauteur de votre cadre
background-color rgb( ) = le fond de votre cadre, mettez les couleurs RGB et non les hexadécimal (#fff)
color rgb ( ) = la couleur de votre police (idem, pour le RGB)
font-family = votre police
font-size = la taille de votre police
rows = le nombre de ligne apparantes automatiquement dans le cadre

Site de convertion de couleurs hexadécimales en rgb (ou inversement) :
* Al'aide.com

name="box3">

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

  >> Inserer un livre d'or

Beaucoup de blogs préfèrent avoir leur livre d'or en signe d'article... Voici une autre méthode, si vous désirer avoir un livre d'or externe à votre blog :

Swisstool est un site gratuit, EN FRANCAIS, pour vous permettre d'inserer diverses choses sur votre blog : livre d'or, sondages...

A vous de laisser courir votre imagination : Swisstool

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

>> Apercu photo agrandit au roll-hover

Le principe est d'avoir des aperçus d'images qui s'agrandissent, taille réelle au passage de la souris. Pour obtenir ceci :

Inserer cette ligne de code dans le code SOURCE de votre article:

<div align="center"><a onmouseover="document.photo1.src='http://idata.over-blog.com/0/13/19/33/cathedral2.jpg'" onmouseout="document.photo1.src='http://idata.over-blog.com/0/13/19/33/cathedral1.jpg'" a=""><img alt="" src="http://idata.over-blog.com/0/13/19/33/cathedral1.jpg" name="photo1" /></a> <a onmouseover="document.photo2.src='http://idata.over-blog.com/0/13/19/33/kiosque2.jpg'" onmouseout="document.photo2.src='http://idata.over-blog.com/0/13/19/33/kiosque1.jpg'" a=""><img alt="" src="http://idata.over-blog.com/0/13/19/33/kiosque1.jpg" name="photo2" /></a> <a onmouseover="document.photo3.src='http://idata.over-blog.com/0/13/19/33/maison2.jpg'" onmouseout="document.photo3.src='http://idata.over-blog.com/0/13/19/33/maison1.jpg'" a=""><img alt="" src="http://idata.over-blog.com/0/13/19/33/maison1.jpg" name="photo3" /></a></div>

Explications /

onmouseover  = l'url de votre photo taille réelle

onmouseout = l'url de votre photo taille aperçu

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

>> Les infos-bulles sur une image en roll-hover (l'auteur : PêUR [A VOIR])

Il y a deux étapes : un code a inserer dans votre CSS (a la fin de BODY par exemple), qui définit la mise en forme de vos infos-bulle (couleurs, taille, police...) et une partie à inserer en code source de votre article, module... (qui va personnaliser chaque info-bulle).

CODE SOURCE
<a href="http://translate.google.com/translate?u=http%3A%2F%2Fcelinedanslemonde.over-blog.com&langpair=fr%7Cen&hl=fr&ie=UTF-8&oe=UTF-8&prev=%2Flanguage_tools" class="info"><img alt="" style="width: 36px; height: 31px;" src="http://idata.over-blog.com/0/08/01/57/uk.jpg" /><span>Click on the flag </span></a>

Explications /
<a href> = est le site de lien. C'est l'adresse de destination au clic sur votre image.
src= l'url de votre image hébergée (sur Over-Blog par exemple)
Click on the flag.... = le texte qui apparaitra au survole de la souris sur votre image

CODE CSS
a.info { position:relative; border-bottom:1px dashed #808080; text-decoration: none; font-weight: bold; } a:hover.info { text-decoration: none; background: none; } a.info span {display: none;} a:hover.info span { display: inline; position: absolute; top:1.5em; left:0.5em; z-index: 20; background: #fff; color: #000000; border:1px solid #FF5500 width:130px; text-align:center font-weight:normal; font-size: 10px; line-height:12px; padding:2px 4px; }

Explications/
background = le fond de votre bulle
color = la couleur du texte
text-align = l'alignement du texte de votre bulle (right=droite ; left=gauche ; justify=pavé aligné des deux côté ; center=centré)
font-size = la taille de votre police
border 1px = la largeur de votre bordure de bulle
border #FF5500 = la couleur de votre bordure
font-weight = le style de votre police (bold=gras ; none=rien)

donne :

Click on the flag

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

>> Placer un "lien vers haut de page"

Javascript autorisé même en mode confiance; écrivez votre phrase cliquable de retour vers le haut, puis selectionez là et faites "ajouter un lien" grâce à cette icône 
Ensuite, dans Protocole, choisissez "autre" et inserez cette phrase : javascript:scroll(0,0)

Voir haut de page

>> "Imprimez l'article"

Idem mais inserez cette phrase : javascript:self.print()

Imprimez cet article

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

Mode privilege [javascript]

>> Inserer une forme "selection"

voici un petit exemple pour mieux comprendre....

CSS/ Design Trucs et Astuces En + clair
correspond avec ce code :

<form> <select onchange="chgpage(this.form)" size="1" name="listepages"> <option selected="selected">CSS/ Design</option> <option target="_blank" value="http://celinedanslemonde.over-blog.com/article-1073815.html">Trucs et Astuces </option> <option target="_blank" value="http://celinedanslemonde.over-blog.com/article-1354899.html">En + clair </option> </select> </form>

A votre tour : Les url sont à personnaliser, ainsi que les titres ! Vous pouvez rajouter autant de lignes que vous le souhaitez avec cette ligne a rajouter sous les autres:
<option target="_blank" value="http://VOTRE URL"> VOTRE TITRE </option>

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

>> Inserer un compteur de visites sans digit [simplifié]

Voici un site, trés simple, sans pub, qui offre des compteurs "personnalisables" sans digit (sans image, cadre superflu...etc..).

http://www.remotel.fr/cpt/creation.php

Il vous suffit d'inscrire un email, un mot de passe et votre adresse de blog ; ensuite vous adaptez votre compteur (chiffre de départ..) puis vous placez le script donné dans votre mode source (là où vous voulez votre compteur)

Merci à Alexandre (Mobi:::Test) de nous avoir trouvé cette perle !

>> Un compteur de visite journalier

http://localhost/newcounter.php
Ce site est trés bien fait, il vous suffit de vous inscrire et de mettre votre page de blog, de choisir votre compteur, son chiffre de départ et voilà!

une ligne de code en script vous est donnée, a insérer dans votre entete, pied de page, module...

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

>> Inserer un cadre post-it Express

Voici un site (français) trés bien fait, rapide et simple qui permet de placer un post-it (a changer/ré-éditer sur le site hébergeur) sur votre blog!

http://post-it.apidom.com/

Attention : le post-it ne peut pas se dimensioner manuellement et prend automatiquement la largeur de votre article, module, entete, pied de page (où vous l'inserez) !

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

>> Inserer une horloge colorée et scintillante

Proposées par le site KissDesign, voici des horloges et des calendriers fantaisie! Aux images variées, scintillantes, originales... Site EN FRANCAIS.

Insérer cette ligne de code dans votre code SOURCE d'article, de module (...) et remplacez les XXX par le numero du modèle choisit (voir sur le site de KissDesign)

<script language="JavaScript"
src="http://www.kissdesign.net/horloge/XXX/calendrier.js"></script>

Bonne création ;)

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

Voir aussi  >> Trucs et Astuces     >> En + clair / les nuls du CSS

A venir :
>> Mettre des citations aleatoires
>> Faire un diaporama de photo en html