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