Cum adaugam in blog butoane plutitoare pentru retele sociale

Ca sa atragi la prima vedere vizitatorii blogului tau este vital sa ai un sablon care sa arate bine, iar butoanele pentru share atragatoare pot sa-i faca pe cititorii tai sa-ti distribuie continutul in toate mediile sociale importante.  Vei gasi mai jos codul pentru a adauga butoanele de share pe blogul sau site-ul tau. E foarte simplu sa faci asta, pur si simplu navighezi in Aspect----Adaugati un obiect gadget si lipesti codul de mai jos. Salvati si asta e tot! 

Codul de copiat:

<script>
// Adaugă CSS
const style = document.createElement('style');
style.textContent = `
.floating-share-buttons {
    position: fixed;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.floating-share-buttons a {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 18px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    transition: transform 0.3s;
}
.floating-share-buttons a:hover {
    transform: scale(1.1);
}
.share-fb { background: #3b5998; }
.share-tw { background: #1da1f2; }
.share-wa { background: #25d366; }
.share-li { background: #0077b5; }
.share-em { background: #ea4335; }
@media (max-width: 768px) {
    .floating-share-buttons {
        left: 10px;
        bottom: 80px;
        top: auto;
        transform: none;
        flex-direction: row;
    }
}
`;
document.head.appendChild(style);

// După încărcarea paginii
window.addEventListener('load', function() {
    const url = encodeURIComponent(window.location.href);
    const title = encodeURIComponent(document.title);
    
    const buttons = `
        <a href="https://facebook.com/sharer.php?u=${url}" target="_blank" class="share-fb" title="Share on Facebook">f</a>
        <a href="https://twitter.com/intent/tweet?url=${url}&text=${title}" target="_blank" class="share-tw" title="Share on Twitter">𝕏</a>
        <a href="https://wa.me/?text=${title}%20${url}" target="_blank" class="share-wa" title="Share on WhatsApp">WA</a>
        <a href="mailto:?subject=${title}&body=${url}" class="share-em" title="Share by Email">✉</a>
    `;
    
    const container = document.createElement('div');
    container.className = 'floating-share-buttons';
    container.innerHTML = buttons;
    document.body.appendChild(container);
});
</script>