CSS ile görselleri tıklanamaz yapma

CSS ile görselleri tıklanamaz yapma

Çözümü için kafa yorduğumuz ama aslında çok basit bir CSS kodu ile halledebildiğimiz bir konuya yer vermek istedim bu yazımda; resimleri, görselleri tıklanamaz (unclickable, yazmasında okunması da zormuş 🙂) yapma. Tabi bu kodun Blogger yayınlarında yer alan görsellere de uygulanabilir olması bizim asıl konumuz.

Wordpress ve benzeri gibi sistemler için koda erişmek isteyenler;

pointer-events: none

kod burada, yazıyı sonuna kadar okumanıza gerek yok. Blogger kullanan dostlarım ise okumaya devam edebilirler.

Bildiğiniz üzere Blogger bloglarındaki yayınlara eklenen görsellerin görünümünde lightbox seçeneği mevcut.

Blogger Lightbox

Görselde ki gibi Ayarlar kısmından lightbox seçeneğini aktif etmek mümkün. Aktif edilen bu seçenekle yayınlara eklenen görsellere tıklandığında slider gibi güzel bir görüntü ile resimler sayfadan ayrılmadan gösteriliyor.

Blogger Lightbox

Lightbox seçeneği aktif olmadığı zaman ise görsellere tıklandığında, sadece görsel linki açılıyor. Bunun da açıkçası pek kullanışlı olmadığını belirtmek gerekir. Zaten lighbox kullanmıyorsak resimlerin de tıklanmasını istemiyoruz demektir. Ama maalesef tıklanıyor. Bunu engellemek tabi ki mümkün.

Her görsel eklediğimizde HTML kısmında; 

<a href="TIKLANDIĞINDA-GİTTİĞİ-LİNK"><img src="EKLENEN-GÖRSEL-LİNKİ"/></a>

bu şekilde bir kod oluşuyor. Eğer görseli tıklanmaz yapmak istiyorsak kırmızı renkle belirttiğim kısmı silmemiz gerekiyor. Eskiden bu kısmı sildiğimizde Blogger otomatik olarak yeniden link ekliyordu. Şimdi de öyle mi bilmiyorum ama yine de her eklediğimiz resim için bu şekilde kodları silmemiz zaman kaybından başka bir şey değil.

İşte bu noktada ilk paragrafta yer verdiğim CSS kodu işimizi kolaylaştıracaktır. Peki bu kodu nasıl Blogger (blogspot) blogumuza ekleriz?

Yapılması gerekenler oldukça basittir dostlarım. Blogger kullanıcı panelimizden Tema ve ardından HTML Düzenle seçenekleri ile kodların yer aldığı sayfayı ulaşıyoruz. Daha sonra Ctrl F yardımıyla;

.post-body img

kodunu bulmamız gerekiyor. Bulduğumuz bu kodun hemen altına ise;

pointer-events: none

kodunu ekliyoruz. Daha sonra değişiklikleri kaydedip blogumuzu kontrol edebiliriz. Eklediğimiz bu kodla birlikte Blogger yayınlarımızda ki (post) görseller artık tıklanamaz (unclickable) olacaktır.