Blogger Css ile Kar Efekti Yapma

Aralık 2013 | Tolga Gönül, Bayan Kuaförü

Blogger Eklentileri
Sizlerde sitelerinize Kar yağdırmak istiyorsanız bu verdiğimiz eklentimizi kullanmanızı tavsiye ederis diğer kar efektlerine göre çok farklı bir kar efektdir.

Genellikle kar efekti javascript ile yapılıyor ve bu bazen sitemizi kasabilir yani donmalar yapabiliyor o yüzden bu konuda baya bir araştırma yaptım diye bilirim... Ve yabancı bir sitede gördüğüm eklentiyi Deneyip sizlerle paylaşmak istedim... Bu kod Css ile yapıldığı için sitenizde yavaşlatma yaratmaz.
Biliyorsunuzki buna benzer bir çok eklenti mevcut tabiki en çok kullanılan eklenti kar efekti.
Kar efektinin de bir çok değişik şekilde hazırlanmış eklentileri de mevcuttur.

Örneklerine burdaki siteden baka bilirsiniz.

Daha iyi anlıyabilmeniz için düz bir şablona hazırlanmış temadan incileyebilirsiniz.

Demo

Bu eklenti sadece css ile hazırlanmıştır çok basit ve kolay Bu eklentiyi eklemeniz için öncelikle Css kodlarımızı ekliyices

@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px; }
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; }
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px; }
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; }
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px; }
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; }
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px; }
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; }
}

#falling-snow {
background-image: url(< a href='http://4.bp.blogspot.com/-26HXwn0tlWA/UaJZYbdbDnI/AAAAAAAADfA/AeiBdAIR0zU/s1600/snow.png' target='_blank' rel='nofollow' title='4.bp.blogspot.com/-26hxwn0tlwa/uajzybdbdnı/aaaaaaaadfa/aeibdaır0zu/s1600/snow.png'> 4.bp.blogspot.com/-26hxwn0tlwa/uajzybdbd... < /a> ) , url(< a href='http://4.bp.blogspot.com/-8RALuvldFh8/UaJZY1tUptI/AAAAAAAADfM/rIaHhS2A4yQ/s1600/snow3.png' target='_blank' rel='nofollow' title='4.bp.blogspot.com/-8raluvldfh8/uajzy1tuptı/aaaaaaaadfm/rıahhs2a4yq/s1600/snow3.png'> 4.bp.blogspot.com/-8raluvldfh8/uajzy1tup... < /a> ) , url(< a href='http://4.bp.blogspot.com/--AYxx7PegOc/UaJZYvy9wVI/AAAAAAAADfE/0Lp5NLrudxc/s1600/snow2.png' target='_blank' rel='nofollow' title='4.bp.blogspot.com/--ayxx7pegoc/uajzyvy9wvı/aaaaaaaadfe/0lp5nlrudxc/s1600/snow2.png'> 4.bp.blogspot.com/--ayxx7pegoc/uajzyvy9w... < /a> ) ;
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}


Ve sonrasında arkadaşlar Aşağıdaki kodu < body> kodunun hemen altına eklemeniz. Bu bazı temalarda değişebiliyor arkadaşar eğer body kodunun altına eklediniz ve çalışmadıysa sonrasında #sidebar kısmının sonuna eklemeniz Benim temada Bu şekilde çalıştı
Yapamayan arkadaşlarımız için yine yardımcı olmaya çalışıcas...

< div id='falling-snow'>


en sonunda ise busefer < /body kodunu bulup hemen üstüne < /div> kodunu ekleyin ve kaydedin

işlem bukadar. Yapamadığınız zaman konu altına belirtiniz.

Kar efektlerini yoğunlaştırmak istiyorsanız arkadaşlar css kodları arasında
4.bp.blogspot.com/-26hxwn0tlwa/uajzybdbd...

burdaki linki bununla değiştirmeniz.

u1312.hizliresim.com/1j/p/vrr5t.png

Daha fazlası sohbetcheblog.net adresindedir.