Commentaires dans un Gadget

 J'ai mis quelques heures a concotez ca pour moi et pour vous. C'est du jmais vue sur blogger.  J'essais  de plu en plu personnaliser le blogger pour quon ce retrouve un peu comme ekla mais en mieux. 

IL EST IMPORTANT QUE VOTRE BLOG SOIT PUBLIC  POUR QUE SA FONCTIONNE

Le code vous devez le mettre dans un Gadget dans Mise en Page.

=== Code Html Javascript ===

<style type="text/css">

  /* 1. BOÎTIER  - BLEU */

  #comm-stable-wrap {

    border: 6px solid #0077be; /* Bleu Océan */

    border-radius: 15px;

    background-color: #005f73; /* Fond marin profond */

    padding: 15px;

    height: 400px; 

    overflow-y: auto;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    box-shadow: inset 0 0 20px rgba(0,255,255,0.2); /* Lueur aquatique */

  }

  /* Scrollbar */

  #comm-stable-wrap::-webkit-scrollbar { width: 10px; }

  #comm-stable-wrap::-webkit-scrollbar-track { background: #005f73; }

  #comm-stable-wrap::-webkit-scrollbar-thumb { background: #0a9396; border-radius: 10px; }

  /* 2.  TEXTE Bleu  */

  .comm-item-box {

    display: flex;

    align-items: flex-start;

    margin-bottom: 22px;

    padding: 15px;

    background: #0a9396; /* Bleu lagon énergisant */

    border-bottom: 8px solid #94d2bd; /* Sable clair / Écume */

    border-radius: 12px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.3);

  }

  .comm-avatar-img {

    width: 48px; 

    height: 48px;

    border-radius: 50%;

    border: 3px solid #ee9b00; /* Rappel des poissons tropicaux (Orange Corail) */

    margin-right: 14px;

    flex-shrink: 0;

    object-fit: cover;

  }

  .comm-author-name {

    font-weight: bold;

    color: #e9d8a6; /* Couleur sable doré */

    display: block;

    margin-bottom: 6px;

    font-size: 17px; 

    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

  }

  .comm-content-text {

    font-size: 15px; 

    color: #f1faee; /* Blanc écume */

    line-height: 1.5;

  }

  /* 3. BOUTON  */

  .comm-button-toggle {

    /* Dégradé du turquoise au bleu profond */

    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%);

    color: #ffffff;

    border: 2px solid #90e0ef;

    padding: 12px 35px;

    border-radius: 50px;

    cursor: pointer;

    font-weight: bold;

    margin-bottom: 25px;

    font-size: 16px;

    text-transform: uppercase;

    letter-spacing: 2px;

    box-shadow: 0 6px 15px rgba(0,119,182,0.4);

    transition: all 0.4s ease;

    outline: none;

    position: relative;

    overflow: hidden;

  }

  .comm-button-toggle:hover {

    /* Change vers une couleur corail énergisante au survol */

    background: linear-gradient(135deg, #ee9b00 0%, #ca6702 100%);

    transform: scale(1.05);

    box-shadow: 0 8px 25px rgba(238, 155, 0, 0.5);

    border-color: #f1faee;

  }

  .comm-button-toggle:active {

    transform: scale(0.95);

  }

</style>

<div style="text-align: center">

  <button class="comm-button-toggle" onclick="toggleWidget()">🐠 Murmure des visiteurs 🐠</button>

</div>

<script type="text/javascript">

  function bloggerCommRunner(json) {

    var container = document.getElementById('comm-stable-wrap');

    var html = "";

    var entries = json.feed.entry;

    if (!entries || entries.length === 0) {

      container.innerHTML = "<span style='color:white;'>L'océan est calme... aucun message.</span>";

      return;

    }

    for (var i = 0; i < entries.length; i++) {

      var entry = entries[i];

      var auteur = entry.author[0].name.$t;

      var avatar = entry.author[0].gd$image.src.replace('s512-c', 's52-c');

      if (avatar.indexOf('blank.gif') !== -1) { avatar = 'https://www.gravatar.com'; }

      

      var extrait = (entry.summary ? entry.summary.$t : entry.content.$t).substring(0, 95) + "...";

      var lien = "";

      for (var k = 0; k < entry.link.length; k++) {

        if (entry.link[k].rel === 'alternate') { lien = entry.link[k].href; break; }

      }

      html += '<div class="comm-item-box">';

      html += '<img src="' + avatar + '" class="comm-avatar-img" onerror="this.src=\'https://www.gravatar.com\'">';

      html += '<div class="comm-content-text">';

      html += '<span class="comm-author-name">' + auteur + '</span>';

      html += '<span>' + extrait + '</span> <a href="' + lien + '" style="color:#e9d8a6; text-decoration:none; font-weight:bold;"> [»]</a>';

      html += '</div></div>';

    }

    container.innerHTML = html;

  }

  function toggleWidget() {

    var w = document.getElementById('comm-stable-wrap');

    w.style.display = (w.style.display === 'none') ? 'block' : 'none';

  }

</script>

<div id="comm-stable-wrap" style="color: #f1faee;">Plongée dans le flux des visiteurs...</div>

<!-- Créé par Sorcière Corbeau en collaboration AI -->

<script type="text/javascript" src="/feeds/comments/default?alt=json-in-script&callback=bloggerCommRunner"></script>