Bir İçeriği Masaüstü Web Sitesinde Gösterip Mobil Web Sitesinde Gizlemek

Bu yazıda sizlere biraz kodlardan bahsetmek istiyorum. Telefondan internete girme rakamları arttıkça mobil internet sitelerinin önemi de arttı. Bu açıdan mobil internet sitesi zorunlu hale geldi. Hem bilgisayardan internet sitenize girildiği gibi hem de telefondan girildiğini unutmayın. Peki web sitenizin mobil sürümü telefonlara ne kadar uygun. Bu yazıda sizlere bazı örnek kodlarla mobil web sitenizi düzenlemek konusunda Türkçe kaynak olmayan bir bilgiden bahsedeceğim.

Amaç ne?

Sitenize bir içerik eklemek istiyorsunuz. Ama bu içeriğin telefondan internet sitenize girildiğinde görülmesini istemiyorsunuz? Ya da bunun tam tersi. Bu örnek için daha açıklayıcı olursak sitenizde bir reklam yayınlamak istiyorsunuz ama bu reklamın boyutları oldukça büyük. Bu nedenle mobil sürümde düzgün şekilde görülmesinin imkanı yok. Peki bu reklamı masaüstü web sitesinde gösterip mobil sürümde nasıl engellersiniz?

@media screen only kodlarıyla bunu basit bir şekilde yapacağız. Blogger tabanlı bir site üzerinden anlatmaya devam edeceğim. Wordpress ve diğer kodlama dillerinde kullanılabilir.

<!– Solda Sabit Reklam –>
<div id=”soldasabitdesktop” style=”position: absolute; left: 165px; top: 284px; z-index: 1;”>ADSENSE REKLAM KODU</div>
<!– Solda Sabit Reklam Sonu –>

Kırmızı alanları değiştirip sitenize uyguladığınızı varsayıyorum. Bu kod sol kısımda sabit reklam görünmesini sağlar. Hem mobil sürümde hem de masaüstü sürümde bu reklam görünür. Peki masaüstü sürümde görünmesini etkilemeden mobil sürümde bunu nasıl yok ederiz? Aşağıdaki kodları <b:skin> kodundan sonra uygun bir yere ekleyin.

@media only screen and (max-width:768px){
#soldasabitdesktop {
display: none;}
}

Kodun açıklaması şudur. “Eğer soldasabitdesktop id’li içerik 768px çözünürlükten daha düşük bir çözünürlükte görüntüleniyorsa gösterme” Bunun en basit açıklaması da cep telefonuyla görüntüleniyorsa görünmeyecek olmasıdır. Aşağıda hem mobil hem de masaüstü görselini veriyorum. Aktif şekilde uygulanmış ve denenmiştir. Ayrıca oyunda.org adresinden hem mobil hem de masaüstünden girerk deneyiniz.

Bir İçeriği Masaüstü Web Sitesinde Gösterip Mobil Web Sitesinde Gizlemek Bir İçeriği Masaüstü Web Sitesinde Gösterip Mobil Web Sitesinde Gizlemek

Peki Wordpress için işin içinden çıkamadınız mı? Benim kodu uyarladığım yabancı siteden bahsedeyim. https://www.webdesignersacademy.com/show-and-hide-different-content-on-mobile-devices-desktops/ adresinden detaylı açıklamayı bulabilirsiniz.

Son değerlendirme, burada amacımız sadece reklam için geçerli değil herhangi bir içeriği herhangi bir web sürümünde gizleyip göstermedir. Bahsi geçen reklamı sadece mobil sürümde gösterip masaüstü sürümde gizleyebilirsiniz. Bir yazı, bir resim, bir kod, bir reklam, bir uyarı gizlenip gösterilebilir. Gerisi hayal gücünüze kalmıştır.

2 Comments

  1. Buğra Arslan avatarı Buğra Arslan dedi ki:

    Hocam Sağolasın çok aradım bir tek sende buldumreklamları mobil kısımdan götürmek için uzun uğraşlar vermiştim. Ellerine sağlık…

  2. alisavasan avatarı alisavasan dedi ki:

    valla çok teşekkürler ustadım internette 50 tanesini denedim calişmadı bi seninki çalıştı saolasın

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir