/* 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;
}

<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>

<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>

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