Overblog Suivre ce blog
Administration Créer mon blog
6 décembre 2016 2 06 /12 /décembre /2016 20:10

1. Avoir une page d'accueil sur son site ou son blog

Il est important d'avoir une belle page d'accueil : c'est la vitrine de votre site !

Elle doit donner envie à votre visiteur d'aller voir vos articles, de fouiner dans votre blog...

Voici donc comment faire une page d'accueil.

Vous avez plusieurs façons de faire :


2. Faire une "vraie" page d'accueil, sans aucun article

Le plus simple est de créer un "faux" article, et d'y mettre ce que vous voulez y voir dans le corps de votre blog, comme page d'accueil.

En général, on y met une explication du pourquoi du blog, ce qu'on va y trouver, éventuellement un index, et surtout, une information claire sur "comment entrer".

C'est ce que j'ai fait sur le blog du Lynx, allez voir ICI : Page accueil Lynx01


2.1 Créer un article contenant la page d'accueil

* Vous créer un article, comme vous procédez d'habitude, mais avec les informations et liens utiles puisqu'il sera votre page d'accueil.CE_affichage-articles.jpg

* Vous le datez :

   . du premier jour de votre blog, si vous avez choisi un affichage des articles "Du plus ancien au plus récent"

   . du dernier jour, si vous avez choisi l'affichage "Du plus récent au plus ancien,".
(Sur Overblog, avec Configurer/Mise en page/Accueil puis clic sur le marteau du module article)

Attention, dans ce cas, il vous faudra absolument revenir sur cet article "Page d'accueil" à chaque nouvelle parution, pour changer la date et faire en sorte qu'il ait toujours la date la + récente.



2.2 Mettre sa page d'accueil dans un module "Texte libre"

C'est vraisemblablement la solution la plus simple, car une fois faite, inutile de revenir dessus !

* Vous ajoutez donc un module "texte libre" dans la mise en page de l'accueil de votre blog.

* Vous mettez dedans le contenu de ce qui sera votre page d'accueil.

C'est ce que j'ai fait sur ce blog : c'est le  module "bienvenue". Il s 'affiche partout, et avant mes articles.



 


 

* 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


 

                                   Rendez-vous sur Hellocoton !                                                       

 

 

Repost 1
4 septembre 2016 7 04 /09 /septembre /2016 10:15

 

 


 

Vous pouvez vous créer votre poupée scintillante très facilement chez CrazyProfile !

Il suffit de 3 clics :

 

- Choisir la poupée que vous aimez parmi les vignettes présentées (28 choix différents)

 

- Tapez votre texte

 

- Choisir la couleur (Bleu, Rouge, Vert)

- Clic sur le bouton "Preview" pour voir le résultat

- Si cela vous convient, clic sur le bouton "Get Code"


Vous obtenez le code HTML de votre poupée scintillante avec votre message !

 


html, c'est quoi ?


 

  * 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


 

                                    Rendez-vous sur Hellocoton !                                                        

 


 

 

Repost 0
3 août 2016 3 03 /08 /août /2016 10:15

Un gadget pratique et utile !

meteo gratuite meteo gratuite

Code HTML météo du jour :

<a href="http://www.my-meteo.fr" title="Prévisions météo gratuites"><img src="http://www.my-meteo.fr/meteo+webmaster/carte+france+24h.php" alt="meteo gratuite" /></a>

Code HTML météo du lendemain:

 <a href="http://www.my-meteo.fr" title="Prévisions météo gratuites"><img src="http://www.my-meteo.fr/meteo+webmaster/carte+france+48h.php" alt="meteo gratuite" /></a>


 

On trouve ces carte météo sur le site de MyMeteo.fr,

 

Comment fonctionnent les cartes météo

 

Ces cartes sont mises à jour en fonction de l'horaire. Ainsi s'il est 21h passées, elles afficheront les températures et icônes de nuit.

Cette carte s'intègre de la même manière qu'une simple image ! Il n'y a aucune utilisation du Javascipt, du PHP ou tout autre langage web.


Pourquoi 2 cartes de prévisions météo


Vous pouvez afficher jusqu'à 2 cartes météo sur votre site web !

- L'une indiquant les prévisions météo du jour

-  l'autre celles du lendemain.


Comment insérer votre carté météo sur votre blog

 

Copiez simplement les codes HTML indiqués sous chaque carte !

 

Pas de Javascript, donc, même les blogs OB en mode confiance peuvent avoir ces cartes !

 

 

Articles a relire

 

html, c'est quoi ?

Venez inscrire votre blog sur ma Top Liste

