Logonuzu Saydamlaştırıp İleri Geri Hareket Ettirmek

Güzel bir eklenti ile karşınızdayız. Bu eklentimizde ise site logonuzu hem saydamlaştırıp hemde ileri geri hareket etme efektini uygulayacağız. Uzun zamandır bana gelen mailler bu eklenti üzerineydi. Bende müsait olduğum için paylaşmak istedim. Eklenti basit ama kod bilginiz varsa yapabileceksiniz. İsterseniz konuya geçelim.

Logo kodlarımızı buluyoruz örn: <img src='Logo Url' class='logo'>
Bir diğer yöntem örn: <div class='logo'> <img src='Logo Url'> <div>

Bu verdiğim 2 kodda turuncu ile işaretlediklerimden birini kendi temanızda logonuzun bulunduğu kısma ekliyoruz yukarıda örnekte ki gibi.

Sıra geldi css kodlarına aşağıda ki kodları blogger css bölümüne ekliyoruz.
.logo a:link{ transition: all .3s linear; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -o-transition: all .3s linear; } .logo{width:350px;height:120px;text-align:left;color:#fff;overflow:hidden;float:left;-webkit-transition:all .9s ease-out;-moz-transition:all .9s ease-out;-ms-transition:all .9s ease-out;-o-transition:all .9s ease-out;transition:all .9s ease-out} .logo a:hover{ filter: blur(1.5px); -moz-filter: blur(1.5px); -webkit-filter: blur(1.5px); -o-filter: blur(1.5px); } .logo:hover{margin-left:30px;-webkit-transition:all .9s ease-out;-moz-transition:all .9s ease-out;-ms-transition:all .9s ease-out;-o-transition:all .9s ease-out;transition:all .9s ease-out}

Temamızı kaydedip önizlemesine bakıyoruz ve tamamlandı.