//Blogger – Trucs et Astuces

Parcourant ici et là les méandres du Web, je me suis rendu compte qu’il y avait un grave problème avec le sieur Google… En effet, on ne trouve pas ce que l’on veut, ou alors, après des titanesques heures de recherche parmi le bruit informationnel…  C’est pourquoi je me suis dis que quelques astuces ici et là devront faire le bonheur des malchanceux ayant atterri sur ce blog… Ce billet  est pour vous Internaute en mal de CSS.

Ceci est ce qu’on appelle du bruit informationnel… hum.

Alors nous allons parler de Blogger et de sa personnalisation, je répondrais à plusieurs requêtes google dont j’ai été l’auteur il y a peu…

.Diable, j’ai créé mon blog mais comment mettre une bannière personnalisée ?
Ce n’est pas très compliqué heureusement, tout d’abord rendez vous dans l’interface Admin de Blogger et cliquez sur présentation. Une fois dedans il vous suffira de cliquer sur modifier dans le bloc de l’en-tête. Insérez y votre bannière et voilà !

.C’est bien jolie, mais comment on la centre ?
cliquez sur “Modifier le code HTML”, faites ensuite “Ctrl+F” et recherchez ceci dans le code :

]]></b:skin>

Juste avant vous copiez –coller ce code CSS suivant :
/* Centrer Bannière */
#header-inner img {
margin-left: auto;
margin-right: auto;
}

.Ok, et si je veux mettre une image de fond personnelle ?
Pour l’image de fond c’est un chouïa plus complexe, tout d’abord il vous faut rechercher un hébergeur d’image sur le net, il y en a plusieurs et je ne vais pas tous les énumérés. Moi j’utilise Picasa Web, ServImg et très récemment FlickR l’hébergeur d’image Social de Yahoo. Ensuite, lorsque vous aurez hébergé votre image, vous retournez dans le code HTML du blog, au même endroit que précédemment et coller ceci :
/* Image de Fond Perso */
body{
background: url(URL de votre image);
background-attachment: fixed;
background-position: top center;
background-color: black;
background-repeat: no-repeat;
}

Quelques explication s’impose, “attachment” détermine le statut de votre image, sur “fixed” votre image ne bougera pas lorsque vous utiliserez le scroll sur le blog, effacez cette ligne si vous souhaitez que le fond bouge en même temps que toute la page. “position” détermine sa place sur votre page, top center signifiant en haut et au centre. “color” détermine…ahem, la couleur, les couleurs principales peuvent être tapé directement (black, white, blue…) par contre pour les couleurs exotiques préféré plutôt l’hexadécimal qui se présente sous cette forme “#000000”. Enfin “repeat” détermine si le fond se répète ou pas.

Pour plus de propriétés et surement de meilleures explications,  je ne peux que vous renvoyer vers l’excellent Site du Zero.

CSS ? Non, peut être pas celui-là quand même…

.Blogger a rajouté une fonction “Lire la Suite”,  je peux la personnaliser ?
Oui, vous devez retourner une fois de plus dans le code mais cette fois cliquez la case  “Développer des modèles de gadgets”, recherchez ce morceau de code, tapez votre message à la place du texte en rouge dans votre code.
<data:post.body/>

<b:if cond=’data:post.hasJumpLink’>
<div class=’jump-link’>
<a expr:href=’data:post.url’>Et La Suite ?</a>
</div>
</b:if>

Pour la personnalisation esthétique, toujours au dessus de la balise ci dessous
]]></b:skin>

Vous inscrivez ce code CSS :
/* LireLaSuite */
.jump-link a{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
display:block; padding: 3px 1px 3px 1px;
color:#000; float:right;
/* Centrer le texte */
text-align:center;
/* Taille du bouton */
width:100px; height:50px;
/* Couleur du fond et contour */
background:#F8F8FF; border:2px solid #EDEDED; text-decoration:none; margin-bottom: 15px; }
/* Survol du bouton */
.jump-link a:hover {color:#fff; text-decoration:underline; background: #b8b977;}

Simple non ?

.Ha Mes yeux…
Bon j’avoue, ce n’est peut être pas si simple, mais avec les différents sites s’aide sur le net, cela ne devrait surement pas poser trop de problèmes. Ce sont les quelques infos que j’ai glané ici et là afin de réaliser mon blog, donc si je peux y arriver pourquoi pas vous. Bon c’est pas tout ça, mais j’entends l’appel du devoir…

Et pour ceux qui ont suivi jusqu’au bout voici un Bonus track, comme on en fait plus de nos jours !
Enjoy !

Encore du bruit informationnel… Mais c’est bon pour le référencement…