Attention !
Ce blog a déménagé et n'est plus mis à jour. Rendez vous sur le nouveau blog :
http://www.blogtuto.org/
mardi 28 octobre
Faire traverser le blog par des images animées
C'est Halloween et envie de faire traverser votre blog par des chauves souris?
Alors le script est sensiblement le même que celui pour faire tomber de la neige mais avec un passage de gauche à droite. Fabrice de Over-blog m'a gentiment aidé pour vous proposer cette animation adaptée. Qu'il en soit remercié :-)
Je n'ai pas percé tous les secrets de ce script, je vous laisse faire si le cœur vous en dit. Je mets juste en rouge l'endroit où vous devez mettre vos images.
Donc le script est le suivant :
<script>//Snow - http://www.btinternet.com/~kurt.grigg/javascript
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
var num = 2; //Nombre de flocons
var timer = 100; //Vitesse de descente
var enableinNS6 = 1 //La vitesse varie selon les navigateurs. (1=yes, 0=no).
//Adresse des gifs ci-dessous
var url_gif = new Array();
url_gif[0]= "votreimage.gif"; // chauve-souris
url_gif[1]= "votreimage.gif";
nb_floc = 2; // Nombre de d'images diffÈrentes
//End.
var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
if (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
num = 12;
for (i = 0; i < num; i++){
sfs[i] = 15; // Math.round(1 + Math.random() * 1);
document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:"><img src="'+url_gif[i%(nb_floc-1)]+'"><\/div>');
currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}
if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
// sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth*0.95;
// sx = d.defaultView.scrollMaxX;
rh = oh; //-sy;
rw = ow; //-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth*0.95;
}
h = rh - 2;
w = rw - 2;
}
else{
h = r.clientHeight - 2;
w = r.clientWidth*0.80;
}
}
function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function snow(){
var dy,dx;
for (i = 0; i < num; i++){
dx = fall[i];
dy = fall[i] * Math.cos(currStep[i]);
y[i]+=dy;
x[i]+=dx;
if (x[i] >= w || y[i] >= h){
y[i] = -10;
x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}
theFlakes[i].top = y[i] + scrl(0) + pix;
theFlakes[i].left = x[i] + scrl(1) + pix;
currStep[i]+=step[i];
}
setTimeout(snow,timer);
}
function init(){
winsize();
for (i = 0; i < num; i++){
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
}
snow();
}
if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}
})();
}//End.
</script>
Le script est à coller dans le body. J'ai choisi pour ma part tout en base de la page, ça évite de polluer le script dans lequel vous allez plus souvent.
Allez booooh!
Tags : animations, mode avancé
mardi 29 juillet
Un passage en mode avancé
Silo, star dans sa blogo, avait envie de faire un peu de rangement sur son blog. Elle voulait un menu déroulant sous la bannière, déplacer ses albums, mais surtout rester dans ses marques, ses teintes et la sobriété de son blog. Donc pas de relooking à proprement parlé, mais une réorganisation pour un blog plus fonctionnel.
AVANT
APRES
Cliquez sur l'image pour aller voir de près ce menu déroulant sous la bannière et ce joli blog!
Merci à elle de m'avoir accordé sa confiance.
Tags : mode avancé, Relooking
jeudi 24 juillet
Créer une troisième colonne
Rajouter une colonne de plus à son script en mode avancé!
Parce que vous êtes too much...
Parce que 2 c'est pas assez que 3 c'est mieux...
Voici en image ce que ça donne chez Damouredo...
L'installation se passe en deux temps
1- dans la feuille de style
Si c'est une colonne à droite appelez la rightbar si elle va aller à gauche ce sera une leftbar.
Pour la distinguer donnez lui le chiffre 1.
Ce qui donnera lefbar1 ou rightbar1
Ensuite vous mettez les caractéristiques d'une colonne de cette façon :
#leftbar1 {
float: left;
width: 200px; <---- largeur de la colonne
height: 5000px; <---- longueur de la colonne
background-color: #FFFFFF;
border-top-style: none; <---- si vous voulez une bordure
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px; <---- l'épaisseur de la bordure
border-color: #669900; <--- couleur du fond de la colonne
overflow: hidden;
}
Copier votre code à la suite de vos colonnes ou si vous avez peur de vous tromper tout en bas
! attention aux }
Ceci étant fait, validez.
2 - dans le script sur toutes les pages (accueil, page des archives, index des archives, message, auteur)
ajoutez le script suivant par exemple ma colonne va être à droite de ma colonne de gauche :
<div id="leftbar1"> <div class="navlinks">
</div></div>
cliquez sur l'image pour voir l'exemple
<div id="leftbar1"> <div class="navlinks">
mettez ici les blocs que vous souhaitez insérer dans cette nouvelle colonne
</div></div>
Ce tuto vous est offert par cocktail. Merci à elle!
Tags : colonne, mode avancé
dimanche 06 juillet
Favicon : insérer un logo dans l'adresse URL de votre blog
Peut-être avez-vous remarqué que certains sites ou blogs, comme ici sur BlogTuto, ont sur leur adresse dans la barre de navigation un petit logo à la place de celui de leur hébergeur, inutile certes, mais ô combien mimi!!!.
Grâce à Mattchry ce tuto fonctionne enfin sous IE et sous firefox! Youpi!
1. Il vous faudra avoir une version miniature de votre logo de 16 x 16 pixels ou 32 x 32 pixels maximum. Pour la faire sous Windows, vous pouvez utiliser le logiciel Paint qui se trouve dans Démarrer - Tous les programmes - Accessoires pour diminuer la taille de votre image, en prenant soin de la sauvegarder sous un autre document pour ne pas perdre votre fichier original. Sinon, vous pouvez, utiliser des outils offerts en ligne et spécialement conçus pour créer ce genre d'icône. Photofiltre est une bonne alternative...
2. Rendez-vous sur le site HTML Kit, à la page FavIcon from PICS. Suivez la procédure pour générer votre icône. C'est-à-dire, parcourez votre disque dur pour sélectionner votre image, puis cliquez sur Generate FavIcon.ico. L'outil en ligne se chargera d'en créer une version "icône". Vous aurez le choix entre une icône fixe (normale) et une icône animée à télécharger sur votre ordinateur.
3. Une fois votre icône sauvegardée dans votre ordinateur, (pour canalblog) chargez-la sur votre blog dans un message en choisissant de charger un fichier en cliquant sur cette image 
. Une fois chargée cliquez sur 
et prenez l'adresse qui va se présenter comme ceci :
http://storage.canalblog.com/56/97/249516/24175599.ico
C'est cette adresse (en rose) dont vous allez avoir besoin ensuite. (inutile d'enregistrer le billet où vous avez chargé l'icône)
4. À partir d'ici, il vous faut absolument être en mode avancé pour continuer... Vous êtes toujours là? Donc, cliquez sur Apparence, puis Éditer les fichiers de ce modèle. Ensuite, pour chacune des pages accessibles dans le menu déroulant (Page d'accueil, Archives, Index des archives, Page d'un message et Profil d'un auteur), SAUF la page Feuille de style générale, avant la balise </head> :
Insérez la ligne suivante:
<link rel="shortcut icon"http://votre adresse.ico" type="image/x-icon"/>
<link rel="icon" href="http://votre adresse.ico" type="image/x-icon"/>
7. Maintenant Valider pour chacune des insertions dans vos pages et chargez la page de votre site pour voir si l'icône apparaît dans la barre d'adresse.
Ce tuto vous est offert par Nel. Merci à elle!
Si vous souhaitez participer et contribuer à Blogtuto en parrainant un tuto, faites un don dès maintenant!
N'oubliez pas en commentaire de laisser l'adresse de votre blog pour que je puisse vous mettre en parrain ou marraine sur le tuto à venir. Merci d'avance!
Tags : favicon, mode avancé
dimanche 08 juin
Supprimer les bordures
"Bonjour
J'aimerai savoir comment supprimer les traits qu'il y a sur mon blog je ne sais pas comment cela ce fait !!"
Réponse
Dans la feuille de style, 2 possibilités : Sur chaque blocs concernés
- soit vous mettez "none" à la place de solid (ou dotted) sur la ligne border concernée
- soit vous mettez "0 px" au lieu de 1 (ou 2) sur la "border-width"
Exemple :
#content {
float: left;
width: 700px;
background-color: #FFFFFF;
border-top-style: solid; <----------- soit je mets "none" à la place de solid
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px; <-------------- soit je mets 0 px au lieu de 1
border-color: #;
overflow: hidden;
Bonne journée !
Tags : brdures, colonne, FAQ, images, mode avancé
La question du jour : agrandir l'espace texte!
"Bonjour
J'aimerai savoir comment il fallait que je face pour agrandir la zone de texte du milieu ( ou colonne du milieu )"
La réponse de votre tutrice préférée ;-)
Dans la feuille de style :
#container {
width: 1100px; <------------ ici c'est la largeur total de votre blog : colonnes + texte
padding: 0px;
background-color: #FFFFFF;
background: url
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
margin-right: auto;
margin-left: auto;
}
#content {
float: left;
width: 700px; <------------ ici c'est la largeur de la zone texte de votre blog
background-color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
overflow: hidden;
<!--
a : { text-decoration : none }
//-->;
}
#rightbar {
float: left;
width: 200px; <------------ ici c'est la largeur de la colonne de droite
height:1300px;
background-color: #C8E476;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #ffffff;
overflow: hidden;
}
#leftbar {
float: left;
width: 200px; <------------ ici c'est la largeur de la colonne de gauche
height:1300px;
background-color: #B6D2EA;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #FFFFFF;
overflow: hidden;
Notez que 200 px (rightbar col de droite) + 200 px (leftbar col de gauche) + 700 px (content) = 1100px pour le container.
Si vous avez des bordures d'une largeur de 1px il faut aussi les ajouter à la largeur totale
Tags : mode avancé, texte fixe
lundi 02 juin
FAQ les modifs n'apparaissent que sur la page d'accueil...
Pour les cyberquiches-mode-avancé : Si on veut qu'une modif (étiquettes, compteur, moteur de recherche, menu... et j'en passe) apparaissent toutes les pages
on copie le code dans "page d'accueil", "page des archives", "pages de
l'index des archives", "page d'un message", "page du profil d'un
auteur".
Et c'est où qu'on les trouve ces pages? Certain(e)s n'ont pas remarqué que au dessus de page d'accueil il y a écrit "sélectionnez" avec un petit menu déroulant. C'est là qu'elles se cachent les vilaines! lol
Tags : FAQ, mode avancé
lundi 26 mai
Le mode avancé c'est quoi et pourquoi?
De façon récurrente vous me posez ces questions...
Est-ce que je pourrais rajouter des photos? Changer mes billets, enlever, modifier mes textes, liens, photos? Je ne serai pas obligé d'avoir de la pub quand les personnes viennent lire mon blog?
Et puis finalement, pourquoi c'est mieux le mode avancé que le mode normal?
Voici la réponse que je viens de donner à une bloggeuse tentée mais indécise...
"En fait tu ne verras aucune différence sur ton blog tel qu'il est à l'heure actuelle; tu saisiras tes billets comme en ce moment le plus simplement du monde, tu modifieras tes textes, saisiras tes liens et ajouteras tes photos strictement de la même façon qu'aujourd'hui. De ce point de vue RIEN ne change. En fait TOUT ce qui n'est pas dans l'onglet "apparence" ne change pas. Regarde donc ton blog aujourd'hui et demande toi combien de fois il t'arrive d'aller dans cette partie "apparence" de ton blog. Une fois le mode avancé en place on n'a pas nécessairement besoin d'y aller tous les matins (sauf les fadas comme moi qui font mumuse mais bon ça c'est une autre histoire...)
Ce qui change donc, c'est la façon que tu as de changer les couleurs de ton blog, d'ajouter ou de retirer des blocs. Si un matin tu veux enlever les "derniers commentaires" de tes colonnes, tu vas dans les "paramètres" de ton blog, puis dans "bloc" et tu supprimes.
Cela ne sera plus possible de cette manière en mode avancé. Au lieu de faire ce que je viens de décrire comme manip' tu iras dans ton script et tu supprimeras la ligne correspondant à tes "derniers commentaires". Ni plus ni moins.
Si tu veux changer la couleur du fond de ta page c'est dans la feuille de style que tu iras. C'est pour cela que blogtuto existe pour rendre compréhensible ces scripts et cette feuille de style.
Sinon pourquoi passer en mode avancé...
je dirais que mon blog Ligne et papilles (et bien d'autres bien sûr lol) illustre la différence entre un blog en mode normal et un blog en mode avancé. En gros en mode avancé tu peux presque tout faire. En tout cas beaucoup de chose : tu peux personnaliser ton blog comme tu le ferais en décorant ta maison.
Un moteur de recherche? Des colonnes côte à côte, un menu sous la bannière, un moteur de recherche, un index illustré par des photos, une zone texte plus large, des colonnes de tailles variables... Bref beaucoup de choses sur le plan graphique que le mode normal ne permet pas.
Maintenant il y a des tas de blog en mode normal qui sont très jolis et vont très bien! Tout dépend de ce qui te fait envie.
Des fois, juste un petit relooking peut être tout aussi réussit (voir les relooking en mode normal de ban@nière split)!
Un dernier truc sur le mode avancé. Le côté irréversible c'est une idée reçue. Oui le modèle que tu créeras sera en mode avancé mais ton modèle actuel existera toujours en mode normal si tu prends soin de le conserver (voir les tutos pour passer en mode avancé). Tu pourras si tu en as envie revenir en arrière. A ce jour personne ne l'a fait mais bon, je crois que c'est rassurant de le savoir!"
Quant à la pub, elle n'a rien à voir avec le mode avancé. Mais en effet souvent les bloggeurs profitent du mode avancé pour en mettre mais c'est une décision qui appartient aux bloggeurs et non au mode avancé!
Tags : bloginfo, mode avancé
samedi 24 mai
une phrase défilante au dessus de la barre de navigation...
Oui je sais c'est un gadget de plus pas vraiment utile mais tellement amusant! Bon n'en abusez pas quand même! Alors si vous regardez au dessus de la barre de navigation et sur firefox sur les onglets.. vous voyez défiler "BlogTuto les tutos qu'il vous faut"!
Alors en l'occurrence le tuto qu'il vous faut pour ce résultat, c'est celui là et le code, celui qui suit!
<!-- Phrase défilante-->
<script language="JavaScript">
<!--
var txt=" BlogTuto, les tutos qu'il vous faut ici votre texte ";
var espera=300;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
// -->
</script>
A coller en en-tête du script avant la balise </head> et bien sûr sur toutes les pages où vous le voulez...
NB cyberquiches-mode-avancé : Si on veut la phrase défilante sur toutes les pages on copie le code dans "page d'accueil", "page des archives", "pages de l'index des archives", "page d'un message", "page du profil d'un auteur". Et c'est où qu'on les trouve ces pages? Certain(e)s n'ont pas remarqué que au dessus de page d'accueil il y a écrit "sélectionnez" avec un petit menu déroulant. C'est là qu'elles se cachent les vilaines! lol
Ce tuto vous est offert par patacaisse. Merci à elle!
Si vous souhaitez participer et contribuer à Blogtuto en parrainant un tuto, faites un don dès maintenant!
N'oubliez pas en commentaire de laisser l'adresse de votre blog pour que je puisse vous mettre en parrain ou marraine sur le tuto à venir. Merci d'avance!
Tags : mode avancé, phrase défilante
vendredi 16 mai
Changer la taille de la colonne et de la zone texte sur blogspot/blogger
c'est simple on va dans :
>Mise en page
>modifier le code html
#outer-wrapper {
width: 800px;<-------------- largeur totale
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 580px; <-------------- largeur zone texte
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px; <-------------- largeur colonne
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Bien sûr largeur de texte + de colonne doit être = à la largeur totale!
Tags : colonne, mode avancé