Düz renk yerine bir arka plan resmi kullanmak, makalelerimizi daha kişisel hale getirmek için mükemmel bir katkı olabilir. Bugün her gönderide otomatik olarak ilk resmin arka plan olarak nasıl kullanılacağını göstereceğim.
Otomatik arka planı etkinleştir
Blogger, duyarlı bir arka plan eklememize olanak tanıyan harika bir global eklentiye sahiptir. Javascript gerekmez, sadece şablonunuzu HTML modunda düzenleyin ve </head> ifadesini aratın, bunun üzerine aşağıdaki kodu yapıştırın:
<b:if cond='data:view.isPost and data:view.featuredImage'>
<b:include
name='responsiveImageStyle'
data='{ image: data:view.featuredImage, selector: "body" }'/>
<style>
body {
background-repeat: no-repeat; /* tekrarlama */
background-size: cover; /* boyut */
background-position: top center; /* hizalama */
background-attachment: fixed; /* kaydırma */
}
</style>
</b:if>İşte bu kadar, şimdi makalelerinizden herhangi birine gidin ve makalenin ilk resmine dayalı olarak yanıt veren otomatik bir arka plan görmeye başlayacaksınız. Eğer yazıda resim yoksa hiçbir şey görmeyeceksiniz.
Açıklama
Kodun iki şeyi kontrol eden bir koşulu vardır. Birincisi, bunun bir makale olup olmadığı data:view.isPost ve ikincisi de makalenin bir resim içerip içermediği data:view.featuredImage. Her iki durum da karşılandığında, arka planı oluşturmaya devam ederiz.
Arka plana gelince, eklediğimiz kod, kullanıcının cihazına bağlı olarak değişecek bir arka plan oluşturacaktır. Bu şekilde sayfanız bir masaüstü bilgisayardan görüntülenirse, daha yüksek çözünürlüklü bir görüntü yükleyecektir. Ancak mobil cihazlarda görüntü çok daha küçük olacaktır. Bu blogumuzun optimizasyonunu korumamıza çok yardımcı olur.
Kişiselleştir
<style> etiketi arka planı biçimlendirmekten sorumludur, kod da açıklamalar bıraktım. Böylece değiştirmek istemeniz durumunda hangi özelliğin hangi işleve sahip olduğu anlaşılacaktır. Yine de aşağıda neler yapabileceğinizi biraz daha açıklıyorum.
Tekrarlama
Varsayılan olarak, yapıştırdığımız kod görüntüyü herhangi bir eksende tekrarlamaz, herhangi bir nedenle görüntünün tekrarlanmasına ihtiyacınız varsa, bu kısmı arayın ve no-repeat ifadesini repeat olarak değiştirin:
background-repeat: no-repeat; /* tekrarlama */Boyutlar
Arka plan pencerenin kullanılabilir boyutunun tamamını kaplayacak ve boşluk bırakmayacaktır. Herhangi bir nedenle otomatik bir boyut yerine sabit bir boyut ayarlamanız gerekiyorsa, bu kısmı bulun ve cover seçeneğini değiştirin:
background-size: cover; /* boyut */Pozisyon
Varsayılan konum 'üst orta' olarak ayarlanmıştır. Bunu değiştirmek istiyorsanız, bu kısmı bulun ve top center ifadesini, örneğin center gibi başka bir konumla değiştirin:
background-position: top center; /* hizalama */Sabit arkaplan
Varsayılan olarak arka plan sabit bir konuma sahiptir, yani sayfa kaydırılırken tarayıcı penceresindeki yerini koruyacaktır, bunu değiştirmek istiyorsanız, bu bölümü bulun ve fixed öğesini scroll olarak değiştirin:
background-attachment: fixed; /* kaydırma */Sonuç
Oldukça basit bir numara olmasına rağmen, umarım faydalı bulursunuz. Eğer faydalı bulduysanız paylaşmayı unutmayın. Uğradığınız için teşekkürler ve herhangi bir sorunuz varsa yorum bırakın.
