24 novembre 2010
Changer la taille des colonnes
Avant de commencer à bidouiller, faites donc une copie de la feuille de style...
Vous voulez changer la taille de vos colonnes, agrandir la partie centrale...ça peut se faire...
Apparence/Editer les fichiers de ce modèle/Feuilles de style générale
On doit intervenir sur 4 blocs...
#container = page de fond
#content = page centrale
#rightbar= colonne de droite
#leftbar= colonne de gauche
Lorsqu'on additionne "content" "rightbar" et "leftbar" la somme doit être égale à "container"
Donc 500+200+200=900
#container est égal à 901 dans le modèle par défaut, ça doit être pour la bordure...
Donc si vous voulez réduire vos 2 colonnes pour agrandir la partie centrale, vous pouvez faire par exemple :
150+150 pour les colonnes et 600 pour le centre, le tout étant bien égale à 900.
Si vous voulez agrandir la page de fond, pour utiliser l'espace au maximum, il faut agrandir "container" par exemple à 1000, mais attention, il faudra refaire une bannière à 1000x150 (si l'ancienne était à 900x150), car sinon votre bannière sera décalée...il en manque un bout quoi !
Ensuite même calcul, pour avoir un total de 1000 vous devrez repartir 200+200+600 par exemple...
23 novembre 2010
Changer de curseur
Compatible seulement avec Internet Explorer : 6 et +
Commencez par télécharger quelques modèles de curseurs ici !
Ouvrez ensuite le dossier dans lequel se trouve le fichier zip que vous venez de télécharger
Faites un clic droit sur le zip clatotal et décompressé le fichier en faisant Extraire ici
Si vous n'avez pas Izarc téléchargez le ici.
Un dossier Curseurs animés apparait.
Il faut maintenant récupérer l'adresse de votre curseur...
Ouvrez un nouveau message et faites Insertion d'un fichier importez le curseur de votre choix et copiez l'adresse (en bleu):
Ouvrez maintenant votre page d'accueil et collez le script suivant avant la balise </head> en prenant soit de collez l'adresse de votre curseur comme ci-dessous :
<style>
<!--
BODY{ cursor:url("http://Adresse de votre curseur"); }
-->
</style>
Si vous ne voulez pas que votre curseur se change en une main au passage sur un lien, prenez ce code et collez la même adresse dans les 2 lignes :
<style>
<!--
BODY{ cursor:url("Adresse de votre curseur"); }
a{ cursor:url("Adresse de votre curseur"); }
-->
</style>
Modifier le "Posté par" et "l'heure" de vos publications
Voici comment modifier le "posté par" ou "l'heure" à laquelle vous postez vos articles.
Ouvrez la page d'accueil et repérez le bloc de codes suivant :
<div class="itemfooter">Posté par <$BlogItemAuthorNickname$>à <$BlogItemDateTime$><BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div>
Ensuite, pour remplacer le Nom de l'auteur, supprimez la balise <$BlogItemAuthorNickname$> et mettez à la place le nom ou la phrase de votre choix.
Pour supprimer la Date, supprimez ceci : à <$BlogItemDateTime$>
Répétez cette opération sur la page d'un message et la page des archives.
22 novembre 2010
Changer l'image de votre profil
Une fois que vous êtes en mode avancé vous ne pouvez plus passer par "Style" pour changer l'image associer à votre profil...
C'est pas grave...il y a bien sur un autre chemin...
Lorsque vous vous connectez sur Canalblog regardez dans la barre tout en haut puis cliquez sur profil.
Pour modifier le bloc du profil dans les pages Html, repérez le bloc suivant qui correspond à votre profil :
<CBOwner>
<BlogOwnerPictureURL>
<div
class="image"><a
href="<$BlogOwnerProfileURL$>"><center><img
src="<$BlogOwnerPictureURL$>"
border="0"/></center></a></div>
</BlogOwnerPictureURL>
</CBOwner>
Remplacez <$BlogOwnerPictureURL$> par l'adresse de votre nouvelle image comme ceci :
<CBOwner>
<BlogOwnerPictureURL>
<div class="image"><a href="<$BlogOwnerProfileURL$>"><center><img src="http://Adresse de votre image.jpg" border="0"/></center></a></div>
</BlogOwnerPictureURL>
</CBOwner>
J'ai ajouté de chaque côtés de l'adresse de mon image les balises <center></center> pour centrer l'image dans la colonne...
Traduire une page web en Français
Je
ne sais pas vous, mais régulièrement j'arrive sur des sites en Anglais où
c'est pas toujours facile de comprendre toutes les subtilités de la
langue surtout lorsqu'il s'agit du jargon informatique...
Voilà une petite astuce qui devrait faire des heureux...
Nous allons ajouter à la barre de navigation de notre navigateur un lien (dans cet exemple il s'appelle Français) qui traduit donc en Français la page en cours en cliquant simplement dessus.
Allez à cette adresse : http://translate.google.com/
Puis dans les Outils.
Puis dans la fenêtre qui s'ouvre cliquez sur Français en gardant le clic gauche de la souris enfoncé et faites glisser le lien "Français" dans votre barre des favoris puis relâchez.
Voilà...c'est tout.
Mise en forme automatique pour votre texte
Hein...quoi ?
Quand vous rédigez un article et que vous mettez votre texte en forme, c'est à dire en gras ou en Italic, il est possible de faire en sorte qu'à chaque fois que vous mettez un mot en gras ou en Italic il apparaisse comme vous le désirez...
Oui...mais encore ?
A chaque fois que vous écrirez un mot en gras ou en Italic, il se verra attribué la police, la couleur, la taille etc...que vous aurez choisi de mettre dans les blocs.
Copiez-collez les blocs suivants dans votre feuille de style, le premier correspond au texte en gras, le deuxième au texte en italic.
strong {
font-family: 'Trebuchet MS', Verdana, sans-serif;
color: #FFFFFF;
font-size: 16px;
}
em {
font-family: 'Trebuchet MS', Verdana, sans-serif;
color: #404040;
font-size: 16px;
}
Modifiez les codes couleurs, la police etc...
Image qui suit et regarde le curseur
Ouvrez votre page d'accueil, descendez tout en bas, et juste après la balise </body> collez le script suivant :
Copiez-collez l'adresse de vos images comme indiqué en bleu dans le script :
<script type="text/javascript">
var x = 0;
var y = 0;
if (document.getElementById)
{
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = Pos_Souris;
window.onload = Bouge_Image;
}
function Pos_Souris(e)
{
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
}
posX = 0;
posY = 0;
anim = true;
oldpos = "http://storage.canalblog.com/05/09/236987/22738567.gif";
function Bouge_Image()
{
if (document.getElementById && anim)
{
posX = posX+(((x-posX)+20)/15);
posY = posY+(((y-posY)+20)/15);
if(posX<x)
newpos='http://storage.canalblog.com/76/49/236987/22738281.gif';
else
newpos='http://storage.canalblog.com/05/09/236987/22738567.gif';
if(newpos!=oldpos)
{
document.tete.src=newpos;
oldpos=newpos;
}
document.getElementById("teteronde").style.top = posY+"px";
document.getElementById("teteronde").style.left = posX+"px";
tempo = setTimeout("Bouge_Image()", 15)
}
}
if(document.getElementById)
{
document.write('<div id="teteronde" style="position: absolute">');
document.write('<a href="#" onClick="anim=false;document.getElementById(\'teteronde\').style.visibility = \'hidden\';return(false)">');
document.write('<img src="http://storage.canalblog.com/76/49/236987/22738281.gif" style="border:0px" name="tete" alt="Cliquez ici pour faire disparaître" />');
document.write('</a>');
document.write('</div>');
}
</script>
Mettre un message d'accueil sur votre blog
Pour mettre un message d'accueil sur votre blog qui reste en première page, voici comment faire :
Ouvrez votre page d'accueil et repérez la ligne suivante :
</div></div><div id="content"><div class="blogbody">
Faites un retour à la ligne pour laisser un espace (histoire d'y voir plus clair) et écrivez votre message d'accueil...comme ceci :
Vous devez ajouter des balises pour mettre votre texte en forme...
Pour la couleur du texte : <font color="FFFFFF"> </font>
Pour la taille du texte : <font size="3"> </font>
Pour la police : <font family="georgia"> </font>
Etc...
Le <p> permet le retour à la ligne.
Important...chaque balise ouverte, doit être refermé avec un </font> !
Si vous avez 3 balises ouvertes, c'est à dire une pour la police, une pour la taille et une pour la couleur, vous devez avoir 3 balises de fermeture dans votre texte : </font> </font> </font>
Prévisualisez pour vous assurer que votre texte apparait comme vous voulez et validez ensuite.
Voilà ce que ça donne :
Mettre un répondeur vocal sur votre blog
Merci à Sylpo pour cette trouvaille...
Pour laisser un message vocal, cliquez sur le rond rouge, puis sur Autoriser et suivez le guide...
Vous avez 1 minute pour vous exprimer...
Cliquez sur Enregistrer un nouveau cadre va s'ouvrir.
Attendez le décompte des 3 secondes pour commencer à parler.
"Salut Demolite, sympa ton répondeur...allez bye !"
Vous pouvez mettre un titre, écouter votre message en cliquant sur Lire, Envoyer ou l'Annuler.
Une fois que vous avez cliquez sur Envoyer, vous devez choisir une signature, soit vous êtes inscrit sur Wagwire et vous entrez vos identifiant, soit vous choisissez l'autre option et vous devez entrer votre adresse email.
Faites Suivant et votre messages est envoyé.
Maintenant nous allons voir comment installer cette petite merveille sur votre blog !
Allez sur le site http://www.wagwire.com/ et commencez par vous inscrire en cliquant sur Créer un Compte.
Si je peux vous donner un conseil personnel, au moment d'entrer votre nom et prénom dans le formulaire mettez plutôt un pseudo.
Une fois fait, cliquez sur plugins, sélectionnez Wag Mini, Html, entrez un nom (votre pseudo par exemple), puis Créer le plugin.
Ensuite, choisissez une couleur pour votre répondeur...
Copiez ensuite le script et collez le dans une de vos colonnes.
Voilà c'est tout...
Pour consulter vos messages, allez sur l'onglet Messages.
Cliquez sur la ligne pour affichez les options.
Pour consulter les messages que vous avez envoyés sur d'autres blogs, cliquez sur Messages envoyés.
Compte à rebours
Voici un petit script qui permet de mettre un compte à rebours sur votre blog...
Je sais pas moi...pour annoncer un mariage, un anniversaire, un départ en vacances ou encore la fermeture d'un blog ?
Voilà comment ça se présente...
Collez cette partie de code avant la balise </head>.
Pour mettre une date future, vous devez changer la date en gris dans le script, mais attention...l'année est en premier, ça je pense que vous l'auriez compris sans moi, ensuite c'est le mois, c'est là que ça se complique, ici c'est du mois de juin dont il s'agit et pas du mois de mai comme on pourrait le penser, ensuite c'est le jour.
Donc pour janvier c'est 0, pour février 1, mars 2 etc...
Ne touchez pas au reste !
<SCRIPT LANGUAGE="JavaScript">
Maintenant = new Date;
TempMaintenant = Maintenant.getTime();
Future = new Date(2008, 5, 04);
TempFuture = Future.getTime();
DiffSec = Math.floor((TempFuture-TempMaintenant)/1000);
DiffMin = Math.floor(DiffSec/60);
Diffheure = Math.floor(DiffMin/60);
DiffJour = Math.floor(Diffheure/24);
while (DiffMin>=60)
{
DiffMin = DiffMin-60;
}
while (Diffheure>=24)
{
Diffheure = Diffheure-24;
}
while (DiffSec>=60)
{
DiffSec = DiffSec-60;
}
</SCRIPT>
Collez l'autre partie dans votre page d'accueil, là ou vous voulez qu'apparaisse le compte à rebours...
<SCRIPT LANGUAGE="JavaScript">
document.write('<font color="#000000">C'est Noël dans ' + DiffJour + ' jour(s)</font>');
</SCRIPT>
Vous pouvez modifier le code couleur #000000 et la phrase en gris, ne touchez pas au reste !
« Accueil 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