Afficher les prévisions météo de n'importe quel endroit dans le monde

Mettre une station lmétéo personnalisée sur son blog

 


 

  * 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


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
30 juin 2016 4 30 /06 /juin /2016 19:48

 

 


 

 

Le gadget "boite à meuh"

 

On a tous besoin d'une boite à meuh !!!

 

ça détend, c'est frais, ça rappele la campagne, notre enfance.

 

Voilà, passe la souris sur cette boite à meuh et tu entendras le cri de la vache.... meuh.

 

 

Comment installer une boite à meuh sur ton site

 

Voici donc le code à coller pour l'obtenir sur ton site

 

<object width="150" height="230" title="mini-boitameu"><param name="movie" value="http://boitam.eu/boitam.eu.petit.swf" /><embed src="http://boitam.eu/boitam.eu.petit.swf" type="application/x-shockwave-flash" width="150" height="230"></embed></object>

 

Articles de "Faire un blog" à relire

 

Grilles de Sudoku pour vous !

Un jeu pour s'entraîner à la frappe avec son clavier

Se créer une poupée scintillante (Doll) comme signature, messagère

 

superstickies


 


 

  * 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


 

                                    Rendez-vous sur Hellocoton !                                                        

 

Repost 0
7 mars 2016 1 07 /03 /mars /2016 17:18



Vous avez peut-être remarqué que depuis peu,
j'ai ajouté un "nuage de tags" en colonne droite de mon blog.

 


 

1. C'est quoi, un nuage de tags ?

Un nuage de tags est une liste de mots clés de votre blog.

Ces mots sont disposés aléatoirement, et contiennent chacun un lien vers l'endroit où on trouve ce mot.



2. A quoi sert un nuage de tags ?

Le nuage de tags sert à atirer vos visiteurs vers des pages de votre blog qu'il n'aurait peut-être pas vu autrement.

Il peut en effet être attirer par un mot ou une phrase susceptible de l'interesser, alors que ce mot ne se trouvait pas dans votre sommaire (où on ne met généralement que les titres des articles)

Le nuage peut aussi servir de décoration, puisqu'il est en général coloré.


3. Les différents types de nuage de tags

Il en existe de 2 sortes : les statiques, comme celui qui est sur cet article, et les dynamiques.

Ces derniers sont encore plus attractifs car les mots qu'ils contiennent bougent, se déplacent ou bien changent de taille de texte.

Le seul inconvénient est qu'ils sont en général faits en animation flash, et donc incompatibles avec les blogs d'Over-blogs en mode confiance !


4. Comment faire un nuage de tags ?

Je vous conseille le site Tag-Cloud.


Il n'y a pas plus simple et tout se fait sur une page, et sans inscription préalable.

* Vous entrez votre blog et le système récupère tout un tas de tags possibles.

* Vous enlevez, modifiez, ajouter ceux que vous souhaitez.

* Vous paramètrez les couleurs, typo, taille du nuage....

* Vous choisissez "HTLM" pour la question "Tag Cloud Art" puis

* Vous sélectionnez "Generate preview".


* Il ne reste plus qu'à recopiez le code fourni et le coller dans un module de votre blog !



 


 

  * 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


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
2 février 2016 2 02 /02 /février /2016 18:28

Powered By: QUIZYOURFRIENDS.com


Répondez à ce petit Quizz pour vous détendre !
 


 

Si vous voulez publier votre propre Quizz sur votre blog, allez chez
Quiz Your Friend.

Il suffit d'entrer son nom et son adresse mail.

Ensuite, vous choisissez les questions, les réponses, et vous récupérez le code HTML.

Un seul Bémol, pas de personnalisation de l'apparence de votre Quizz !


Pour répondre au Quizz, vous entrez votre nom et c'est parti ! Un commentaire est attribué en fonction de votre score de bonnes réponses.



 


 

  * 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


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
6 janvier 2016 3 06 /01 /janvier /2016 18:37
 
 
 
Un aquarium dans votre écran ? C'est possible de réalisation sa décoration avec un aquarium avec ce petit code.
 
Utilisation de l'aquarium
 
Si vous cliquez un poisson, il se déplace très vite et réapparait ailleurs.
 
Code HTML de l'aquarium
 
Code à coller en mode HTML pour voir apparaitre l'aquarium sur ton écran.
 
<embed src='http://www.crazyprofile.com/fish.swf' quality='high' wmode=Transparent allowScriptAccess="never" width='300' height='300' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/></embed><br><div><a href='http://www.crazyprofile.com/fish_aquarium.asp' target='_blank'><font face='verdana' size=1>Created by Crazyprofile.com</font></a></div>
Articles a revoir

 

  * 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


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
3 janvier 2016 7 03 /01 /janvier /2016 15:17

Suite à la demande de certains de mes visiteurs, je vous donne ici le code HTML pour faire apparaître une pluie d'étoiles au bout de votre curseur (ou de votre souris).

 

Particularités du code HTML de la pluie d'étoiles

 

La particularité de ce code est qu'il se suffit à lui-même :

 

- Il ne nécessite pas de charger des photos d'étoiles, comme on peut en trouver sur certains forums. Le code fourni alors ne fonctionne pas si vous n'avez pas les photos (format gif) qui correspondent au code, et enregistrés dans le même répertoire.

 

- Pas besoin non plus d'aller bidouiller dans votre CSS !

 

- Il n'est en aucun cas prévu seulement pour les blogs sur Over-blog. C'est un code HTML, dont, à utiliser où bon vous semble

 

Code HTML de la pluie d'étoiles qui suit le curseur

 

 

 

<script type="text/javascript">
_uacct = "UA-994360-1";
urchinTracker();
</script><script type="text/javascript">
var colour="#7C5B1A";
var sparkles=50;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

 

 

Ou mettre ce code HTML de pluie d'étoiles

 

Il est à recopier, en mode avancé, HTML, pour votre blog:

 

- dans un article si vous ne le voulez actif que sur un article

 

- en pied de page de votre blog (accueil ET mise en page articles) pour qu'il soit valide partout

 

Limitation du code HTML pour la pluie d'étoiles

 

Ce code étant en Javascript, il ne sera pas accepté par les blogs Over-blog en mode confiance !

 

 

A lire aussi :

Faire tomber des objets en fond d'article sur votre blog

Changer le curseur de la souris sur un article

 


 

  * 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


 

                                    Rendez-vous sur Hellocoton !                                                        

 

Repost 0
2 novembre 2015 1 02 /11 /novembre /2015 09:41


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


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0
23 septembre 2015 3 23 /09 /septembre /2015 16:09

 

Click for Paris, France Forecast

 

 

On trouve des gadgets météo sur le site de Woundeground.

 


 

Comment préparer l'affichage météo de sa ville

 

 Taper dans la zone de recherche en haut la ville souhaitée.

 

Aller ensuite tout en bas, à gauche, sur le "Free Weather Stickers® for Your Homepage" et un clic sur le bouton "Get Your Weather Sticker!".

 

Vous avez ainsi accès aux 18 modèles de gadgets météo :

 

- Certains sont dynamiques : le fond s'adapte à la météo, l'heure s'affiche..., un clic permet d'obtenir les prévisions des jours suivants,..>.

 

d'autres restent statiques, mais affichent en + les phases de la lune...

 

Un clic sur le sticker vous permet d'accéder à son code HTML.

 

Il ne reste plus qu'à le recopier là où vous voulez mettre votre météo sur votre blog !

 

 

La météo partout dans le monde

 

Le + de ce site est qu'il propose la météo partout dans le monde.

 

Un exemple ici, à rabat, au Maroc :                   Click for Rabat-Sale, Maroc Forecast


 

A relire : html, c'est quoi ?
  Mettre une station météo rigolote
  Faire de jolis boutons (images avec liens) pour son blog


 


 

  * 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


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

Repost 0

Présentation

  • : Faire un blog
  • Faire un blog
  • : Ce blog vous aide à vous lancer pour faire votre blog : plateforme, mise en page, décoration, gadgets...
  • Contact

Vous Cherchez Quoi ?

Bienvenue !

 

PancarteSmiliz.pngCe blog a pour objet de vous aider à faire votre blog. C'est facile, et possible sans être informaticien !

J'ai 2 autres blogs très différents, et je souhaite mettre mon expérience à votre service. N'hésitez pas à me déposer vos commentaires et questioxxns. 
Si vous débutez, commencez par l' Index des articles , rubrique "Pour bien démarrer". 

 

Inscrivez votre site sur ma Top Liste et améliorez votre référencement.  

Mon logo sur votre site

Si j'ai contribué à l'amélioration de votre blog, merci d'y mettre mon logo :
Site Faire Un Blog

Code à coller :

<a href="http://faireunblog.over-blog.com/" target="_blank"><img height="65" width="85" src="http://sd-1.archive-host.com/membres/up/42016049459753927/PancarteSmiliz.png" alt="Site Faire Un Blog" /></a>

 

 

Date du jour

 

 

 

Géolocalisation

formation