Kaydırma Çubuğu ve Seçilen Metin Alanı Rengi Nasıl Değiştirilir

Blog tasarımı yaparken mümkün olduğunca onu özelleştirmek ve sadece kendimize özel olmasını sağlayabilmek için bir takım çalışmalar yapmışsınızdır. Çünkü bu haliyle ziyaretçiler tarafından hatırlanmak, özel tasarıma sahip olmak önemlidir.

Tabi, temanızı özelleştirirken çeşitli blogger eklentileri ekleyerek bu işlemi yapmak ilk akla gelen. Fakat bu yazımda bir adım daha ileriye konuyu taşıyarak tarayıcı kaydırma çubuğu ve seçili metin alanı rengini değişirme konusunu işlemek istiyorum.

Ne demek istiyorum?

Bildiğiniz gibi tarayıcıda yüklenen sayfaları aşağıya doğru sürüklemek için sağ tarafta bir çubuk yer alır. Bizle bu çubuğa basılı tutarak sayfanın alt kısımlarının görüntülenmesini sağlarız.

Bu kaydırma çubuğu varsayılan olarak gri renge sahiptir. Bu yazımla birlikte küçük bir CSS kod yardımıyla bunu gerçekleştireceğiz.

İkinci olarak da seçili metnin arkaplan rengini değiştirmek olacak. Bildiğiniz gibi okuyucularımız yazımızı okurken odaklandığı kısmı belirgin hale getirmek için fare ile ilgili metin kısmını seçerler. Buradaki arka plan rengini kendi tasarımınıza göre nasıl değiştirebiliriz onu inceleyeceğiz. Detay için resme bakabilirsiniz.

►►Blogger e-posta aboneliği eklentisi

1 – Kaydırma çubuğu rengi nasıl değiştirilir

Blogumuzun kodlarını düzenlediğimiz Tema kısmına gelip, Html Düzenle yi seçin.
Aşağıdakii kodu Ctrl + F tuşları yardımıyla bulun.
]]></b:skin>
Bu kodun üzerinde aşağıdaki kodları yapıştırın.

*--------- Scrollbar Customization --------- */
::-webkit-scrollbar {
width:8px;
height:8px;
}
::-webkit-scrollbar-track {
background:#FFF;  /*------This is background color of scrollbar track ------*/
-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
border:1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
background:#c0392b;  /*------Thumb color ------*/
-webkit-box-shadow:inset 1px 1px 2px rgba(155,155,155,0.4);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow:inset 1px 1px 10px rgba(0,0,0,0.4); /*------Shadow on hover------*/
}
::-webkit-scrollbar-thumb:active {
background:#333;   /*------Thumb color when it is active------*/
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.4);
}

Son olarak şablonunuzu kaydedin. Sitenizi chrome da görüntülediğinizde sağ taraftaki çubuğun renginin değiştiğini göreceksiniz.

2 – Seçili metin alanı rengini değiştirin

Kimi zaman metnin bir kısmına odaklanmak, birine göstermek ya da kopyalamak için alanı fare ile seçeriz. Burada daha uyumlu bir sonuç ortaya çıksın diye alan rengini değiştirebilirsiniz:

Yukarıdaki gibi kodları düzenleyeceğiniz şablon düzenle kısmına gelin.
Aşağıdakii kodu Ctrl + F tuşları yardımıyla bulun.
]]></b:skin>
Bu kodun üzerinde aşağıdaki kodları yapıştırın.

/*--------- Text selection Customization ------------- */
::selection {
background:#e67e22; /*------This is the background color on selection-----*/
color:#fff; /*------This is text color on selection-----*/
}
::-moz-selection {
background:#e67e22; 
color:#fff
}
::-webkit-selection {
background:#e67e22;
color:#fff
}