Dans cet article, nous allons voir comment ajouter une barre de notifications fixe à votre blog Blogger avec un effet coulissant jQuery. Vous avez sûrement vu de nombreux blogs utiliser ce type de barre de notifications fixe pour afficher les dernières actualités, annonces ou événements, afin que leurs lecteurs ne ratent aucune information importante. Il est très important de fournir à vos lecteurs en ligne les dernières infos sur le blog pour augmenter votre lectorat.

Cette barre de notifications est codée en HTML/CSS et jQuery. Les jolis effets coulissants pour afficher et masquer la barre sont créés avec jQuery. La barre ne contient ni contenu Flash ni images lourdes, elle n'augmentera donc pas le temps de chargement des pages de votre blog. Vous pouvez aussi personnaliser son apparence, ce que nous verrons dans la partie personnalisation. D'abord, voyons la procédure pour ajouter ce widget à votre blog.

Comment ajouter la barre de notifications fixe jQuery

Connectez-vous à votre compte Blogger.
Cliquez sur Modèle et faites une sauvegarde complète de votre blog. C'est recommandé avant toute modification du modèle.
Trouvez maintenant la balise <head> et ajoutez le code suivant juste en dessous :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Si vous avez déjà ajouté un fichier jQuery à votre blog, vous pouvez sauter l'étape ci-dessus.
Maintenant, juste avant la balise </head>, placez le code suivant :

<script type="text/javascript">
jQuery(document).ready(function()
{
  jQuery('#UT-up').click(function()
  {
    jQuery('#UT-up').fadeOut('100');
    jQuery("#UT-notify").slideUp('1000',function()
    {
      jQuery('#UT-down').slideDown('fast',function()
      {
        jQuery('#UT-down-img').fadeIn('2000');
      });
    });
  });

  jQuery('#UT-down').click(function()
  {
    jQuery('#UT-down').slideUp('fast',function()
    {
      jQuery('#UT-up').fadeIn('2000');
      jQuery("#UT-notify").slideDown('1000');
    });
  });
});
</script>

Utilisez CTRL+F pour trouver le code ]]></b:skin> et placez le code suivant en dessous :

<style>
#UT-notify
{
height:30px;
background-color:#333;
font-family:Georgia, "Times New Roman", Times, serif;
color:#FFF;
position:fixed;
top:0;
left:0;
right:0;
width:100%;
text-align:center;
box-shadow:0px 0px 1px 2px #0F0;
border-radius:0px 0px 5px 5px;
z-index:1000;
}
#UT-notify a, #UT-notify a:hover, #UT-notify a:visited
{
color:#FFF;
text-shadow:#CCC 0px 1px 0px;
text-decoration:none;
}
#UT-up
{
position:fixed;
top:8px;
right:20px;
z-index:1000;
cursor:pointer;
}
#UT-down
{
position:fixed;
top:0px;
right:15px;
z-index:1000;
display:none;
cursor:pointer;
height:30px;
width:30px;
background-color:#333;
font-family:Georgia, "Times New Roman", Times, serif;
border-radius: 0px 0px 5px 5px;
box-shadow:0px 0px 1px 2px #0F0;
}
#UT-down-img
{
position:fixed;
right:20px;
top:10px;
}
#UT-nofifications
{
margin-top:5px;
}
</style>

Appuyez sur CTRL+F pour trouver la balise <body> (dans certains modèles, la balise body comporte des attributs supplémentaires, cherchez alors <body).
Juste en dessous de cette balise, placez le code suivant :

<div id="UT-notifications-Wrap">
  <div id="UT-down">
    <img src="YOUR_DOWN_ARROW_IMAGE_URL" title="Show Notification bar" alt="show-notice" id="UT-down-img"/>
  </div>
  <div id="UT-notify">
    <span id="UT-up">
      <img src="YOUR_UP_ARROW_IMAGE_URL" title="Hide Notification bar" alt="hide-notice"/>
    </span>
    <div id="UT-nofifications">
      <!--Write your notifications below and give hyperlinks-->
      <a href="https://www.yourblog.com/your-first-link" target="_blank">First announcement</a>&nbsp;|&nbsp;
      <a href="https://www.yourblog.com/your-second-link" target="_blank">Second announcement</a>&nbsp;|&nbsp;
      <a href="https://www.yourblog.com/your-third-link" target="_blank">Third announcement</a>
    </div>
  </div>
</div>

Modifiez maintenant les titres des notifications selon vos besoins et remplacez les hyperliens par vos propres liens. Remplacez aussi les deux URL d'images de flèches par vos propres petites icônes de flèches haut/bas.
Enregistrez le modèle et cliquez sur Afficher le blog pour voir la barre de notifications en action.

Astuce utile

Si vous souhaitez changer régulièrement le contenu de cette barre de notifications, nous vous recommandons d'ajouter le code de l'étape 8 dans un gadget HTML/JavaScript depuis la fenêtre Mise en page plutôt que sous la balise body. Cela vous permettra de mettre à jour facilement les notifications sans modifier le modèle à chaque fois.

Personnalisations

Pour changer la couleur de fond principale, modifiez les valeurs background-color:#333 dans le CSS.
Pour changer la couleur des hyperliens, modifiez la valeur color:#FFF dans la règle #UT-notify a.

Vous avez ajouté avec succès la barre de notifications fixe jQuery avec effets coulissants à votre blog. Vous pouvez consulter notre section Astuces et conseils Blogger pour plus de conseils sur le blogging et l'optimisation SEO.

Barre de notifications coulissante et fixe pour Blogger

Articles recommandés

Comment ajouter la barre de notifications fixe jQuery

Astuce utile

Personnalisations