Créer une zone cliquable dans votre header

Bienvenue sur le Journal du Blog, vous pouvez vous abonner au flux RSS. Merci pour votre visite!

La première chose que vous devez personnaliser sur votre blog est le header (en tête). Même si vous utilisez un thème commun et que vos connaissances en hmtl/css sont limitées vous devez prendre quelques minutes pour le personnaliser. C’est ce dernier qui va donner une identité à votre blog et le différencier des personnes utilisant le même thème.

Il est établi que les logos/headers sont cliquables de manière à revenir sur la page d’accueil. C’est d’ailleurs la façon qu’utilisent de nombreux internautes pour revenir à l’index principal. Si votre logo n’est pas cliquable, les internautes peuvent être déroutés. Voici une solution simple et efficace pour rendre votre logo cliquable.

En revanche, il arrive bien souvent que le header d’un thème soit réalisé à l’aide d’une grande image. Une fois que vous aurez placer le titre et/ou logo de votre blog, il faudra rendre cette zone cliquable, sans pour autant que toute l’image du header soit cliquable (notamment s’il se confond avec le fond de votre blog).

Il s’agit d’utiliser une balise <div> (HTML) et de lui appliquer un style (CSS) vous pouvez appliquer ce style directement dans la balise <div> ou dans le fichier style.css.

Il vous faudra donc créer une balise <div>, lui donner une taille et ensuite lui attribuer un lien. Autrement dit, créer un espace vide cliquable.

Pour que cet espace soit cliquable, mettez le dans une balise lien <a>

Exemple en intégrant le style directement dans le code :

<a href=”http://www.votre blog.com”><div style=”width:900px; height:100px; position:absolute; top:30px; left:100px;”></div></a>

Vous devez ensuite modifier les paramètres du style en fonction de votre blog :

  • width : largeur de la zone cliquable
  • height : hauteur de la zone cliquable
  • position : absolute : la zone cliquable sera par défaut en haut à gauche
  • top : distance à laquelle se trouve la zone cliquable par rapport au haut
  • left : distance à laquelle se trouve la zone cliquable par rapport à la gauche

Il existe différentes solutions pour positionner votre zone cliquable via le CSS. Cette solution est surement la plus simple mais pas forcément la meilleure. En fonction de la taille et de la résolution de l’écran, la position par rapport au coin supérieur gauche est modifié. Vous pouvez également utiliser des valeurs relatives pour le width (en pourcentage).


Vous avez aimé cet article : abonnez-vous au flux RSS !

2 Commentaires »

  1. 4Avatars v0.3.1 v0.3.1

    Voilà une explication claire pour une chose pas forcément évidente pour les nouveaux blogueurs.

  2. 4Avatars v0.3.1 v0.3.1

    Ben ils seront pas décu sur mon blog ou le header fait un écran…

    Tiens je viens de publier un article ou je fais de la pub pour vous suite à votre article sur QualiSEO qui m’a permis de découvrir un annuaire compatible avec mon blog.
    Merci au Journal du Blog donc.

    Thierry

Rediger un commentaire