Blogger Kaydırma Çubuğunu, Scrollbarı Özelleştirme

Bu yazımda blogunuzu özelleştirmede, renklendirmede çok fazla etkisinin olacağını düşündüğüm bir düzenlemeyi paylaşacağım sizlerle. Yapılışı çok basit hem istediğiniz gibi özelleştirebiliyorsunuz hem de bu düzenleme sadece kaydırma çubuğunun görüntüsü ve renklerini etkiliyor yani hiç bir şekilde bir bağlantıyla veya dıştan gelen bi kodla blogunuzun açılış, yükleme hızını negatif etkilemiyor. Bu scrollbar özelleştirmesi mobil versiyonunu da sıkıntısız değiştirmektedir ve internette olan bu özelleştirmelerin çoğu gibi kaydırma hızını değiştirmek gibi bir girişimde bulunmaz bu akıllı eklememiz, standart hızdadır. Detaylarını yazımın devamında okuyabilirsiniz.

Blogumun Scrollbarını Nasıl Renklendiririm?

NOT : Bu eklentiyi blogunuza eklerken blogunuzun şablonunda birkaç ekleme, çıkarma yapacağız ve bu düzenlemeleri yaparken yanlış bir şey yaptığınız taktirde sıkıntı olmaması ve rahat bir şekilde düzenleme yapabilmek için şablondan şablon yedeğini almayı unutmayınız.

Yapılacak : Şablondan HTML'yi Düzenleye tıklayın ardından Ctrl + F yardımıyla  ]]></b:skin> kodunu bulun ve bir satır üzerine alttaki kodu yapıştırın.

kod:

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

TBY Kaydırma Çubuğu Özelleştirme Kodu TBY

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  */

/* Webkit Scrollbar */

::-webkit-scrollbar {

width: 10px;

}

::-webkit-scrollbar-track {

background: #C8BBBE;

-webkit-box-shadow: inset 1px 1px 2px #E0E0E0;   

border: 1px solid #D8D8D8;

}

::-webkit-scrollbar-thumb {

background: #4CC417;

-webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);  

}

::-webkit-scrollbar-thumb:hover {

background: #59E817;

}

::-webkit-scrollbar-thumb:active {

background: #00FF00;

-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);

}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

TBY Kaydırma Çubuğu Özelleştirme Kodu TBY

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  */

 Kodun Düzenlemeleri

Kodlarda düzenleme yaparken renk kodları lazım olduğunda HTML Renk Kodları İsimleriyle Tüm Renkler adlı yazıma bakabilirsiniz.

1. düzenleme : width: 10px; yazısındaki 10 değeri kaydırma çubuğunun genişliğini belirler.

2. düzenleme : background: #C8BBBE; yazısındaki #C8BBBE kodu çubuğun arka planının, yatağının renk kodudur

3. düzenleme : background: #4CC417; yazısındaki #4CC417 kodu tıklanmadığında, basılmadığındaki scrollbar butonu renk kodudur.

4. düzenleme : background: #59E817; yazısındaki #59E817 kodu scrollbar butonuna basmayıp üzerine fare ile geldiğinde beliren rengin kodudur.

5. düzenleme : background: #00FF00; yazısındaki #00FF00 kodu kaydırma butonuna tıklayıp, basıp kaydırdığımızda beliren rengin kodudur.

Yapamadığınız veya hata aldığınız yerleri yorumdan belirterek yardım alabilirsiniz. Blogger Standart Devamını Oku Bölümünü Değiştirme adlı yazım da ilginizi çekebilir bu düzenlemenin faydasını görmeniz dileğiyle...
                                                                                          Kolay gelsin, iyi bloglar!

Arama açıklaması:

blogger üzerindeki kaydırma nasıl değiştirileceği blogger scrollbar renklendirme blog blogger kaydırma çubuğu kaydırma çubuğu değiştirme how to change scrollbar on blogger özelleştirme blogger scrollbar css değiştirme blogger scrollbar jquery eklemek blogspot kaydırma çubuğu ayarları div scrollbar css ekleme blog css scrollbar style eklentisi blogger

Yazar Hakkında

Merhaba ben Onur Gücer, hobi olarak uzun zamandır blog yazmaktayım ve bu blogda sizlere deneyimlerimi paylaşıyorum.. İyi günler, iyi bloglar.. (: