Blogger Sitelerine Tepki (Reaksiyon) Butonları Nasıl Eklenir?

Blogger sitenizde okuyucularınızın içeriklerle etkileşime girmesini sağlamanın ve onlara yorum yazmaktan daha pratik bir geri bildirim yolu sunmanın en modern yöntemi, Tepki (Reaksiyon) Widget'ı eklemektir. Ziyaretçileriniz tek bir tıklamayla yazınızı beğendiklerini, şaşırdıklarını veya bilgilendirici bulduklarını belirtebilirler.

Bu rehberde, blogunuza şık, modern ve tamamen özelleştirilebilir bir tepki widget'ını adım adım nasıl entegre edeceğinizi anlatıyoruz.

Adım Adım Kurulum Rehberi

Adım 1: HTML ve Yapısal Kodları Ekleme

Öncelikle butonların blogunuzda nerede görüneceğini belirleyen HTML kodunu yerleştirmemiz gerekiyor. Bu butonlar minimalist ve modern bir tasarım çizgisine sahiptir.

  1. Blogger Paneli'ne giriş yapın.

  2. Sol menüden Tema bölümüne gelin ve Özelleştir butonunun yanındaki aşağı ok simgesine tıklayarak HTML'i Düzenle seçeneğini seçin.

  3. Kod penceresinde data:post.body ifadesini aratın (Klavyenizden Ctrl + F kombinasyonunu kullanabilirsiniz). Sitenizde birden fazla bulunuyorsa, genellikle ikincisi veya üçüncüsü yazı içeriğini temsil eder.

  4. Aşağıdaki HTML kodunu, data:post.body etiketinin hemen altına yapıştırın:

<div class='blog-reactions-container'>
  <h4 class='reactions-title'>Bu yazıyı nasıl buldunuz?</h4>
  <div class='reactions-wrapper'>
    <button class='reaction-btn' data-reaction='like' onclick='handleReaction(this)'>
      <span class='reaction-icon'>👍</span>
      <span class='reaction-text'>Beğendim</span>
      <span class='reaction-count' id='count-like'>0</span>
    </button>
    <button class='reaction-btn' data-reaction='love' onclick='handleReaction(this)'>
      <span class='reaction-icon'>❤️</span>
      <span class='reaction-text'>Sevdim</span>
      <span class='reaction-count' id='count-love'>0</span>
    </button>
    <button class='reaction-btn' data-reaction='wow' onclick='handleReaction(this)'>
      <span class='reaction-icon'>😮</span>
      <span class='reaction-text'>Şaşırdım</span>
      <span class='reaction-count' id='count-wow'>0</span>
    </button>
    <button class='reaction-btn' data-reaction='sad' onclick='handleReaction(this)'>
      <span class='reaction-icon'>😢</span>
      <span class='reaction-text'>Üzüldüm</span>
      <span class='reaction-count' id='count-sad'>0</span>
    </button>
  </div>
</div>

Adım 2: CSS ile Görsel Düzenleme ve Estetik (Koyu Tema Uyumlu)

Butonların modern, bento grid esintili ve minimalist bir yapıda görünmesi için CSS kodlarını ekliyoruz. Bu tasarım hem açık hem de koyu temalarla mükemmel uyum sağlar.

  1. Kod penceresinde </style> veya ]]逐></b:skin> etiketini bulun.

  2. Aşağıdaki CSS kodlarını bu etiketlerin hemen önüne yapıştırın:

.blog-reactions-container {
  margin: 30px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.reactions-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
}
.reactions-wrapper {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
.reaction-btn {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 30px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.reaction-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: #ffffff;
}
.reaction-icon {
  font-size: 18px;
}
.reaction-text {
  font-size: 14px;
  color: #495057;
  font-weight: 500;
}
.reaction-count {
  font-size: 12px;
  background: #e9ecef;
  padding: 2px 8px;
  border-radius: 10px;
  color: #6c757d;
}
/* Koyu Tema Desteği */
@media (prefers-color-scheme: dark) {
  .reactions-title { color: #f8f9fa; }
  .reaction-btn { background: #212529; border-color: #343a40; }
  .reaction-text { color: #e9ecef; }
  .reaction-count { background: #343a40; color: #adb5bd; }
  .reaction-btn:hover { background: #2c3036; }
}

Adım 3: JavaScript ile Etkileşim Fonksiyonu

Ziyaretçilerin butonlara tıkladığında sayacın artmasını ve yerel tarayıcı hafızasında (localStorage) saklanarak mükerrer oy kullanılmasını engellemek için JavaScript kodunu entegre ediyoruz.

  1. HTML kod penceresinin en altına inip </body> etiketini bulun.

  2. Aşağıdaki JavaScript kodunu </body> etiketinin hemen üstüne ekleyin:

<script type='text/javascript'>
//<![CDATA[
function handleReaction(button) {
  const reactionType = button.getAttribute('data-reaction');
  const postId = window.location.pathname; 
  const storageKey = 'reacted_' + postId;

  if (localStorage.getItem(storageKey)) {
    alert('Bu yazıya daha önce tepki verdiniz!');
    return;
  }

  const countElement = document.getElementById('count-' + reactionType);
  let currentCount = parseInt(countElement.innerText);
  currentCount++;
  countElement.innerText = currentCount;

  localStorage.setItem(storageKey, reactionType);
  button.style.transform = 'scale(1.1)';
  setTimeout(() => { button.style.transform = 'none'; }, 200);
}
//]]>
</script>

  1. Sağ üst köşedeki Kaydet (Disk) simgesine tıklayarak temanızı kaydedin. Artık blog yazınızın altında tamamen işlevsel ve harika görünen bir reaksiyon widget'ı yer alacaktır!

Blogger tepki eklentisi, Blogger reaksiyon butonları, Blogger widget ekleme

İlgili Olabilecek Diğer Başlıklar

  • Blogger Siteleri İçin En İyi Kullanıcı Etkileşimi Artırma Yöntemleri

  • Kod Bilgisi Olmadan Blogger Eklentileri Nasıl Özelleştirilir?

  • Blog Sitelerinde Bento Grid Tasarımı ve CSS Uygulamaları

  • Blogger Yazı Altı Paylaşım ve Beğen Butonları Yapımı

  • Web Sitelerinde Sayfa Yükleme Hızını Etkilemeyen Hafif Widget Yapıları

Konuyla İlgili Anahtar Kelimeler

blogger eklentileri, blog etkileşim butonları, beğeni widget yapımı, blogger css düzenleme, web site reaksiyon kodları, blogger html kodlama, kullanıcı geri bildirim araçları, javascript sayaç yapımı, minimalist blog tasarımları, blogger tema optimizasyonu,