Les tuto 2 Demolite

20 novembre 2010

Mettre une horloge sur votre blog

Il y a un tas de site qui proposent des horloges...

Mais...soit : elles sont moches...soit : elles sont pleines de pub :/

Voici le site que je préfère : http://www.clocklink.com/

Choisissez dans la Gallery (colonne de gauche) votre horloge.

Faites quelques réglages, couleur, taille, réseau...

Copiez-collez le script en dessus et collez-le dans votre page d'accueil.

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Mettre un compteur de visite sur votre blog

Sur OvNet.net c'est simple...pas besoin de s'inscrire !

Cliquez sur Créer votre compte gratuitement...

Choisissez ensuite le type de compteur que vous voulez mettre sur votre blog.

Choisissez vote compteur :

Si votre blog n'est pas né de la dernière pluie...allez dans vos stats et mettez le nombre de visiteur dans la case :

Valeur du départ de votre compteur.



Copiez-collez le script ci-dessus dans une de vos colonnes...

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Mettre un Pop-Up sur votre blog

Voici comment créer un petit Pop-up...

Libre à vous de le bidouiller et de le personnaliser, vous pouvez mettre des liens vers votre blogs préférés comme renvoyer vos visiteurs vers une autre page de votre blog...

Collez le code suivant dans votre page d'accueil, tout en bas juste après la balise </body>

<div id="notebook">Pour sortir c'est par là
<a href="http://lestuto2demolite.canalblog.com/">Retour aux tuto 2 Demolite...</a>
<p>
<Font color="#C4C4C4"><font size="2"><em>Si un lien ne correspond pas au bon tuto ou si vous trouvez une erreur, je compte sur vous pour me le signaler...merci d'avance.</em></font></font>
<a id="close" onclick="document.getElementById('notebook').style.display ='none';" href="#">
<font color="#ffffff">Fermer</font></a>
</div>

Ensuite collez les blocs suivant dans le bas de votre feuille de style.

#notebook {
position: absolute;
top: 300px;
left: 900px;
width: 200px;
height: 230px;
background: transparent url() no-repeat center;
font-family: georgia;
font-size: 16px;
font-weight: none;
color: #C4C4C4;
font-style: none;
text-align: right;
line-height:15px;
margin: 0;
padding: 0;
}
#notebook p {
padding:0 10px 0 10px;
padding:10px 10px 0 10px;
}
#notebook a {
font-family: georgia;
font-size: 14px;
font-weight: none;
color: #00FFFF;
font-style: strong;
text-align: right;
line-height:20px;
}
#close {
position: relative;
bottom: 1px;
right: 1px;
text-decoration: none;
font-size:8px;
font-family: georgia;
font-style: normal;
padding: 0px 0px 0px 0px;
}
Validez

Voilà...vous venez de créer votre premier pop-up !

Maintenant, il ne vous reste plus qu'à modifier le code en la page d'accueil.

Modifiez la police, les couleurs, l'image de fond, l'emplacement du pop etc...dans la feuille de style.

Retournez dans la page d'accueil pour modifier le code :

<div id="notebook">Pour sortir c'est par là
<a href="http://lestuto2demolite.canalblog.com/">Retour aux tuto 2 Demolite...</a>
<p>
<Font color="#C4C4C4"><font size="2"><em>Si un lien ne correspond pas au bon tuto ou si vous trouvez une erreur, je compte sur vous pour me le signaler...merci d'avance.</em></font></font>
<a id="close" onclick="document.getElementById('notebook').style.display ='none';" href="#">
<font color="#ffffff">Fermer</font></a>
</div>

Amusez-vous bien...

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Chat avec Plugoo

Tout d'abord vous devez avoir un logiciel de messagerie sur votre pc, comme Msn Messenger par exemple...

Allez sur ce site choisissez votre messagerie :

Ensuite remplissez les champs avec votre adresse de messagerie Msn

Suivez les instructions...

Une fois que vous obtenez le script, il ne vous reste plus qu'à le coller dans une de vos colonnes dans la page d'accueil et d'accepter l'invitation de Plugoo dans votre messagerie.

