Installer un logo ou une bannière

 

 

 

La possibilité de mettre un logo ou une bannière comme titre du blog est prévue dans l'espace de gestion, comme indiqué dans la description de la catégorie avec la capture du formulaire à utiliser. Mais comme vous pouvez visualiser dans cet article, j'ai employé une autre méthode qui donne la possibilité de créer un titre spécial par page, ou sur une série de pages, ou sur tout le blog, si vous le souhaitez.
Pour commencer il faut rendre inactive la partie "Haut"

 

 

En mettant en haut de la page et en mode HTML le code CSS ci-dessous :



<STYLE type=text/css>  #haut  {display : none;} #barre {margin-top:170px}</STYLE>

 

Le haut de cette page est constitué de trois images, donc 3 blocs mis en ligne, à la place des images vous pourriez mettre du texte, ceci ouvre un large éventail de présentations.

Mais attention!!! c'est une astuce qu'il faut employer avec prudence.

 

Dans le composeur de Blog4ever j'ai eu quelques difficultés, en mode texte le bandeau avec les images recouvre le texte du haut, j'ai donc écrit le début de l'article en mode HTML, puis continué normalement en mode texte.

 

Voici le code employé, il doit être mis au début de votre article, dans le composeur en mode HTML.

 

<div style="background: none repeat scroll 0% 0% rgb(235, 237, 171); -moz-background-inline-policy: continuous; left: 10px; width: 98%; position: absolute; top: 5px; height: 160px;"><img style="margin: 5px 30px;" src="https://diztest.blog4ever.com/blog/url_artimage-205392-1120611-4439.html" border="0"> <img style="margin: 20px 50px;" src="https://www.blog4ever.com/blogfichiers/490/boximages/490080323113720.png" border="0"> <img style="margin: 20px 30px;" src="https://sd-1.archive-host.com/membres/images/183822970129391303/util_blogs/avatar1_100.png" border="0"></div>

 

 

Le style indiqué à chaque image ci-dessus, margin, permet de placer les images.

 

Pour mettre du texte il faut créer les blocs(div) et calculer les espaces entre ces blocs, les marges extérieures gauche et haute.

 

<DIV style="BACKGROUND: #ebedab; LEFT: 10px; WIDTH: 98%; POSITION: absolute; TOP: 5px; HEIGHT: 120px">
<div style="FLOAT: left; margin-left:valeur margin-top:valeur;">Texte et son formatage</div>
<div style="FLOAT: left; margin-left:valeur margin-top:valeur;">Texte et son formatage</div>
<div style="FLOAT: left; margin-left:valeur margin-top:valeur;">Texte et son formatage</div>
</div>

 

Cette procédure ouvre les portes de votre imagination, sans modifier tout son blog, on agit que sur une page bien spécifique pour commencer puis pourquoi pas en faire d'autres... Les images peuvent être cliquables... je n'ai pas encore essayé mais une présentation d'images défilantes, ça pourrez être sympa, etc...

 

A vous de jouer...

Retour à la liste des astuces



11/05/2008
8 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso