Tumblr temanızda, fare resmin üzerine geldiğinde resmi net bir şekilde görüntüleyen, ancak fare resmin üzerine gelmediğinde resim bulanık görünen bir fotoğraf efekti oluşturabilirsiniz. Öncelikle efekt için kullanacağınız görselleri hazırlayın. Ardından Tumblr temanıza iki kod parçacığı ekleyin. Kodun Tumblr gönderilerinde desteklenmediğini, yalnızca blog temalarında desteklendiğini unutmayın.
Görüntüleri Hazırlayın
Bulanık görüntü görevini gerçekleştirmek için, neredeyse aynı iki görüntüye ihtiyacınız olacak: orijinal net görüntünün bir kopyası ve aynı görüntünün ikinci bir kopyası, yalnızca bulanık. İkinci fotoğrafın bulanık görünümünü oluşturmak için GIMP veya Photoshop'ta Bulanıklaştırma efektini kullanın. Görüntülerin tam olarak aynı boyutlarda olduğundan emin olun.
JavaScript Kodu
arasına bir JavaScript kodu parçacığı eklenir.
ve Tumblr blogunuzun etiketleri. JavaScript kodu, MouseRollover ve MouseOut olaylarını içerir. MouseRollover olayı, fare görüntünün üzerine geldiğinde net görüntünün görüntülenmesi talimatını verir. MouseOut olayı, fare resmin üzerine gelmediğinde hangi resmin görüntüleneceğini tanımlar.Bu efekt için kullanılacak JavaScript kod parçacığı:
Net orijinal görüntünün URL'sine “Picture1.jpg” referansını değiştirin. Bulanık görüntünün URL'sine “Picture2.jpg” referansını değiştirin.
HTML Kodu
Javascript snippet'ine eşlik edecek HTML kodu, görüntünün boyutunu, konumunu ve düzenini tanımlar. Tumblr temasına fotoğraf görüntüsünün görünmesini istediğiniz yere HTML kodunu ekleyin. Yukarıdaki Javascript snippet'ine eşlik edecek HTML kodu:
Varsayılan olarak görüntülenecek olan bulanık fotoğrafın URL'sini “Picture2.jpg” ile değiştirin. "Genişlik" ve "yükseklik" değişkenlerini, oluşturulan görüntünün istediğiniz boyutuna değiştirin.
Yükleme Kodu
Kodu Tumblr temanıza yüklemek için Tumblr panonuzu açın, ardından blogun değiştirmesi için panodaki "Özelleştir" sekmesine tıklayın. Tema düzenleyiciyi açmak için “HTML Düzenle” seçeneğini tıklayın. Kodu vurgulamak için Javascript kod parçacığını seçin, ardından kodu kopyalamak için “Ctrl-C”ye basın. " öğesinin önündeki boşluğa tıklayın.” etiketleyin, ardından kodu yapıştırmak için “Ctrl-V” tuşlarına basın.
HTML kodunu kopyalayın, ardından Tumblr tema düzenleyicisine dönün. Fotoğraf efektinin oluşturulmasını istediğiniz yeri kodda bulun. Konumu tıklayın, ardından HTML snippet'ini yapıştırmak için “Ctrl-V” tuşlarına basın. Önizleme penceresinde efekti test etmek için “Önizlemeyi Güncelle”ye tıklayın. Değişiklikleri kaydetmek için “Kaydet”e tıklayın.