Une fois fait, un nouveau contact My Pluggo apparait et lorsque qu'un visiteur vous écrit un message depuis votre bog, vous dialoguez via Msn...

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Mettre un sondage sur votre blog avec i-Servicves

Voici comment mettre un petit sondage sur votre blog, dans une colonne ou dans un message c'est à vous de choisir...

Première méthode :

En passant par i-services.net

Commencez par vous inscrire...

Il existe toute sorte de services : Livre d'or, Newsletter, Sondage etc...

Ensuite activer le service sondage, allez dans Gérer les sondages / Ajouter un nouveau sondage

Remplissez les cases et validez.

Ensuite dans le haut de la page cliquez sur Installer.

Il ne vous reste plus qu'à coller le script dans un Nouveau message (en mode html) ou dans une colonne de votre page d'accueil...

Deuxième méthode :

En passant par Blog-it Express...

La marche à suivre pour vous inscrire et installer le service c'est ici.

Ensuite, cliquez sur Rédigez un nouveau message

Descendez jusqu'à l'onglet Ajoutez un sondage et remplissez les cases...

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Différencier les commentaires de l'auteur

Pour différencier vos commentaires de ceux de vos visiteurs sur votre blog, faites comme ceci :

Commencez par ajouter ce bloc dans votre feuille de style :

.fdcDemolite p {
Background: url(http://Adresse de l'image de fond.jpg);
color: #000;
border-style: dotted;
border-width: 1px 1px 1px 1px;
border-color: #00FFFF;
padding-left: 10px;
padding-top: 6px;
padding-bottom: 25px;
}

Alors...quelques explications :

Vous devez remplacer nom pseudo Demolite par le votre dans le bloc.
Si votre pseudo est Sylpo votre bloc doit être comme ceci :

.fdcSylpo p {
Background: url(http://Adresse de l'image de fond.jpg);
color: #000;
border-style: dotted;
border-width: 1px 1px 1px 1px;
border-color: #00FFFF;
padding-left: 10px;
padding-top: 6px;
padding-bottom: 25px;
}

Ce bloc gère le cadre et tout ce qui se trouve à l'intérieur...

Vous pouvez tout changer...
Mettre une image en fond dans le cadre, la couleur du cadre, l'épaisseur etc...à vous de faire les réglages qui vous conviennent.
Si vous préférez mettre une couleur en fond plutôt qu'une image, remplacez cette ligne :
Background: url(http://Adresse de l'image de fond.jpg);
par celle la :
Background: #000000; dans le bloc.

Ouvrez la Page d'un message, puis repérez la balise suivante  <CBComments>

Collez juste en dessous cette balise :

<div class="fdc<$BlogCommentAuthorNickName$>">

Puis celle ci : </div> au dessus de la balise : </CBComments>

Ce qui donnera ceci :

Voilà, pas la peine de visualiser, les changements se feront après avoir validé.

Si vous utilisez la barre Web Developer, ce que je vous recommande fortement, ouvrez votre page des messages sur votre blog en allant sur un commentaire que vous avez laissé, vous pouvez voir les changements et aussi grâce à Web Developer faire les changements dans votre feuille de style en direct.

Sinon, allez dans votre feuille de style pour changer l'adresse avec le fond à bulles rouges et les couleurs...

Encore merci à Alérion pour cette trouvaille.

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Installer un module de commentaires avec i-Services

i-Services comme son nom l'indique offre des services...18 au total, qui peuvent s'avérer pratique ou complètement inutile...enfin, c'est une question de point de vue.

Commencez par vous inscrire...
Cliquez ensuite sur l'icône du module des commentaires :

Puis activer le service en cliquant sur le bouton vert sur le droite de l'écran.

Cliquez ensuite sur Gérer les catégories puis Entrez un nom pour votre module :

Cliquez sur Installer puis sélectionnez votre catégorie sur la deuxième ligne et validez :

Choisissez Dans une iframe si vous voulez un cadre fixe dans votre page ou sur Dans une fenêtre pop-up si vous préférez que votre module des commentaires s'ouvre dans une petite fenêtre puis validez.

Le script apparait, il ne vous reste plus qu'à le coller dans un message en mode html ou ailleurs.

Vous pouvez seulement modifier la taille du pavé en changeant les valeurs de width et de height, les couleurs ne sont pas modifiables.

Voici un exemple avec mon ancienne Boite à tuto...

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Associer un avatar à son adresse mail avec Gravatar

Allez sur le site Gravatar...

Cliquez sur Sign Up pour vous inscrire.

Puis entrez votre adresse email et cliquez sur Signup

Vous allez recevoir un email, vous devrez confirmer l'inscription puis retourner sur Gravatar pour choisir un mot de passe.
Une fois inscrit, vous êtes sur cette page...

Cliquez sur SignUp Now !

Puis sur Add a new one (A ce stade, vous avez un carré bleu à la place de votre futur avartar)

Cliquez sur My computre's hard drive si votre avatar se trouve sur votre pc...si votre image est sur le web cliquez sur la ligne en dessous.

Importez votre image...puis Next.

Vous devez déplacer le carré blanc en pointillé pour centrer au mieux votre avatar, puis cliquez sur Crop and Finish !

Puis choisissez le "G"

Une fois votre avatar importé, il va apparaitre en bas à gauche...

Cliquez dessus pour le valider !

Voilà c'est fini...

Votre avatar est désormais associé à votre adresse mail, lorsque vous laisserez un commentaire sur un site avec Gravatar, votre avatar s'affichera sans que vous n'ayez rien à faire...

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Changer la couleur des premiers mots dans la liste des commentaires

Avec ce tuto, nous allons voir comment changer la couleur du texte des premiers mots de vos visiteurs, dans la liste des 10 derniers commentaires.

Voila ce que ça donne, une partie du texte qui était blanc est devenu bleu :

En plaçant une balise de couleur dans le bloc des commentaires on peut changer la couleur du texte pour différencier le texte de vos visiteurs du tire de vos articles.

Sur votre page d'accueil, repérez le bloc des commentaires puis mettez un code couleur comme ceci :

<div class="title">Derniers commentaires</div>
<ul>
  <CBLastComments>
  <li><a href="<$BlogCommentURL$>">
<font color="#FFFFFF"><$BlogCommentTitle$></font></a> sur <a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
  </CBLastComments>
</ul>

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici

Changer la police du titre d'un commentaire

Lorsqu'un visiteur vous laisse un commentaire et qu'il met un tire, le texte est mis en forme avec la balise <H3></H3> tout comme le titre de vos messages...

Donc si vous voulez changer l'apparence de l'un, cela affecte l'autre...
Pour éviter ça, il faut créer une nouvelle balise qui n'est pas encore utilisée dans la feuille de style, comme <H4></H4>.

Ouvrez votre feuille de style et descendez sur le bloc .blogbody h3 qui gère nos 2 titres.

Faites un copier du bloc en entier (comme sur la capture) et collez ce bloc juste en dessous et changez le h3 en h4.

Vous pouvez maintenant modifier le code couleur, la police, la taille etc...
Puis validez.

Il faut maintenant changer la balise <h3></h3> dans la page d'un message qui gère le titre des commentaires.

Ouvrez la page d'un message et faites Ctrl+F pour rechercher dans la page ce code :

<h3><$BlogCommentTitle$></h3>

Il ne vous reste plus qu'à changer le h3 en h4, comme sur la capture.
Validez.

Pour ajouter une image devant ce titre, vous devez ajouter  les 2 lignes en bleu dans le bloc .blogbody h4 {

.blogbody h4 {
background: url("http://Adresse de votre image.gif") no-repeat;
color: #00FFFF;
margin: 0px 0px 0px;
border-bottom:none;
letter-spacing: -1px;
font:17pt "Century gothic";
padding: 0px 0px 0px 25px;
}

Puis collez l'adresse de votre image comme indiqué, dans la ligne padding vous pouvez placer votre image en hauteur, largeur etc...

Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici