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

Publié le par celine


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 : 


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 : 


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:



 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


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


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....
 



correspond avec ce code :


 

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://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 ;)
******************

A venir :

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

Publié dans CSS-Design

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

Commenter cet article

fiona 25/04/2006 20:01

J' aime bien le titre lol "pour les nuls" me correspond vraiment c' est pas des conneries lol je suis trop nul et j' y comprannais rien lol merci grâàçe a toi j' ai compris des choses lol  

link $im@rd 16/03/2006 21:00

et un animal virtuel ? ca tinteresse ?

fabienne (fab) 15/03/2006 18:50

Bonsoir ! ça c'est une bonne idée car novice je suis en mode confiance et j'ai bien du mal à me débrouiller sur le blog il m'a fallu 2 mois et l'aide de quelqu'un pour arriver à écrire plus grand alors je viens de rentrer du boulot mais demain je vais y jeter un coup d'oeil avec sérieux ! Merci pour cette aide ça fait plaisir ... Bisou et bonne soirée

Joël 12/03/2006 13:14

Bonjour Céline, merci pour toute cette aide...Bon Dimanche. Joël.

akane 12/03/2006 03:47

tres praue ca! surtout le cadre de texte! merci!