Quelques images sympas

Et quelques séparateurs vacances :  

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des jeux * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

Voici comment changer le curseur de la souris sur les articles de votre blog

C'est un petit code bien utile car il fait de l'effet et ne manquera pas d'épater vos visiteurs !

 

1. Trouver des curseurs animés


Vous trouverez facilement des curseurs animés sur la grande toile.

Je vous conseille d'ailleurs de faire plutôt votre recherche avec le mot "cursor", soit curseur en anglais, car il y a beaucoup plus de sites qui en offrent.

J'ai sélectionné le site Andy Animated Cursors, qui offre un large choix, dans des catégories assez différentes.


2. Enregistrer les curseurs animés

2.1 Enregistrement sur votre ordinateur

Une fois votre curseur trouvé, enregistrer le en cliquant dessus, puis en sélectionnant l'endroit de sauvegarde sur votre PC.
Vérifier que l'extension de ce fichier est bien ".ani"


2.2 Enregistrement du curseur animé sur une page web

Pour fonctionner, ce curseur doit être enregistré sur unepage web.

Sur Overblog, si vous avez la possibilité d'enregistrer "Autres documents", dans le menu "Documents", alors c'est ici qu'il faudra sauvegarder le fichier du curseur, puis copier son adresse url.

Sinon, il faut l'enregistrer sur un site de sauvegarde sur internet.
De mon côté, j'utilise Archive-Host, site gratuit et pratique. Mes cuseurs y sont enregistrés et j'ai noté leur adresse.

2.3 Insérer un curseur animé sur un article de votre blog

Dans votre administration OverBlog, aller sur l'article voulu et passer en mode avancé (Onglet Edition avancée" puis sélectionner HTML à gauche du menu.

Ajouter alors, tout à la fin de votre code, les lignes suivantes :
 

<style type="text/css">

body {cursor: url(adresse http de votre curseur); }

</style>

et mettre votre adresse de curseur.

 

 
3. Quelques curseurs animés à utiliser facilement

Afin que vous puissiez essayer sans avoir à trouver puis enregistrer votre curseur, je vous donne 3 de mes adresses de curseurs.

Postez-moi un commentaire à cet article si vous voulez un autre curseur.

3.1 Le curseur de cet article
 

<style type="text/css">

body {cursor: url(http://sd-1.archive-host.com/membres/up/42016049459753927/Pyramid.ani); }
</style>

3.2 Curseur animé globe terrestre :
 

<style type="text/css">

body {cursor: url(http://sd-1.archive-host.com/membres/up/42016049459753927/The_Globe.ani); }
</style>

3.3 Curseur animé sourire :

<style type="text/css">

body {cursor: url(http://sd-1.archive-host.com/membres/up/42016049459753927/The_Smile.ani); }
</style>

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

1. Utiliser un "Lire la suite"

  Il arrive que l'on fasse des articles un peu longs, ou tout au moins, dont certains détais n'interresseront pas tous nos visiteurs.

Il est utile dans ce cas, à la suite d'un texte d'accroche, composé le plus souvent de 1 à 5 lignes, de faire un "Lire la suite", sur lequel le visiteur doit cliquer pour accéder à la suite de l'article.

2. Faire un "Lire la suite..."

Si vous êtes interessé, je vous propose donc, pour découvrir comment faire, de cliquer sur ce petit "Lire la suite", que l'on peut aussi appeler "en savoir Plus...", ou bien encore "Article complet"  

Vous êtes arrivés ici, c'est donc que vous avez bien cliqué sur mon "Lire la suite".

En réalité, ce n'est qu'un texte avec un lien vers un autre article.

Pour faire un "Lire la suite", il faudra donc créer 2 articles : un "version courte, intégrant le "lire la suite", et un en version longue.

Le premier "Lire la suite" renvoyant vers le second.

3. Code HTML d'un "Lire la suite"

Voici le code HTML utilisé pour mon "Lire la suite" :

<p> <span style="font-size: 8pt;"><em><span style="color: #0000ff;"><a href="http://faireunblog.over-blog.com/article-comment-integrer-lire-la-suite-pour-eviter-de-surcharger-un-article-70674615.html"><span style="font-size: 8pt;"><em><span style="color: #0000ff;">Lire la suite...</span></em></span>&nbsp;</a></span></em></span><span style="font-size: 8pt;"><em><span style="font-family: comic sans ms,sans-serif; color: #0000ff;">&nbsp;</span></em></span> </p>
<p>&nbsp; </p>

4. Personnalisation du code HTML pour "Lire la suite"

En vert, indiquer l'adresse URL de l'article "version longue"

En orange, votre texte pour faire comprendre au visiteur qu'il doit cliquer pour avoir l'article entier.

Le reste du code contient le style de l'écriture, police, couleur...

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

Je vous conseille d'aller sur Bloggif (rubrique "Protéger mes images") si vous voulez protéger vos photos des copies. Il est malheureusment facile de "récupérer" des photos publiées pour les utiliser à son compte.

Pourquoi mettre une protection anti-copie  sur vos photos

Si vous ne voulez pas retrouver vos photos sur des sites ou blogs inconnus (ou en tout cas, s vous voulez compliquer la vie des copieurs), et si vous n'êtes pas à l'aise avec les logiciels de retouche photo, ce site vous propose de le faire, avec le Copyright de votre choix, sans inscription préalable et en 3 clics !

Comment ajouter un Copyright sur vos photos

Vous allez sur le site mentionné.

Vous chargez votre photo

Vous tapez le texte de votre copyright (en général, le nom de votre blog)

Vous sélectionnez la police d'écriture utilisée

Vous choisissez l'endroit où va se positioner le copyright, parmi 5 possibilités.

Clic sur "Ajouter la protection", et voilà.

Si cela vous convient, clic sur "Télécharger mon image", puis "Enregistrer"

Autre exemple de photo protégée par une inscription

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

Mignon tout plein ce widget spécial Saint valentin !

Et oui, c'est la fête des amoureux et on recherche des petites choses sympas et inédites. Voilà donc cette année un nouveau widget (ou gadget inforpatique) pour combler votre belle. A utiliser sur une page web ou dans un mail...

Code HTML du gadget

<embed src="http://www.sharkbreak.com/embed.php?id=14" width="450" height="445" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed><br /><a href="http://www.sharkbreak.com/redirect-widgets.php" target="_blank">Click here to get more mini-SharkBreak widgets</a> - <a href="http://www.sharkbreak.com/redirect-sharkbreak.php" target="_blank">www.SharkBreak.com</a>

Autres articles relatifs à la fête des amoutreux, la Saint Valentin  

Saint Valentin : I love you, message animé avec son code HTML

Déco Saint Valentin : Faire tomber des petits coeurs

Spécial Saint valentin : Faire un montage photo avec un poeme

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images * Des jeux * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles