Blogger yazı içinde Paylaş ve Beğen Butonu

1. Blogger kontrol panelinizdeyken sırasıyla " Tema » HTML'yi düzenle " tıklayın. CTRL+F tuş kombinasyonu'nu kullanarak sayfada aşağıdaki kodu aratın:

<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' itemprop='keywords' rel='tag'><data:label.name/></a></b:loop>
</b:if>
</div>

2.Bulduğunuz bu kodun bir kaç satır altına aşağıda verilen kodu ekleyin.;

<b:if cond='data:view.isPost'>
<style>
/* <![CDATA[ */
.action-buttons-wrapper {
display: flex;
gap: 12px; /* Butonlar arası boşluk */
margin: 20px 0;
justify-content: flex-start;
flex-wrap: wrap;
}

.modern-btn {
position: relative;
padding: 8px 18px;
background: transparent;
border: 1.5px solid #a55b12;
color: #a55b12;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
overflow: visible;
white-space: nowrap;
}

.modern-btn:hover {
background: rgba(165, 91, 18, 0.1);
transform: translateY(-1px);
}

/* Aktif/Paylaş Butonu Vurgusu */
.modern-btn.active, .btn-share:active {
background: #a55b12 !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(165, 91, 18, 0.3);
}

.l-num {
font-weight: 700;
border-left: 1px solid rgba(165, 91, 18, 0.3);
padding-left: 8px;
}

.modern-btn.active .l-num {
border-left-color: rgba(255, 255, 255, 0.3);
}

/* PATLAMA ANİMASYONU */
.explosion-ring {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
border: 1px solid #a55b12;
border-radius: 50%;
opacity: 0;
pointer-events: none;
animation: ring-explode 0.6s ease-out;
}
@keyframes ring-explode {
0% { width: 0; height: 0; opacity: 1; }
100% { width: 160px; height: 160px; opacity: 0; }
}
.sparkle {
position: absolute;
left: 50%; top: 50%;
width: 3px; height: 3px;
background: #a55b12;
border-radius: 50%;
pointer-events: none;
}
/* ]]> */
</style>

<div class='action-buttons-wrapper'>

<button class='modern-btn btn-share' id='shareBtn' onclick='triggerShare()'>
<span>🚀</span> Paylaş
</button>


<button class='modern-btn' id='mainLikeBtn' onclick='triggerElegantLike()'>
<span id='btn-icon'>♡</span>
<span id='btn-text'>Beğen</span>
<span class='l-num' id='likeDisplay'>0</span>
</button>
</div>

<script type='text/javascript'>
// <![CDATA[
const postStorageKey = "v_data_" + window.location.pathname;

window.onload = function() {
initLikeSystem();
};

// --- PAYLAŞMA FONKSİYONU ---
function triggerShare() {
const shareData = {
title: document.title,
text: 'Bu harika yazıya göz atmalısın!',
url: window.location.href
};

const btn = document.getElementById('shareBtn');
createExplosion(btn); // Paylaşınca da patlama efekti olsun

if (navigator.share) {
// Mobil Paylaşım Menüsü (WhatsApp, Instagram, vs.)
navigator.share(shareData).catch(console.error);
} else {
// Masaüstü İçin Linki Kopyala
navigator.clipboard.writeText(shareData.url).then(() => {
const originalText = btn.innerHTML;
btn.innerHTML = '✅ Link Kopyalandı';
setTimeout(() => { btn.innerHTML = originalText; }, 2000);
});
}
}

// --- BEĞENİ SİSTEMİ ---
function initLikeSystem() {
let data = JSON.parse(localStorage.getItem(postStorageKey)) || { count: 0, voted: false };
updateView(data);
}

function triggerElegantLike() {
let data = JSON.parse(localStorage.getItem(postStorageKey)) || { count: 0, voted: false };
const btn = document.getElementById('mainLikeBtn');

if (!data.voted) {
data.count++;
data.voted = true;
createExplosion(btn);
} else {
data.count--;
data.voted = false;
}

localStorage.setItem(postStorageKey, JSON.stringify(data));
updateView(data);
}

function updateView(data) {
const btn = document.getElementById('mainLikeBtn');
const display = document.getElementById('likeDisplay');
const text = document.getElementById('btn-text');
const icon = document.getElementById('btn-icon');

display.innerText = data.count;

if (data.voted) {
btn.classList.add('active');
text.innerText = 'Beğendin';
icon.innerText = '❤';
} else {
btn.classList.remove('active');
text.innerText = 'Beğen';
icon.innerText = '♡';
}
}

// --- ANİMASYON MOTORU ---
function createExplosion(el) {
for (let i = 0; i < 2; i++) {
const ring = document.createElement('div');
ring.className = 'explosion-ring';
el.appendChild(ring);
setTimeout(() => ring.remove(), 600);
}
for (let i = 0; i < 10; i++) {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
el.appendChild(sparkle);
const angle = Math.random() * Math.PI * 2;
const velocity = 40 + Math.random() * 60;
const x = Math.cos(angle) * velocity;
const y = Math.sin(angle) * velocity;
sparkle.animate([
{ transform: 'translate(-50%, -50%) scale(1)', opacity: 1 },
{ transform: `translate(${x}px, ${y}px) scale(0)`, opacity: 0 }
], {
duration: 600,
easing: 'ease-out'
}).onfinish = () => sparkle.remove();
}
}
// ]]>
</script>
</b:if>

Bu butonun özelliği şu: Tıkladığında telefonlardaki veya bilgisayardaki orijinal paylaşım menüsünü (Native Share) açar. Eğer tarayıcı bunu desteklemiyorsa (eski masaüstü tarayıcılar gibi), otomatik olarak sayfa linkini kopyalar ve kullanıcıya bildiri verir. paylas,begen,butonu

Hiç yorum yok: