Pour visualiser l’effet allez donc faire un petit tour sur mon autre blog…

Je n’ai pas installé cet effet sur ce blog, car ma bannière étant en flash, l’effet se place en dessous et ça n’a donc plus grand intérêt…

Par contre si vous êtes sur Wordpress et que votre bannière n’est pas en Flash, vous pouvez l’installer.

Sur Canalblog, même avec une bannière flash, ça marche…mais ne me demandez pas pourquoi.

Copier l’adresse suivante :

http://storage.canalblog.com/65/20/251752/47593114.js

Sélectionnez-la, clic droit puis copier

Allez ensuite dans la barre d’adresse de votre navigateur internet puis faites Coller et Enter.

Une page blanche comme celle-ci va s’ouvrir…avec le contenu du fichier Js.

Vous devez modifier seulement les 3 adresses en bleues, en changeant les adresses des images pour mettre les votre à la place et aussi l’adresse web de redirection (celle qui envoie vers un autre blog ou site).

Faites Fichier/Enregistrer sous… pour enregistrer le fichier Js sur votre pc.

Ensuite ouvrez-le en cliquant droit dessus et en sélectionnant Ouvrir avec/Bloc-notes ou Modifier pour certains.

Vous n’êtes pas obligé de changer le nom du fichier, mais vous pouvez le faire quand même.

Une fois qu’il est ouvert dans le bloc-notes, vous devez copier puis coller l’ adresse de l’image de fond dans votre navigateur internet pour l’ouvrir, cliquer droit dessus et l’enregistrer sur votre pc.

Vous devez maintenant l’ouvrir avec Photofiltre ou un autre logiciel de retouche pour la modifier à votre goût, mais vous devez garder les dimensions et aussi respecter la position du cadre avec le texte, sinon lorsque la page se tournera votre texte ne sera plus visible en entier…Enregistrez votre image.

Voici un petit tuto en vidéo sans le son (because j’ai un rhume de dingue) qui vous aidera à modifier le fond :

Pour l’image de l’angle, vous pouvez mettre ce que vous voulez du moment que vous gardez à peu près les mêmes dimensions.

Importez les deux images dans un nouveau message pour en récupérer leur adresse.

Retournez dans le bloc-notes et mettez les nouvelles adresses de vos images dans le fichier Js.

Pour finir vous devez changer l’adresse de redirection et en mettre une autre à la place, si vous ne voulez pas mettre d’adresse, mettez # à la place de l’adresse.

Maintenant vous devez enregistrer votre fichier Js, en cliquant sur Fichier/Enregistrer il va écraser l’ancien.

Vous devez récupérer l’adresse de ce fichier Js en l’important dans un message (Chez Canalblog dans “Insertion d’un fichier”) puis en copiant son adresse en mode html.

Il ne vous reste plus qu’à copier/coller cette adresse dans le script ci-dessous et de copier/coller ce script dans votre page d’accueil (Chez Canalblog) ou dans le header.php sur Wordpress.

<script type="text/javascript"src="http://storage.canalblog.com/65/20/251752/47593114.js"></script>

…

Chez Canalblog ou sur Wordpress collez le script au dessus de la balise </head>

Voilà…c’est tout.

C’est celui du site Gravatar, qui permet d’ajouter un avatar dans les commentaires des blogs que vous visitez…

Il suffit de vous inscrire sur le site Gravatar.com puis d’importer un avatar et grâce à votre adresse mail, chaque fois que vous laisserez un commentaire sur un blog qui utilise Gravatar, votre photo ou votre avatar s’affichera dans les commentaires de celui-ci.

Ce qui donne ça :

Depuis peu, sur mon blog même si vous n’êtes pas inscrit sur Gravatar, à la place de l’icône bleue par défaut…vous avez un petit monstre qui vous est attribué !

C’est plus sympa…non ?

ça donne ça :

Pour activer cette option, allez dans votre espace d’administration Wordpress puis dans Réglages et Discussion.

Vous avez plusieurs possibilités…Wavatar ou Monster, à vous de choisir…il ne vous reste plus qu’à cochez la case de votre choix et d’enregistrer les modifications.

