Blogger ve WP İçin jQuery Zoom Eklentisi

Blogger ve WP İçin jQuery Zoom Eklentisi - jQuery Zoom, blog veya web sitesinde ayrıntılı ve büyük resimler paylaşıldığında dokunma, tıklama veya resim üzerinde fareyi kaydırarak nesnelerin daha belirgin görüntülenmesini ve incelenmesini sağlayan eklentidir.

Özellikle satış ve satış ortaklığı yapan bloglar için, ürünleri daha detaylı inceleme imkanı sunarak  ürünlerin daha iyi tanıtılmasını sağlayabilirler. Blog'larda ve web sitelerinde bulunan görsellerin içerikler kadar değerliği olduğundan, trafik çekmek için en çok kullanılan SEO yöntemlerinden biridir. Mesela bu yayınımıza eklediğimiz resim sizce ilgi çekici mi? Lütfen cevap ve düşüncelerinizi yorum yaparak bizimle paylaşın.

Bknz: Blogger İçerik Resimlerini Düzenleme

Yayınlara eklediğiniz resimler ve nesneler blog yayınlarınızı zenginleştirdiği gibi blog'unuzun da kalitesini ve popülerliğini gösterir. Diğer bir taraftan da ürün pazarlaması yapan blog'lar yukarıda da bahsettiğimiz gibi ürünlerinin kalitesini öne çıkarmak için, ürün reklamlarında ve ürünü tanıtım yayınlarında görselliğe büyük önem vermeliler. Blog ürünlerinizi daha iyi tanıtmak ve inceleme imkanı sunmak için jQuery Zoom eklentisini ekleyin.

Blog'a Zoom Eklentisi Nasıl Eklenir?

Blog'unuza zoom eklentisini kurmak için, Blogger hesabınıza giriş yapın ve eklemek istediğiniz blog'un kumanda panelinde sol tarafta bulunan menüden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın. Açılan sayfada aşağıdaki adımları uygulayın.

1- Klavyenizin CTRL+F tuşları yardımıyla ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.

.zoom{position:relativedisplay:inline-block;}
.zoom:after{content:'';position:absolute;width:33px;display:block;height:33px;top:0;right:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1KE-4B_RnA_7IbyxomotJVuNSLMUpvAA6qvhdtMNOyOuF6X8tLzk3c3yBTQzXdF6cZ7-WqlO6285hDwiTdrLWmZPY5jpHBVqxJTVSFwZ_JJ3Hcvq9Fo-dR2_hIvtz3K1Ga7W4yFW9TvA/s1600/icon.png)}
.zoom img{display:block;object-fit:cover}
.zoom img::-moz-selection{background:transparent}
.zoom img::selection{background:transparent}
#img1{margin-right:5px}
#img2 img:hover{cursor:url(grab.cur),default}
#img1 span,#img2 span{top:5px;position:absolute;right:30px;color:#444;}
#img2 img:active{cursor:url(grabbed.cur),default}

Yukarıdaki CSS kodları tüm blog'lara uyum sağlamayabilir. Bu nedenle, yukarıdaki CSS kodlarında değişiklik yaparak blog'unuza uygun olarak düzenleyebilirsiniz.

2-  Aşağıdaki jQuery kodunu </body> kodunun bir satır üzerine ekleyin.

<script src='https://rawgit.com/jquerycods/jquery/master/zoom.js'></script>

Yukarıdaki eklediğiniz jQuery kodunun hemen bir satır altına aşağıdaki kodu ekleyin ve şablonu kaydedin.

<script>
if ($ && $.fn.zoom) {$('#img1').zoom();$('#img2').zoom({ on:'grab' });}
</script>

3- Blog'unuzda paylaştığınız resimlerin veya yayınlarınıza eklediğiniz ürün resimlerinin URL bağlantılarını aşağıdaki HTML kod içerisinde belirtilen src resim dosyası bağlantı yoluna ekleyerek blog yayınlarınızda kullanabilirsiniz.

<span class='zoom' id='img1'>
<span>Ürün adı</span>
<img src='RESİM-URL' width='370' alt='RESİM-ETİKETİ' height="213"/>

</span><span class='zoom' id='img2'>
<span>Ürün adı</span>
<img src='RESİM-URL' width='370' alt='RESİM-ETİKETİ' height="213"/>
</span>

Yukarıdaki HTML kod içerisinde 2 farklı zoom efekti içeren kodlar var. Birinci kod, img1 HTML içerisine eklediğiniz resimlerin üzerine dokunduğunuzda yada fareyi üzerinde gezdirdiğinizde resim büyür ve resimdeki nesneler daha ayrıntılı ve belirgin olarak görünür. İkinci kod, img2 HTML içerisinde eklediğiniz resimlerin üzerine basılı tutarak yada fare ile sol tıklama tuşunu basılı tutarak üzerinde gezdirdiğinizde birinci kodda olduğu gibi resimleri daha ayrıntılı incelemek için zoom efektinden faydalanılır.

Ön İzleme

Diğer önemli bir bilgi de yukarıdaki HTML kod içerisine eklediğiniz resimlerin boyutlarını ayarlayabilirsiniz, fakat eklediğiniz resimler belirttiğiniz resim boyutlarından büyük olmalıdır.

Uyumlu tarayıcılar: Chrome, Safari, Firefox, Internet Explorer 8+ ve Opera.

jQuery Zoom eklantisini WordPress sitelerinde de kullanabilirsiniz. Bu yazımız ile ilgili daha fazla bilgi almak veya görüşlerinizi bizimle paylaşmak için yorum bırakabilirsiniz.