Web Günlüğü » CSS » CSS'de Resim Üzerine Gelindiğinde Kaydırma Eklentisi
CSS'de Resim Üzerine Gelindiğinde Kaydırma Eklentisi
Kategori :
CSS
Merhaba arkadaşlar. Bugün sizlerle kendi blogumda da kullanıyor olduğum oldukça güzel ve kullanışlı kişisel bloglar için uygun ve hareket katan bir eklenti paylaşacağım. Kurulumu oldukça basit olan bu eklenti sayesinde ziyaretçilerinizin ilgisini çekebilir ve blogunuzun hoş bir görüntü elde etmesine katkınız olabilir.
Sözü fazla uzatmadan bu eklentimizin nasıl kullanılacağı hakkında bilgi vermek istiyorum.
Öncelikle yapmamız gereken Blogger kullanıyor isek şablonumuzu açıp aşağıdaki kodu bulalım;<div class='logo'><img src='Logo Url'/></div> Logo haricindeki resimlerde kullanmak için resmi yayına eklersen <img tagının önüne class='logo' tagını eklemelisiniz aksi taktirde eklenti çalışmayacaktır.
Bütün işlemimiz bundan ibaret yapamadığınız yerler için yorum formunu kullanabilirsiniz.
Sözü fazla uzatmadan bu eklentimizin nasıl kullanılacağı hakkında bilgi vermek istiyorum.
Öncelikle yapmamız gereken Blogger kullanıyor isek şablonumuzu açıp aşağıdaki kodu bulalım;
]]></b:skin>
Üzerine aşağıda vermiş olduğum kodu ekleyelim. .logo a:link{
transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
}
.logo a:hover{
filter: blur(1.5px);
-moz-filter: blur(1.5px);
-webkit-filter: blur(1.5px);
-o-filter: blur(1.5px);
}
İşlemleri sorunsuz bir şekilde yaptıktan sonra eklentimiz blogumuza eklenmiş demektir. Wordpress altyapısında olan bloglar içinde aynı şekilde yukarıda bulunan css kodunu wordpress panelinden css bölümüne ekleyin. Eklentiyi blogunuzda benim kullanıyor olduğum gibi logunuzu hareket ettirmek istiyorsanız aşağıdaki kodu uygulayabilirsiniz; Bütün işlemimiz bundan ibaret yapamadığınız yerler için yorum formunu kullanabilirsiniz.
Yorumlar