Blogger'da Bookmark Özelliği Ekleme

Bu yazıda, hiçbir teknik karmaşaya girmeden, Blogger sitenizde Bookmark (Yer İmi) özelliğini nasıl ekleyebileceğinizi en sade haliyle paylaşıyorum. Yapamazsanız bana bildirin seve seve yardımcı olurum.

CSS Kodları

Bu kısım butonun ve listenin nasıl görüneceğini belirler. Blogger paneline gidin > Tema > HTML'yi Düzenle. CSS kısmına aşağıdaki kodu yapıştırın.

/* Bookmark Buton Tasarımı */
.bookmark-btn {
  background: #f8f9fa;
  border: 1px solid #ddd;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 20px;
  font-size: 14px;
  transition: all 0.3s;
  color: #555;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bookmark-btn:hover {
  background: #e9ecef;
}
.bookmark-btn.active {
  background: #ff4757;
  color: white;
  border-color: #ff4757;
}
/* Bookmark Liste Tasarımı */
#bookmark-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#bookmark-list li {
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
  position: relative;
}
#bookmark-list li a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  display: block;
  padding-right: 30px;
}
#bookmark-list .remove-item {
  position: absolute;
  right: 0;
  top: 0;
  color: #ff4757;
  cursor: pointer;
}
.empty-msg {
  color: #777;
  font-style: italic;
}

JavaScript Kodları

Bu kısım tıklama olaylarını, kaydetmeyi ve listelemeyi yönetir. CDATA içine alınmıştır, bu sayede Blogger şablonunu kaydederken hata vermez.

<script>//<![CDATA[
// Bookmark Sistemi JS
document.addEventListener("DOMContentLoaded", function() {
  updateButtons();
  renderList();
});
function toggleBookmark(btn) {
  var url = btn.getAttribute("data-url");
  var title = btn.getAttribute("data-title");
  var bookmarks = JSON.parse(localStorage.getItem("bloggerBookmarks")) || [];
  
  // URL zaten var mı kontrol et
  var existingIndex = bookmarks.findIndex(item => item.url === url);
  if (existingIndex !== -1) {
    // Varsa sil
    bookmarks.splice(existingIndex, 1);
    btn.classList.remove("active");
    btn.innerHTML = '<i class="far fa-bookmark"></i> Kaydet';
  } else {
    // Yoksa ekle
    bookmarks.push({url: url, title: title});
    btn.classList.add("active");
    btn.innerHTML = '<i class="fas fa-bookmark"></i> Kaydedildi';
  }
  localStorage.setItem("bloggerBookmarks", JSON.stringify(bookmarks));
  renderList(); // Listeyi güncelle (eğer aynı sayfadaysa)
}
function updateButtons() {
  var bookmarks = JSON.parse(localStorage.getItem("bloggerBookmarks")) || [];
  var buttons = document.querySelectorAll(".bookmark-btn");
  
  buttons.forEach(function(btn) {
    var url = btn.getAttribute("data-url");
    var exists = bookmarks.some(item => item.url === url);
    
    if (exists) {
      btn.classList.add("active");
      btn.innerHTML = '<i class="fas fa-bookmark"></i> Kaydedildi';
    } else {
      btn.classList.remove("active");
      btn.innerHTML = '<i class="far fa-bookmark"></i> Kaydet';
    }
  });
}
function renderList() {
  var listContainer = document.getElementById("bookmark-list");
  if (!listContainer) return; // Liste konteyneri yoksa dur
  
  var bookmarks = JSON.parse(localStorage.getItem("bloggerBookmarks")) || [];
  listContainer.innerHTML = "";
  if (bookmarks.length === 0) {
    listContainer.innerHTML = "<div class='empty-msg'>Henüz favori eklenmedi.</div>";
    return;
  }
  bookmarks.forEach(function(item) {
    var li = document.createElement("li");
    li.innerHTML = '<a href="' + item.url + '">' + item.title + '</a><span class="remove-item" onclick="removeDirectly(\'' + item.url + '\')"><i class="fas fa-trash"></i></span>';
    listContainer.appendChild(li);
  });
}
function removeDirectly(url) {
  var bookmarks = JSON.parse(localStorage.getItem("bloggerBookmarks")) || [];
  var updatedBookmarks = bookmarks.filter(item => item.url !== url);
  localStorage.setItem("bloggerBookmarks", JSON.stringify(updatedBookmarks));
  renderList();
  updateButtons();
}
//]]>
</script>

Butonların Yerleşimi

Sistemi kurduk, şimdi okuyucunun tıklayacağı o butonu yazıların içine koymamız lazım. Yazının neresinde görünsün istiyorsanız oraya şu kodu yapıştırın:

<button class='bookmark-btn'
  onclick='toggleBookmark(this)'
 expr:data-title='data:post.title'
 expr:data-url='data:post.url'>
 <i class="far fa-bookmark"></i> Kaydet
</button>

Kaydedilenleri Listeme

Son olarak, insanların kaydettikleri yazıları görebilecekleri bir alan lazım. Bunu bir sayfalara eklemek mantıklı olabilir. "Bookmark" veya "Favoriler" gibi bir sayfa oluşturup oraya ekleyebilirsiniz. 

<ul id="bookmark-list">Yükleniyor...</ul>

Bunu kullandığım demon önizleme sayfasında tasarımında değişiklik yaptım. Öyle yapmak istiyorsanız bana iletişim sayfasından ulaşabilirsiniz. ♡♥︎

4 Yorum