Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
Ploucblog
Publicité
Ploucblog
Archives
16 novembre 2012

Personnaliser le blog par des images...

 

design-blog-01

La première page à visiter pour mettre en forme le blog, c'est bien entendu la page "Style"

Pour cela, il faut cliquer sur l'onglet "paramètres" puis y choisir ladite page.

On peut y définir les couleurs du blog, les polices de caractère, les bordures... Et on peut y mettre en place

Une image de fond et/ou une bannière.

Image de fond = celle qui s'affiche comme un papier peint derrière le blog. Selon les dimensions de son écran, votre visiteur en verra plus ou moins dépasser. On peut la choisir de différentes tailles. Avis perso = inutile de se casser la tête avec une grande image. Les petites, se disposant en marqueterie, sont beaucoup plus "souples" et moins lourdes à charger.

Bannière = celle qui orne le haut du blog et se superpose au titre-texte (configurez-le quand même, ce titre-texte, en cas de bug d'affichage...). Pour créer une bannière, le tuto, c'est par là. Pour la mettre en place, c'est par ici.

L'arrière-fond (image de fond) se met en place de la même façon que la bannière (sans confondre les cases de préférence !) à ce détail près qu'il est totalement inutile de s'inquiéter des dimensions du blog. C'est donc beaucoup plus facile !

N'importe qui vous dira qu'une bannière, c'est la première chose qui fait l'ambiance d'un blogn du fait que c'est la première chose entrevue quand la page s'ouvre... Donc si c'est votre premier souci, ça n'a rien que de très normal. Mais très franchement, si vous avez du mal avec sa création et/ou sa mise en place, commencez donc par l'arrière-fond. Ca donnera déjà un petit air coquet à votre blog, et vous aurez gagné le droit d'aller prendre un petit café avant d'aller plus loin.

Vous aurez peut-être envie de décorer la marge...

Là, ça ne se fera pas avec une seule page...

Nous allons partir de l'idée que votre image existe déjà... Si ça n'est pas le cas, pour la créer, ça sera le même tuto que pour la bannière = Par là.

Assurez-vous que l'image n'est pas plus large que votre marge (dimension en pixels). La largeur de ladite marge a été configurée sur la page Style et y est visible. Si l'image est plus large, bien évidemment, elle sera coupée par le bord...

La méthode la plus simple consiste à héberger l'image dans un message du blog, qui sera enregistré en "brouillon" (quoique rien ne vous interdise de vous en servir sur un vrai message !). Ceci étant fait, il faut cliquer sur l'icône "HTML" dans la barre d'outils du module de rédaction de messages.
Votre message étant quasiment vide, vous n'aurez aucun mal à y trouver et sélectionner ceci =

design-blog-03


mais si on colle telle quelle la sélection dans la marge...
Ca fera juste apparaître un moceau de code très disgracieux.
Si on essaye de coller directement le code HTML sans autre forme de procès ni modification d'aucune sorte, avec un peu de chance, l'image apparaîtra. Mais le code sera tronqué, ce qui peut créer des erreurs (des bugs, quoi !).

design-blog-04Dans tout ça, je n'ai pas encore dit où il faut le coller, ce code...
Encore un essai, cette fois, on va y arriver.

design-blog-05Là, c'est bon. Les balises sont fermées, elles ne s'ouvriront pas en route !
Nous avons l'aissé tomber en chemin les informations concernant le nom et les dimensions de l'image. Les navigateurs se débrouilleront avec l'URL pour trouver la bonne taille, quand au nom, on s'en fiche.
A la place, on a remis l'indication "img src" (que vous pouvez très bien copier en même temps que l'URL sur le code d'origine) et ajouté celle 'border" (qui est tout en bout de ligne sur la code d'origine, mais là aussi).

Si cette image est susceptible d'être utilisée à nouveau plus tard, et si elle ne comporte ni zones transparentes, ni animation, vous pouvez l'héberger dans un album-photo. Pour cela, sauvegardez-la en format .JPG
Une fois l'image dans l'album... Suivez le tuto que voici pour récupérer son URL. Je vous accorde que la méthode de l'album n'est pas la plus simple, au début, mais elle n'a rien de difficile, je vous assure !
Pour la suite, ça sera comme précédemment...
Et dès lors, vous pourrez changer votre image de marge au gré de vos envies et même les préparer longuement à l'avance sans avoir à les retrouver sur votre ordinateur.

design-blog-07

Pour coller le code dans la marge, ça se passe sur la page "Liens", dans l'onglet "Contenu"

Collez-le dans la case "nom du lien".

Si vous avez un lien à mettre, placez-le. La case "adresse" ne pouvant pas rester vide, dans le cas inverse, remplissez-la comme dessus... Ou mettez l'adresse d'une page de votre blog, ça fera paquet-surprise pour celui qui viendrait cliquer là !

design-blog-06

Et dans les articles ? Si on mettait des liens-images ?

Le lien-image peut être unique, incorporé à une image propre à l'article, et pointer vers un blog ou un site (quoique ça ne sera pas le mode de lien le plus visible par le visiteur)

Il peut aussi être répété. Rien ne vous interdit de fabriquer des images que vous copie-collierez sur certains articles ayant un point commun (tag ou catégorie), en ayant pris soin, la première fois que vous aurez employé l'image, d'y incorporer un lien (ver l'URL de ce tag ou de cette catégorie sur votre blog). Vous pouvez aussi employer ce système avec l'adresse d'un autre de vos blog.

Une manière décorative de glisser des liens... Et ces icônes revenant de temps à autre participeront au design général de votre blog.

*

*

Avertissement = les scripts insérés dans le bloc de liens canalblog ne doivent en aucun cas dépasser 128 caractères.

Il peut également être bon de ne pas multiplier abusivement les scripts émanant de sites extérieurs.

Publicité
Publicité
Commentaires
Publicité