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'>
    <!-- PAYLAŞ BUTONU (SOLDA) -->
    <button class='modern-btn btn-share' id='shareBtn' onclick='triggerShare()'>
        <span>🚀</span> Paylaş
    </button>

    <!-- BEĞEN BUTONU (SAĞDA) -->
    <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