Voilà c’est tout

A la place d’une vidéo : un lien tout bidon !

Car en passant par l’icône Ajouter une vidéo dans la barre d’outils, oui…on obtient un lien…on ne peut pas visionner la vidéo sur l’article…ce qui à mon goût n’est pas terrible terrible, c’est une option qu’il doit y avoir bien sur pour ceux qui le veulent, mais une petite vidéo en direct c’est mieux quand même…

Pour ceux qui ne veulent pas installer de plugin, vous avez la solution de coller un lecteur exportable que vous trouvez maintenant sur un tas de site de vidéos comme Daylimotion, Youtube, Google vidéo etc…

Dans ce cas, il suffit de copier/coller le code du lecteur exportable que vous trouvez sous la vidéo en question, dans votre message en mode html et le tour est joué…

Oui, mais…

Cette méthode a ses limites ! c’est très pratique si vous avez l’habitude de prendre les vidéos sur le net, dans ce cas ne changez rien, mais si vous faites des vidéos chez vous et que vous voulez les mettre sur votre blog, vous devez obligatoirement les hébergées sur un de ces sites pour en récupérer le lecteur exportable.

Bien sur si vous savez un peu bidouiller, vous pouvez passez par votre client Ftp et héberger votre vidéo sur votre serveur, puis en récupérer l’adresse que vous insèrerez ensuite dans le code du lecteur exportable en collant l’adresse de votre vidéo dedans…

Oui…mais quelle galère…il y a plus simple quand même !

Alors si vous voulez mettre des vidéos dans vos articles sans vous prendre la tête, il y a vraiment plus simple…Je vous propose d’installer le plugin Embedded Video…

Vous pouvez le télécharger ici.

Comme pour n’importe quel plugin, décompressez le fichier zip puis placez le dossier embedded-video-with-link dans Plugins.

http://www.demolitetuto.fr/wp-content/plugins/embedded-video-with-link

Activez le plugin dans votre espace d’administration Wordpress dans Extentions.

Lorsque vous ouvrez un nouvel article une icône apparait désormais…

Pour insérer une vidéo qui se trouve sur votre ordinateur, cliquez sur l’icône, une fenêtre va s’ouvrir avec plusieurs onglets.

Choisissez Upload vidéo, puis Parcourir pour importer votre vidéo, vous pouvez lui donner un titre et une description mais rien ne vous y oblige…

Cliquez sur Upload et patientez quelques secondes, lorsque la vidéo est importée la fenêtre se met sur l’onglet Local vidéo, vous devez sélectionner la vidéo dans la liste et faire Insert.

Évidement si c’est la première fois que vous importez une vidéo, il n’y a que la votre   mais pour les fois suivantes, vos anciennes vidéos s’affichent dans la liste, et vous pouvez les mettre dans un article sans avoir de nouveau à les importer, elles restent en mémoire.

Voyons maintenant l’onglet Vidéo URL…

Vous devez simplement coller l’adresse d’une vidéo dans la case Insert vidéo URL et faire Insert.

L’avantage de cette option, c’est que vous pouvez récupérer le Permalien de n’importe quelle vidéo et afficher cette vidéo avec le lecteur du plugin qui est tout de même plus sympa…

Mais surtout il permet un meilleurs affichage de certaines vidéos…

Par exemple dans mon cas, lorsque je fais des tuto en vidéo, il est impossible d’héberger mes vidéos sur des sites comme Daylimotion, Youtube, Google vidéo etc… mes vidéos sont floues, pas moyen de faire de réglages même dans le menu du lecteur, et le mode plein écran est une catastrophe.

En collant l’url de mes vidéos dans Vidéo URL, mes vidéos s’affichent correctement.

Pour récupérer l’adresse (url) d’une vidéo vous devez l’héberger sur votre serveur (ftp), voici comment faire :

Dans la partie de gauche, ouvrez le dossier qui contient votre vidéo et sélectionnez-la, dans la partie de droite ouvrez le dossier Upload (où sont tous les fichiers de votre blog) puis créer un dossier Vidéos, ça sera plus facile par la suite pour retrouver vos vidéos…

Sélectionner le dossier Vidéos puis cliquez sur la flèche pour envoyer votre vidéo dans la partie de droite.

Pour récupérer son adresse (url), cliquez droit sur votre vidéo qui se trouve maintenant dans la partie de droite (ce qui veut dire qu’elle est hébergée sur votre serveur) puis Copiez l’URL et sur HTTP.

Collez l’adresse dans Insert vidéo URL puis Insert et c’est tout !

Une ligne de code apparait dans votre article comme ceci :

Si vous faites un aperçu de votre article, vous pourrez vérifier que votre vidéo s’affiche bien…

Je pense à ceux qui débute sur Wordpress, certains Plugins sont pas toujours très simple à comprendre, sans parler du fait qu’ils sont en anglais et que même avec un outils de traduction, il faut pas mal d’imagination et de persévérance pour déchiffrer et tout comprendre…

Avec ce petit script pas de réglage particulier, vous pouvez le mettre dans un bloc texte pour qu’il apparaisse dans une de vos colonnes ou bien dans une page spéciale “Contacter l’auteur” ou encore dans un message.

Vous avez juste à mettre votre adresse email dans la première ligne, puis de coller le script dans un message en mode html ou encore dans une page ou même dans un widget, dans ce cas vous devrez modifier la grandeur des cases, en changeant les veleurs cols=”30″ rows=”7″ et size=”40″.

<form action="mailto:demolite@fournisseur.fr">
<blockquote>
<label for="email_expediteur">Votre adresse e-mail :</label>
<p>
<input name="email_expediteur" type="text" class="minuscule" id="email_expediteur" size="40" />
<p>
<label for="titre">Titre de message :</label>
<p>
<input type="text" size="40" name="titre" id="titre"/>
<p>
<label for="message">Votre Message:</label>
<p>
<textarea name="message" id="message" cols="30" rows="7"></textarea>
<p><input type="submit" name="envoyer" value="Envoyer" />
</blockquote>
</form>

Le script réagit différemment en fonction du navigateur et de la messagerie que vous utilisez…

Dans la plupart des cas, la messagerie s’ouvre et il n’y a plus qu’à envoyer le message…

Nous allons voir aujourd’hui comment ajouter un cadre personnalisé à vos vidéos…sans plugin bien entendu.

Et par la même occasion, réviser la technique du roulage des Californias Rolls la plus simple et la plus rapide à mon avis

Allez au boulot !

Faites comme d’hab, importez votre vidéo dans un nouvel article…

Repérez ensuite les dimensions de cette vidéo pour réaliser son habillage…dans cet exemple la vidéo fait 405 x 314 px je vais donc créer un cadre légèrement plus grand…logique.

Le voici :

Il fait 435 x 340 je l’ai fait un peu au pif, puisqu’ensuite nous allons centrer la vidéo sur ce cadre via la feuille de style.

Voici donc le bloc que vous devez ajouter dans votre feuille de style :

.vidéo {
background: url("http://www.Adressedevotrecadre.jpg") no-repeat;
width: 435px;
height: 340px;
text-align: center;
padding: 15px 0px 0px 0px;
margin: 0 auto;
}

Une fois que vous avez créer avec Photofiltre votre fond ou bien récupéré n’importe quelle image, vous devez l’héberger pour en récupérer l’adresse, puis la coller dans le bloc de code ci-dessus (en bleu).

Il restera ensuite à faire quelques petits réglages pour centrer votre vidéo sur le fond de votre cadre en jouant avec la ligne : padding: 15px 0px 0px 0px;

Mais pour que cela soit possible il faut ajouter au script de la vidéo (dans votre message en mode html) une balise qui rendra tout ça possible, voici le script de notre vidéo avant modification :

<object width="405" height="314" data="http://www.youtube.com/v/qndZKzNHpwc&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/qndZKzNHpwc&amp;hl=en&amp;fs=1" /></object>

Nous allons ajouter cette balise :

<p class=”vidéo”> au début du script et la balise </p> à la fin pour refermer le tout.

Ce qui donnera ceci :

<object width="405" height="314" data="http://www.youtube.com/v/qndZKzNHpwc&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/qndZKzNHpwc&amp;hl=en&amp;fs=1" /></object>

Voyez c’est tout bête…la balise <p class=”vidéo”></p> permet d’appeler le cadre qui se trouve dans la feuille de style.

Désormais à chaque fois que vous voudrez insérer une vidéo dans un message vous n’aurez qu’à ajouter la balise au script de votre vidéo pour faire apparaitre son cadre.

Rien ne vous empêche de créer plusieurs cadres, il suffit d’ajouter un nouveau bloc dans votre feuille de style comme ceci :

.vidéo2 {
background: url("http://www.Adressedevotrecadre.jpg") no-repeat;
width: 435px;
height: 340px;
text-align: center;
padding: 15px 0px 0px 0px;
margin: 0 auto;
}

Et d’ajouter aussi le 2 à la balise comme ceci : <p class=”vidéo2“></p>

Inutile de vous dire que ça s’est pas fait en 5 minutes, j’ai bien ramé…je me suis aidée de 3 tuto qui parlaient du sujet, mais rien à faire ça ne marchait pas…

Pour y arriver il a fallut que je lise et relise tous ces tuto et surtout que j’en comprenne les bases, pour pouvoir adapter tout ça à mon thème, car en fonction des thème pas mal de chose peuvent changer…

J’ai bien cru que j’allais abandonner…mais c’est un mot qui me donne des boutons et qui m’empêche de dormir alors pas question lâcher l’affaire…

Dans ce tuto je vais essayer de vous donner le plus de détails possible afin de vous faciliter la tâche, voici l’adresse des 3 sites qui m’ont bien aidé, j’ai vraiment pioché dans les 3, car des fois certains tuto s’adressent à des utilisateurs affirmés…ce qui semble évident ne l’est pas toujours…

Webdemark.fr

Fran6art, le blog

Css4design.com

Je précise tout de même que le tuto qui va suivre, s’applique sur un blog qui a 2 colonnes, c’est à dire une page centrale (#Content) et une colonne latérale (sidebar, leftbar, rightbar etc…) en fonction des thèmes vos colonnes peuvent se nommer différemment…

Le principal, c’est qu’elles portent le même nom dans votre feuille de style et dans les autres fichiers que nous allons modifier.

Si votre blog a 3 colonnes, une centrale et 2 colonnes de chaque côté et que vous voulez faire passer la colonne de gauche à droite, pour que les 2 colonnes soient côte à côte comme sur ce blog, il y a juste un terme à changer dans la feuille de style…

Avant :

Après :

Ouvrez votre feuille de style, descendez sur la ligne qui gère votre colonne de gauche, elle peut se nommer l_sidebar ou sidebarleft ou encore leftbar, elle sera facile à reconnaitre…il y a jours le mot bar !

Changez le float: left; en float: right; et votre colonne ira se placer à droite…tout simplement.

Voilà…passons maintenant aux choses sérieuses !

Avant toute chose, faites une copie des fichiers que nous allons modifier…

Commençons par ajouter quelques blocs dans la feuille de style :

www/wp-content/themes/nom de votre theme/style.css

Il n’est pas nécessaire d’ajouter tous ces blocs, car certains sont déjà dans votre feuille de style, par contre ce sont des blocs que nous allons modifier en changeant la valeur des  width…(pour éviter de s’embrouiller, ajoutez-les quand même vous pourrez toujours les supprimer pas la suite si ça fait doublon…)

#main {
width: 1200px;
}
#content {
width:725px;
float: left;
}
.sidebar {
width: 400px;
float: right;
}
.sidebar-1 {
width:200px;
float:right;
}
.sidebar-2 {
width:200px;
}

Le bloc # main, peut se nommer #Page ou #Container, il est déjà dans votre fds, il gère la taille la page de votre blog, qui contient vos colonnes centrale et latérale.

Le bloc #content c’est votre page des messages, la page centrale, ce bloc est déjà dans votre fds.

Les 3 blocs suivants (sidebar) gèrent vos colonnes latérales, un seul se trouve déjà dans votre fds, puisque vous avez une colonne latérale.

Collez les 5 blocs ci-dessus dans le haut de votre feuille de style, puis vérifier que ces nouveaux blocs portent bien le même nom que vos blocs déjà en place dans votre feuille de style, vous allez devoir modifier la taille des blocs, puisque vous allez ajouter un colonne…dans cet exemple j’ai du ajouter 200px (la taille de ma nouvelle colonne).

Si le bloc #main se nomme #container chez vous, changez le #main en #container dans le bloc que vous venez d’ajouter, même chose pour les colonnes…

Dans ma feuille de style avant les modifications, ma colonne de droite se nommait #sidebar, vu qu’il n’y en avait qu’une, désormais sidebar va devenir siderbar1 et ma nouvelle colonne sera sidebar2.

#sidebar {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}

Maintenant que je veux en ajouter une deuxième, il faut bien les différencier…

La ligne de ma colonne actuelle va donc se transformer en :

#sidebar1 {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}

Je vais devoir ajouter une seconde ligne pour ma nouvelle colonne qui se nommera #sidebar2 :

#sidebar2 {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}

Pour déterminer la taille de votre #Page, et celle de #Content, vous devez additionner mes colonnes de façon à ce que tout ce petit monde rentre dans la Page de mon blog…(c’est comme un puzzle)

200px de colonne1+ 200px de colonne2 + 725px de #content = 1125px de #page…

Ma page fait 1200px, elle peut faire plus…mais pas moins ! (logique si vous faites du 38 vous rentrez dans un pantalon taille 40, mais pas dans un taille 36 ! )

Bon, voilà pour la feuille de style, on y reviendra plus tard pour faire des ajustements…

Nous allons maintenant modifier le fichier Sidebar.php celui là contient les colonnes et leur contenu.

Voilà à quoi il ressemblait avant de le modifier :

<div id=”sidebar”>
<ul>
<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<!– Si un Widget n’est pas activé, des codes s’affichent ici –>
<?php endif; ?>
</ul>
</div>

Après modifications ça donne ça :

<div id=”sidebar”>
<div id=”sidebar1″>
<ul>
<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul>
</div>
<div id=”sidebar2″>
<ul>
<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar(’sidebar2′) ) : ?>
<?php endif; ?>
</ul>
</div>
</div>

Alors c’est la que ça se complique…

La balise <div id=”sidebar”>…<div> contient les balises suivantes :

<ul>
<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<!– Si un Widget n’est pas activé, des codes s’affichent ici –>
<!– Scrpits ici –>
<?php endif; ?>
</ul>

Ces lignes permettent d’appeler les widgets dans une colonne, c’est une Zone Widgetisable…il est également possible d’ajouter des scripts directement entre ces balises sans passer pas l’administration Wordpress.

Ajouter une colonne c’est facile…mais une fois fait, il faut rendre cette colonne Widgetisable, c’est à dire que dans votre espace d’administration Wordpress dans l’onglet Apparence/Widgets il faut faire apparaitre cette nouvelle colonne de façon à pouvoir y ajouter des widgets…

Si vous observez bien le code ci-dessous (sidebar.php) vous remarquerez qu’une nouvelle colonne a été ajoutée  (sidebar2) c’est exactement le même code que pour la première colonne (sidebar1) sauf que dans la ligne de code qui appelle les widgets, il faut différencier le nom de la colonne et mettre dans les () le nom de notre nouvelle colonne.(’sidebar2‘) en rouge :

<div id=”sidebar”>
<div id=”sidebar1″>
<ul>
<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul>
</div>
<div id=”sidebar2″>
<ul>
<?php if ( !function_exists(’dynamic_sidebar’) || !dynamic_sidebar(’sidebar2‘) ) : ?>
<?php endif; ?>
</ul>
</div>
</div>

Maintenant que votre nouvelle colonne est prête à recevoir les widgets, il faut modifier le fichier functions.php (de votre thème) :

