Mode avancé - BlogTuto

24 juin 2008

Centrer les albums dans la colonne

A la demande d'une certaine damouredo, voici un p'tit tuto pour centrer les images des albums dans les colonnes. Super dur... Naaaaan, je plaisante! Suffit d'ajouter <center> dans le code de cette façon :

<div class="title">Albums photos</div>

<ul>
<CBAlbum>
<li><a href="<$BlogAlbumURL$>"><center><img src="<$BlogAlbumCoverURL$>" width="100" height="100" alt="<$BlogAlbumTitle$>" /></center></a><br /><a href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a></li>
</CBAlbum>
</ul>

Allez roulez jeunesse!

Posté par Lavande à 15:12 - Mode avancé - Commentaires [2] - Rétroliens [0] - Permalien [#]

23 juin 2008

Un billet au hasard dans le blog

Voilà un p'tit tuto qui devrait plaire à mes collègues de la blogo culinaire... mais pas que!
L'idée est d'offrir au lecteur la possibilité de découvrir une recette surprise dans vos pages.
Bon en réalité c'est vous qui faites tout le travail en amont, en choisissant les recettes que vous allez 
proposer dans cette recherche au hasard
Mais bon c'est tout de même un gadgets très sympa!
Alors l'installation se fait en deux temps :

1 - Script à insérer avant la balise </head>

<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
liens = new Array;
liens[0] = "http://l'adresse de votre message ou de votre recette.html";
liens[1] = "http://lignepapilles.canalblog.com/archives/2008/06/11/9529843.html";
liens[2] = "http://lignepapilles.canalblog.com/archives/2008/06/23/9632666.html";
liens[3] = "http://lignepapilles.canalblog.com/archives/2008/01/16/7579683.html";
liens[4] = "http://lignepapilles.canalblog.com/archives/2007/06/06/5195128.html";
liens[5] = "http://lignepapilles.canalblog.com/archives/2007/11/27/7024775.html";
liens[6] = "http://lignepapilles.canalblog.com/archives/2007/02/16/3909246.html";
liens[7] = "http://lignepapilles.canalblog.com/archives/2007/11/14/6870696.html";
liens[8] = "http://lignepapilles.canalblog.com/archives/2008/03/30/8533068.html";
liens[9] = "http://lignepapilles.canalblog.com/archives/2008/04/02/8579280.html";
liens[10] = "http://lignepapilles.canalblog.com/archives/2007/08/01/5762809.html";
liens[11] = "http://lignepapilles.canalblog.com/archives/2007/07/17/5583045.html";
liens[12] = "http://lignepapilles.canalblog.com/archives/2007/11/04/6650558.html";
function goToUrl()
	{
	secret = Math.round(Math.random() * 12); <---- ici mettre le nombre de lien
	window.open(liens[secret],'_blank');
	}
</SCRIPT>
<!-- FIN DU SCRIPT -->

2 - à l'emplacement voulu, dans une des colonnes coller le code suivant :


<!-- Recette au hasard -->
<A HREF="#" onClick="goToUrl();return(false)"> <font size="3">Une recette au hasard du blog !
 Titre de votre rubrique</A>
<!-- FIN DU SCRIPT -->

NB : Font size c'est la taille du texte! Mettre 1, 2, 3... en fonction du résultat désiré.

Comme toujours c'est à insérer sur toutes les pages où vous souhaitez voir apparaitre cette
fonctionnalité.
Si vous ignorez où sont les pages... allez voir ici!

Pour voir ce que ça donne en live, j'ai installé le module sur le blog la bouilloire bavarde

Posté par Lavande à 13:51 - Mode avancé - Commentaires [3] - Rétroliens [0] - Permalien [#]

09 juin 2008

Question du jour! Supprimer le permalien #

"Bonjour, En mode avancé, j'aimerais supprimer le # du permalien ou le permalien en entier. Quel code faut il utiliser? Car sur mon joli blog le # fait un peu tâche...SNIFF Merci d'avance pour ce précieux renseignement!! "

Pour le supprimer, il faut retire cette partie du code dans la partie texte en page d'accueil

Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]

Dans la pratique ça donne

<Blogger> <BlogDateHeader>
<h2><$BlogDateHeaderDate$></h2>
</BlogDateHeader><a name="<$BlogItemNumber$>"></a> <BlogItemTitle>
<h3><$BlogItemTitle$></h3>
</BlogItemTitle>
<p><$BlogItemBody$></p>
<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>
</Blogger>

<$CBControlNavLinks$></div></div>

@ bientôt

Posté par Lavande à 15:39 - Mode avancé - Commentaires [0] - Rétroliens [0] - Permalien [#]

26 mai 2008

Une image qui change d'apparence au passage de la souris...

Tout est dans le titre. Passez la souris sur l'image et vous verrez!

Voici un exemple de code
<p ><a href="http://lignepapilles.canalblog.com/archives/2007/07/27/5768888.html" target="_blank"><img onmouseout="this.src='http://storage.canalblog.com/55/35/446950/26054180_p.jpg'" onmouseover="this.src='http://storage.canalblog.com/71/17/302457/24738528_p.jpg'" src="http://storage.canalblog.com/71/17/302457/24738528_p.jpg" /></a></p>

Si on dépiote le code ça donne :

Vous pouvez coller cela dans vos colonnes pour illustrer les catégories ou encore dans un menu en image sous la bannière de ce genre.

NB : Pour avoir des adresses d'images, il suffit de les télécharger dans un billet normal de cliquer sur le logo html<> et prendre l'adresse affichée. Nul besoin de valider. Un simple copier/coller suffira.

Chouette non?

Posté par Lavande à 15:43 - Mode avancé - Commentaires [0] - Rétroliens [0] - Permalien [#]

24 mai 2008

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!


<script language="JavaScript">

</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

Posté par Lavande à 09:12 - Mode avancé - Commentaires [1] - Rétroliens [0] - Permalien [#]

29 avril 2008

Menu en image sous la bannière (Mode avancé)

Un tuto à l'attention de Virginie...
Pour avoir un menu en image cliquable sous la bannière il ne suffit pas de mettre une image et son lien ;-).

Le code est à intaller entre

</head>

<body> <div id="container"><div id="topbar-logo"><div class="logolink"><a href="<$BlogURL$>"></a></div></div><div id="topbar"> <h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1> <h2><$BlogDescription$></h2> </div>

   là je mets le code!!!!!

<div id="leftbar"> <div class="navlinks">

Voilà le code:



<table border="0" width="99%" cellspacing="0" cellpadding="0">

<td width="0%" align="center" valign="middle">
<a href=" http://viraufourneaux.canalblog.com/archives/douceurs_sucrees/index.html " title="Douceurs sucrées"><img width="90" height="76" border="0" src="http://storage.canalblog.com/71/57/408002/24958546_p.jpg" alt="Douceurs sucrées" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href="http://viraufourneaux.canalblog.com/archives/pain___viennoiserie/index.html " title="Pains et viennoiser"><img width="90" height="76" border="0" alt="Pains et viennoiseries" src="http://storage.canalblog.com/00/02/408002/24958568_p.jpg" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href=" http://viraufourneaux.canalblog.com/archives/douceurs_sucrees/index.html " title="Douceurs sucrées"><img width="90" height="76" border="0" src="http://storage.canalblog.com/71/57/408002/24958546_p.jpg" alt="Douceurs sucrées" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href="http://viraufourneaux.canalblog.com/archives/pain___viennoiserie/index.html " title="Pains et viennoiser"><img width="90" height="76" border="0" alt="Pains et viennoiseries" src="http://storage.canalblog.com/00/02/408002/24958568_p.jpg" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href=" http://viraufourneaux.canalblog.com/archives/douceurs_sucrees/index.html " title="Douceurs sucrées"><img width="90" height="76" border="0" src="http://storage.canalblog.com/71/57/408002/24958546_p.jpg" alt="Douceurs sucrées" /></a><br></td>

<td width="0%" align="center" valign="middle">
<a href="http://viraufourneaux.canalblog.com/archives/pain___viennoiserie/index.html " title="Pains et viennoiser"><img width="90" height="76" border="0" alt="Pains et viennoiseries" src="http://storage.canalblog.com/00/02/408002/24958568_p.jpg" /></a><br></td>

</tr>
</table>

Décortiquons une ligne :

<td width="0%" align="center" valign="middle">
<a href=" http://viraufourneaux.canalblog.com/archives/douceurs_sucrees/index.html " adresse vers le quel le lecteur va être redirigé lorsqu'il va cliquer sur la photo
title="Douceurs sucrées"> Titre de la rubrique
<img width="90" height="76" border="0" largeur, hauteur et cadre de la photo
src="http://storage.canalblog.com/71/57/408002/24958546_p.jpg" Adresse de la photo
alt="Douceurs sucrées" /></a><br></td>

NB cyberquiches-mode-avancé : Si on veut l'index 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

Posté par Lavande à 07:10 - Mode avancé - Commentaires [3] - Rétroliens [0] - Permalien [#]

17 avril 2008

Nous le faisons pour vous...

Vous avez regardé, cela vous semble impossible, trop compliqué, vous préférez être accompagné(e) dans le passage de votre blog en mode avancé, pour être certain(e) que tout se passera bien sans prise de tête.

Nous vous proposons ici de vous livrer votre blog en mode avancé.

Vous pouvez nous contacter pour que nous étudions un devis de votre blog en mode avancé avec les widgets de votre choix : diaporama, blog-it, moteur de recherche, musique...
Le passage en mode avancé, c'est des heures de travail, mais aussi la formation du blogeur et l'assistance à posteriori. Si nous assistons gratuitement les blogeurs pour les dépannages courant, nous pensons aussi qu'il est parfois plus simple d'être accompagné(e) en rétribuant à sa juste valeur le travail de celui qui aide.

La prise en charge de votre mode avancé, peut comprendre simplement l'aspect technique dont je me charge mais aussi l'aspect esthétique dont se charge Damouredo.

Contactez-nous pour plus de précisions.

Damouredo et Lavande

Pour voir certaines de nos créations et les blogeurs que nous avons aidés dans cette démarche, c'est ICI.

Posté par Lavande à 11:37 - Mode avancé - Commentaires [1] - Rétroliens [0] - Permalien [#]

15 avril 2008

Augmentez la taille de vos albums photos

Vous pouvez souhaiter modifier la taille des photos de couverture de vos albums photos qui sont en présentation sur votre page d'accueil...

La taille standard est de 100 pixels.

Taille "standard" à 100 px (width="100" height="100")

Taille agrandie à 120 px

Comment faire ?

Allez dans le script de votre "page d'accueil" et cherchez ce bloc :

<div class="title">Bannières réalisées</div>
<ul>
<CBAlbum>
<li><a href="<$BlogAlbumURL$>"><img src="<$BlogAlbumCoverURL$>" width="100" height="100" alt="<$BlogAlbumTitle$>" /></a><br /><a href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a></li>
</CBAlbum>
</ul>

Il vous suffit juste de jouer sur la hauteur et la largeur (width="120" height="120") de la couverture de l'album photos comme ci-dessous...

Attention, à ne pas dépasser la taille de vos colonnes!

<div class="title">Bannières réalisées</div>
<ul>
<CBAlbum>
<li><a href="<$BlogAlbumURL$>"><img src="<$BlogAlbumCoverURL$>" width="120" height="120" alt="<$BlogAlbumTitle$>" /></a><br /><a href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a></li>
</CBAlbum>
</ul>

Posté par Lavande à 16:10 - Mode avancé - Commentaires [3] - Rétroliens [0] - Permalien [#]

Faire défiler les derniers messages, commentaires... dans ses colonnes

Je suis toujours à la recherche d'idées simple qui allègent l'aspect des blogs.
Si vous ne craignez pas qu'un texte qui défile en boucle vous envoie au pays de Morphée, ce tuto est fait pour vous.

Le script à mettre dans vos pages est le suivant :

ICI vous mettez ce que vous voulez voir défiler

Exemple avec le bloc dernier message :

<div class="title">Derniers messages</div>
<ul>
<CBLastPosts>
<li><a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastPosts>
</ul>

Vous allez le positionner de cette façon

<div class="title">Derniers messages</div> pour avoir le titre "derniers messages" au dessus du défilant
<marquee behavior="scroll" direction="up" height="50" width="160"

scrollamount="1" scrolldelay="1" onmouseover="this.stop()"
onmouseout="this.start()"><p>

Sur le même principe on peut mettre les commentaires, les liens des copains, etc... Cool non?

Posté par Lavande à 14:21 - Mode avancé - Commentaires [0] - Rétroliens [0] - Permalien [#]

12 avril 2008

Un texte de présentation "en dur" sur votre accueil

On peut avoir envie de mettre quelques lignes de présentation sur son blog qui resteront en permanence...et bien, chic, j'ai trouvé comme une grande comment faire...

(quand on vous dit que le mode HTML c'est finalement assez simple quand on a compris...)

Trève de blabla...on fait comment ?

1- On va écrire son texte comme un billet normal dans "Ecrire un nouveau message"...

une fois qu'on a terminé on clique sur <> pour accèder au code HTML...on fait un petit CTRL + C en ayant soin de bien surgraisser le tout auparavant pour COPIER le texte ET les codes !

2 - On va dans sa page d'accueil et on cherche sa colonne du centre (si on a fait tout bien comme le conseille Lavande ICI...on retrouve facilement :

</div></div>

<div id="content"><div class="blogbody">

Et on va ensuite copier son texte juste après...en ayant soin de rajouter le petit commentaire qui nous permettra de faire des modifications ultérieures...et de ne pas chercher son texte comme une idiote pendant 2 heures !!!

<p><strong><font size="3">Une jolie bannière pour votre blog, pourquoi ?</font><br /><font size="3" face="courier new, courier, mono"><br /></font></strong></p>

<p><font size="3" face="courier new, courier, mono"><strong>Parce que c'est la vitrine de votre blog, c'est grâce à elle que vos visiteurs auront envie d'aller plus loin...de revenir vous voir !</strong></font>

</p> blablablablablablablablablablablablablablablablablabla

<p><font size="3" face="courier new, courier, mono"><em>Que de bonnes recettes, de jolies créations ou de beaux textes mal mis en valeur à cause d'une bannière mal ajustée, banale, avec des
photos floues, un texte mal centré...</em></font></p>

Si on souhaite sauter des lignes...il faut juste rajouter un ou deux <br />

Je prévisualise pour voir si je ne me suis pas trompée...et si tout est correct, je VALIDE !

Et le tour est joué ! Magiiiiiiiiiiiiique !

Si je veux le texte sur toutes mes pages de blog...je n'oublie pas de faire la même manip sur les autres pages ...

Posté par Lavande à 10:36 - Mode avancé - Commentaires [8] - Rétroliens [0] - Permalien [#]

« Accueil 1 2 3 Page suivante »

Haut de Page

BlogTuto

Tuto pour blog et assistance blogueur. Dépannage des blogueurs, passage en mode avancé accompagné, relooking blog, bannière pour blog