Attention !
Ce blog a déménagé et n'est plus mis à jour. Rendez vous sur le nouveau blog :
http://www.blogtuto.org/
jeudi 30 octobre
Un menu de plus sous la bannière
ça fait un bout de temps que je cherche un menu comme celui là.
Un menu qui s'intègre facilement dans une bannière qui soit facile à corriger.
Voici donc le principe.
la bannière doit avoir un fond uni pour intégrer harmonieusement les liens du menu.
Visuellement ça donne ça
Donc ça donne dans le script deux choses
Sur la feuille de style :
#topbar-logo {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: px;
border-color: #;
background: #000000 url("http://storage.canalblog.com/43/75/302457/31869260.jpg") no-repeat 0%; 0%;
height: 250px;
display: block;
}
div .logolink a {
display: block;
text-decoration: none;
width: 100%;
height: 250px; <-- ici la hauteur de la bannière
}
#topbar {
background-color: #CBAFBE; <-- ici la couleur du fond de votre bannière
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 1px;
border-color: #;
padding: 10px;
display: block; <-- ici il faut avoir block à la place de none
Dans la page d'accueil, les archives, la page d'un message et la page de l'auteur il faudra ajouter le script de cette façon :
<body>
<div id="container"> <div id="topbar-logo"><div class="logolink"><a href="<$BlogURL$>"</a></a></div></div><div id="topbar">
<h1>
[<a href="http:votreadresse.com"> Accueil </a> ]
[<a href="http://votreadresse.com"> titre </a> ]
[<a href="http://votreadresse.com"> titre</a> ]
[<a href="http://votreadresse.com"> titre</a> ]
[<a href="http://votreadresse.com"> titre </a>']
</div> </h1>
<!-- colonne de gauche-->
<div id="leftbar"> <div class="navlinks">
Vous avez en gras la partie à coller!
Et voilà le tour est joué!
Chouette non?
Tags : menu
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é
lundi 27 octobre
Et un relooking un!
Cela fait un petit bout de temps déjà que ce blog a été relooké.
Tout le mérite du graphisme revient à Fabhyène.
Le menu déroulant sous la bannière est à noter. Nous avons respecter les choix de couleurs de la bloggeuse.
Allez visiter ce blog!
AVANT
APRES
Le blog http://gamelleprod.canalblog.com/
Tags : Relooking
Faire un index en image sans tre en mode avancé
Cela fait un moment que cela me trotte. Les cuisinières de la blogopshère apprécient d'avoir des index en images dans leurs colonnes. Le truc c'est que tout le monde pense que c'est l'apanage du mode avancé. mais en fait c'est out à fait possible en mode normal.
Comme il est possible d'insérer une image et de lui ajouter un lien, le prinicpe sera absolument le même.
1 - Pour commencer il vous faudra créer une vignette par catégorie. Cela n'est pas obligatoire (une image d'un plat pouvant suffire) mais cela vous permettra d'ajouter sur celle ci le nom de la catégorie qu'elle désigne ce qui est bien plus sympa!
Vous ne savez pas faire cela?
Pas de panique! Damoureo ou Fabhyène vous aideront dans cette tâche!
Une fois ceci fait, imaginons que vous ayez des images comme celle ci pour chacune de vos catégories :
2- Vous allez alors charger votre image sur canalblog pour générer une adresse de cette façon
- vous cliquez sur 
- vous parcourez pour trouver votre image et surtout vous décochez les deux cases ("créer une miniature" et "afficher l'image à taille originale") comme ci dessous
- votre image dans votre éditeur vous cliquez sur 
pour passer en mode html
- là votre code apparait ce qui va donner par exemple :
<p ><img width="112" height="150" border="0" alt="Soupes" src="http://lignepapilles.hautetfort.com/files/design/24739963_p.jpg" /></p>
3 - Vous copiez la partie en rouge et vous aller ensuite dans vos liens d'amis en cliquant sur "Contenu" et "Liens d'amis"
- sur la première ligne vous copiez l'adresse de votre image de cette façon
- sur la deuxième ligne vous mettez le lien vers votre catégorie : pour avoir ce lien il vous suffit d'aller sur votre blog dans "toutes les archives", de cliquer sur la catégorie qui vous intéresse et de copier l'adresse qui va s'afficher dans votre barre de navigation
- ensuite vous ajoutez le nom de votre catégorie de liens à savoir dans l'exemple ci dessous "index des recettes"
4 - Procédez ainsi de suite pour toutes vos catégories!
Et voilà un bel index en mode normal!
N'oubliez pas que nous pouvons réaliser pour vous cet index. Ecrivez moi pour un devis!