www/wp-content/themes/nom de votre theme/functions.php

Pour que votre nouvelle colonne apparaisse dans le menu défilant des Widgets de l’espace d’administration Wordpress.

Ouvrez le fichier functions.php

Avant modifications j’avais ceci :

<?php
if ( function_exists(’register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
?>

Après modifications :

<?php
if ( function_exists(’register_sidebar’) )
register_sidebar(array(’name’=>’sidebar1′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
register_sidebar(array(’name’=>’sidebar2′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
?>

Comme vous pouvez le voir si vous observez bien ce qui a changé entre ces deux fichiers, j’ai ajouté un nouveau bloc de codes pour ma nouvelle colonne :

register_sidebar(array(‘name’=>’sidebar2′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));

Mais il a fallu aussi donner un nom à ma première colonne pour la différencier de la nouvelle :

register_sidebar(array(‘name’=>’sidebar1′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));

Donc pour résumer tout ça, les codes d’ouvertures qui contiennent mes 2 colonnes ne changent pas (en rouge) ma colonne 1 est en bleue, ma nouvelle colonne est en gris…et on ajoute un nom aux deux colonnes (en blanc)…

Ok ? vous êtes toujours là ?

<?php
if ( function_exists(’register_sidebar’) )
register_sidebar(array(‘name’=>’sidebar1′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
register_sidebar(array(‘name’=>’sidebar2′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
?>

On ferme de fichier functions.php en enregistrant les modifs…

Si tout va bien, vous devez avoir une nouvelle colonne sidebar2 et aussi votre ancienne colonne qui se nomme maintenant sidebar1, qui s’affiche dans les widgets :

Revenons à notre feuille de style, car si maintenant vous avez une nouvelle colonne avec des widgets dedans, ils n’ont aucune mise en forme, et s’affichent tout bizarre…normal il faut les mettre en forme en ajoutant un bloc sidebar2 dans notre feuille de style.

Votre première colonne (la siderbar1) s’appelle toujours #sidebar dans votre feuille de style…

#sidebar {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
#sidebar h2, #sidebar .sidebartitle{font:12pt “Century gothic”,Lucida Sans, arial;color: #00FFFF;background: #000000 url(images/Categories.png) ;margin: 20px 0px 0px 0px;padding:5px 0px 3px 10px;margin-bottom:15px;letter-spacing: 0px;}

etc…

Maintenant qu’elle se nomme sidebar1 il faut donc lui ajouter un 1, sinon ça peux pas marcher…

Comme ceci :

#sidebar1 {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
#sidebar1 h2, #sidebar1 .sidebartitle{font:12pt “Century gothic”,Lucida Sans, arial;color: #00FFFF;background: #000000 url(images/Categories.png) ;margin: 20px 0px 0px 0px;padding:5px 0px 3px 10px;margin-bottom:15px;letter-spacing: 0px;}

etc…

Pareil pour notre deuxième colonne sidebar2, il faut ajouter le même bloc que pour notre première colonne et ajouter un 2, comme ceci :

#sidebar2 {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
#sidebar2 h2, #sidebar2 .sidebartitle{font:12pt “Century gothic”,Lucida Sans, arial;color: #00FFFF;background: #000000 url(images/Categories.png) ;margin: 20px 0px 0px 0px;padding:5px 0px 3px 10px;margin-bottom:15px;letter-spacing: 0px;}

Bon, voilà…je suis pas certaine d’avoir réaliser ce tuto dans le bon ordre, mais normalement avec mes indications plus celles des autres blogs cités en début de tuto, vous devriez vous en sortir…

Patience, courage, détermination…enfin, surtout patience

Si vous rencontrez un problème, faites moi signe, si je peux vous aider ça sera avec plaisir…

Pour savoir comment réaliser ce genre de bannière il faudra encore attendre un petit peu, je vous fais un tuto très vite…

Nous allons voir aujourd’hui comment insérer cette bannière Flash à la place de l’ancienne.

Nous allons modifier 2 fichiers : header.php et style.css qui se trouvent dans le dossier de votre thème.

www/wp-content/themes/nom du theme/header.php

www/wp-content/themes/nom du theme/style.css

Avant de commencer je vous invite avec insistance a faire une copie de ces deux fichiers…

Ouvrez header.php et descendez sur ces lignes de codes :

<body>
<div id=”main”>
<div id=”header”>
<div id=”logo”>
<h1><a href=”<?php echo get_settings(’home’); ?>/”><?php bloginfo(’name’); ?></a></h1>
<div class=”description”><?php bloginfo(’description’); ?></div>
</div>

Vous devez remplacer les lignes bleues par les codes de votre bannière Flash.

Comme ceci :

<body>
<div id=”main”>
<div id=”header”>
<div id=”logo”>
<object type=”application/x-shockwave-flash” data=”http://Adresse bannière.swf” width=”978″ height=”358″>
<param name=”play” value=”true” />
<param name=”movie” value=”http://Adresse bannière.swf” />
<param name=”menu” value=”false” />
<param name=”quality” value=”high” />
<param name=”scalemode” value=”noborder” />
</object>
</div>

En prenant soin de coller l’adresse de votre bannière Flash comme indiqué en blanc et en changeant les valeurs width=”978″ height=”358″ pour les adapter à la taille de votre bannière.

Fermez le fichier et enregistrez les modifications.

Maintenant, il faut ouvrir le fichier style.css pour supprimer l’ancienne bannière qui se trouve sur la ligne suivante :

/* Header */
#header {background: #000000 url(images/header.jpg) no-repeat;height: 314px;position: relative;}
#logo {position: relative;padding: 100px 0px 0px 20px;height: 60px;}
#logo .description{position: absolute;left: 25px;bottom:3px;color: #FFFFFF;font-size: 14px;}

En fonction des thèmes, la modification des lignes peut être différente, dans cet exemple j’ai supprimé les lignes #logo pour obtenir un affichage correct et n’ai gardé que cette ligne :

/* Header */
#header {position: relative;}

A tester en fonction des thèmes…d’où l’importance de faire une copie des fichiers

Fermez le fichier et enregistrez les modifications.

Si comme moi vous aviez des liens sur votre ancienne bannière : Accueil, Contacter l’auteur etc… la bannière flash se place par dessus…

Soit vous insérez un lien dans votre animation Flash, c’est ce que j’ai fait le titre de mon blog : Demolitetuto dans la bannière est cliquable, soit vous placez ces liens ailleurs sur votre blog, comme mon “Contacter l’auteur” que j’ai ajouté dans une colonne…

Voilou…à vous de jouer !

Installez-la comme les autres extensions, en décompressant le fichier et en le plaçant dans le dossier Plugins de votre client FTP.

Activez-la ensuite dans vos administration Wordpress dans l’onglet Extensions.

Pour changer ou ajouter des smilies personnalisés, commencez d’abord par réunir tous vos smilies dans le même dossier en les renommant comme ceci :

Vous remarquerez dans la liste des smilies ci-dessous qu’ils se nomment tous  : icon_nom.gif

Vous devez nommer vos smilies de la même façon en changeant juste le nom.

Ouvrez votre client FTP, puis ouvrez le fichier functions.php

www/wp-includes/functions.php

Faites défiler pour descendre jusqu’à la liste des smilies.

Si vous avez 10 smilies à ajouter, copiez/collez les 10 derniers smilies à la suite des autres, puis changez le nom de chaque smilies en prenant soin qu’il corresponde bien aux smilies que vous allez ajouter.

Vous devez également changer le code qui permet d’afficher le smilie :

‘:bip:’ => ‘icon_grosmot.gif’,

Lorsque vous ajoutez une ligne (un smilies) vous devez lui attribuer un code dans cet exemple c’est :bip:

Vous devez faire attention de ne pas mettre un code déjà utilisé dans la liste…

Ensuite lorsque vous écrirez un article, vous pourrez également faire apparaitre un smilie en tapant le code comme ceci :bip:

Une fois votre liste en place, sélectionnez les lignes que vous venez d’ajouter et faites copier.

Fermez le fichier functions.php en enregistrant les modifications.

Ouvrez maintenant custom-smilies.php

www/wp-content/plugins/custom-smilies-se/custon-smilies.php

Descendez sur la liste et faites coller pour ajouter la liste des smilies également dans ce fichier, comme dans l’autre.

Fermez le fichier et enregistrez les modifications.

Maintenant faites passer vos smilies dans le dossier smilies.

www/wp-includes/images/smilies

Voilà…

Vous pouvez changer toute la liste si vous voulez ou la réduire…du moment que vous faites les mêmes modifications dans les deux fichiers php et que vous mettez dans le dossier smilies les images correspondantes.

A la place de ça :

J’avais une belle page web blanche qui me disait :

Fatal error: Call to undefined function: wp_user_settings() in /home.49/d/e/m/demolite/www/wp-admin/admin-header.php on line 14

Wahou…super !

J’étais pas dans la m….

Alors il a fallu que je rassemble mes esprits, (au réveil c’est pas très évident) et que je me souvienne exactement des fichiers que j’avais modifié la veille…

Finalement sur les conseils de ma “coupine” le Lutin, j’ai téléchargé la dernière version de Worpdpress 2.7 (installée chez moi), pour récupérer les fichiers d’origines et remplacer les miens défectueux !

Alors pour vous éviter bien des désagréments…une perte de temps inutile et aussi de monter à 20 de tension…ce qui doit être mon cas des ces grands moments de solitude…faites ce qui suit :

Ouvrez votre client FTP, sélectionnez dans la partie de gauche le dossier de destination pour enregistrer la sauvegarde, puis cliquez sur le dossier www dans la partie de droite et faites un clic droit dessus pour choisir Télécharger.

L’intégralité du dossier www sera copier dans le dossier de destination (vous pouvez suivre l’avancement de la copie en cliquant sur l’onglet file d’attente en bas de page).

En cas de coup dur…vous n’aurez plus qu’à remplacer les fichiers défectueux par ceux sauvegardés.

Déjà, je voulais absolument un fond noir, pour pouvoir importer mes tuto réalisés sur Canalblog, je voulais également une mise en page très simple et épurée, pour mettre en valeur les messages afin qu’ils soient le plus lisible possible.

Je n’avais encore aucune idée du style graphique que je voulais donner à ce blog, j’avais beau chercher et rechercher, aucun thème ne semblait me convenir.

Je suis finalement tombée sur ces fleurs grises dans un thème, mais c’était un peu tristounet…alors j’ai ajouter des touches de turquoise et hop ma bannière et le design  de mon blog était tout trouvé

Voici mon thème tel qu’il était au départ, j’ai donc changé la bannière et toutes les images du thème pour le mettre à ma sauce :

Pour récupérer une bannière dans un thème : vous devez télécharger le thème, ouvrir le dossier du thème, les images se trouvent dans le dossier : Images.

Une fois que vous avez choisi votre thème, pour remplacer la bannière en place par une nouvelle de votre choix, vous devez aller dans le dossier images de votre thème, ouvrir la bannière dans un logiciel de retouche d’image, comme Photofiltre par exemple, il ne vous reste plus qu’à modifier la bannière ou en créer une autre aux mêmes dimensions et de l’enregistrer sous le même format et le même nom.

Votre nouvelle bannière doit se nommer comme l’ancienne header.jpg dans cet exemple (La ligne de code qui permet d’afficher votre bannière sur votre blog se trouve dans la feuille de style, si vous changez le nom de votre bannière, vous devez modifier cette ligne également).

Une fois que votre nouvelle bannière est prête, ouvrez votre client FTP et remplacez votre ancienne bannière dans le dossier images de votre thème.

www / wp-content / thème / nom du thème / images.

Voilà, votre nouvelle bannière est en place.

En fonction des thèmes, il est possible de changer les dimensions de la bannière, mais pas sur tous, à vous de faire des tests, pensez à faire une sauvegarde des pages que vous modifiez, en cas de problème vous pourrez réparer vos bêtises.