Blogger'da Canlı Bağlantı Önizleme Özelliği Ekleme

Blogunuzdaki linklerin üzerine gelindiğinde küçük bir pencerede o sayfanın canlı halini göstermek ister misiniz? Bu basit JavaScript kodu sayesinde, okuyucularınız sayfadan ayrılmadan tıkladıkları linkin içeriğine göz atabilirler.

Blogger panelinizde Tema > Özelleştir > HTML'yi Düzenle yolunu izleyin. Ardından </body> etiketini bulun ve hemen üzerine aşağıdaki kodu yapıştırın:

<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
const style = document.createElement('style');
style.innerHTML = `
   #link-preview-box {
      position: absolute; display: none; width: 250px; height: 200px;
      background: #fff; border: 1px solid #ddd; border-radius: 8px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.15); z-index: 9999;
      overflow: hidden; pointer-events: none;
        }
   #link-preview-box iframe {
      width: 133.33%; height: 133.33%; border: none;
      transform: scale(0.75); transform-origin: 0 0;
        }
    `;
    document.head.appendChild(style);

    // Önizleme Kutusu Oluşturma
    const previewBox = document.createElement('div');
    previewBox.id = 'link-preview-box';
    document.body.appendChild(previewBox);

    // Linkleri Takip Etme
    const links = document.querySelectorAll('.post-body a');
    links.forEach(link => {
    link.addEventListener('mouseenter', function(e) {
    previewBox.innerHTML = '<iframe src="' + this.href + '" scrolling="no"></iframe>';
    previewBox.style.display = 'block';
        });
    link.addEventListener('mousemove', function(e) {
    previewBox.style.left = (e.pageX + -120) + 'px';
    previewBox.style.top = (e.pageY + 20) + 'px';
        });
    link.addEventListener('mouseleave', function() {
    previewBox.style.display = 'none';
    previewBox.innerHTML = '';
        });
    });
});
//]]>
</script>

Eğer kutunun boyutunu değiştirmek isterseniz kod içerisindeki `width` (genişlik) ve `height` (yükseklik) değerleriyle oynayabilirsiniz.

Yorum yaz