Blogger sitenizde uzun kod bloklarını, geniş metinleri veya ziyaretçilerinizin kopyalamasını istediğiniz uzun yazıları sayfayı kapatmadan, şık bir düzen içinde sunmak isteyebilirsiniz. Bunun en pratik yolu kaydırılabilir metin kutuları (Scroll Box) kullanmaktır.
Bu rehberde, Blogger yazılarınızın içine hem dikey hem de yatay kaydırma çubuklarına sahip, modern ve minimalist bir metin kutusunu adım adım nasıl ekleyeceğinizi öğreneceksiniz.
Adım Adım Kaydırılabilir Metin Kutusu Oluşturma
Kaydırılabilir metin kutusu oluşturmak için saf HTML ve CSS kodlarından yararlanacağız. Blogger'ın yeni yazı editörü bu işlemi oldukça kolaylaştırmaktadır.
1. Adım: Blogger Yazı Editörünü Açın
Blogger panelinize giriş yapın ve yeni bir yazı oluşturun ya da düzenlemek istediğiniz mevcut bir yazınızı açın.
2. Adım: HTML Görünümüne Geçiş Yapın
Yazı editörünün sol üst köşesinde bulunan Kalem simgesine (Oluşturma Görünümü) tıklayın.
Açılan menüden HTML Görünümü seçeneğini seçin. Bu aşamada yazınızın arka planındaki kod yapısını göreceksiniz.
3. Adım: Metin Kutusu Kodlarını Ekleyin
Kutuyu yazınızın tam olarak neresinde göstermek istiyorsanız, o satıra gelin ve aşağıdaki kod bloğunu yapıştırın:
<div style="background-color: #f7f9fa; border: 1px solid #e1e8ed; border-radius: 8px; padding: 15px; max-height: 200px; overflow-y: auto; overflow-x: auto; font-family: 'Courier New', Courier, monospace; white-space: pre; color: #333;">Bu araya kaydırılmasını istediğiniz uzun metni, kodları veya açıklamaları ekleyin. Metin uzadıkça kutunun sağında otomatik olarak bir kaydırma çubuğu belirecektir.</div>
4. Adım: Özelleştirme ve İçerik Girişi
Kodun içindeki
"Buaraya kaydırılmasını istediğiniz..."kısmını silerek kendi içeriğinizi yazın.Dilerseniz kutunun görünümünü şu ayarlarla değiştirebilirsiniz:
max-height: 200px; -> Kutunun maksimum yüksekliğidir. İçerik 200 pikseli geçtiğinde kaydırma çubuğu aktif olur. Değeri isteğinize göre değiştirebilirsiniz.
background-color: #f7f9fa; -> Kutunun arka plan rengidir. Temanıza uygun bir renk kodu yazabilirsiniz.
border-radius: 8px; -> Kutunun köşelerinin modern ve oval görünmesini sağlar.
5. Adım: Kontrol Edin ve Yayınlayın
Sol üstteki menüden tekrar Oluşturma Görünümü seçeneğine dönerek kutunun genel hatlarını inceleyin.
Her şey yolundaysa yazınızı Önizle butonu ile test edin ve ardından Yayınla diyerek takipçilerinizle paylaşın.
Blogger, kaydırılabilir metin kutusu, HTML kod kutusu