Blogger'da Logo veya Blog Başlıklarınıza Efekt Ekleme Eklentisi

U zun zamandan beri Blogger için eklenti paylaşmadım galiba. Geçen gün bir Arap blogunda karşılaştığım muhteşem eklentiden bahsetmek istedim...

Uzun zamandan beri Blogger için eklenti paylaşmadım galiba. Geçen gün bir Arap blogunda karşılaştığım muhteşem eklentiden bahsetmek istedim. Kendim hemen kullanmaya başladım ve sizlerin de beğeneceğinizi düşünerek hemen paylaşmaya karar verdim. Pek önemli bir eklenti olmasa da bloguna azıcık görsellik katmak isteyenler için iyi bir eklenti olduğunu düşünüyorum.

Belki de fark edeniniz vardır. Logonun (biliyorum çok dandik) üzerine geldiğinizde şekil şukul bir eklenti beliriyor. İşte ben de bu eklentiden bahsedeceğim, beğenen varsa da kendi blogunda kullanır. Hemen belirteyim, çok fazla uğraş gerektirecek bir şey de değil. Aşağıda bulunan birkaç satır kodu gerekli yere yapıştırın ve kullanın. Lafı çok fazla uzatmadan yapmanız gerekenlere geçeyim ben.

• Blogger Kontrol Paneli'nde sol tarafta bulunan Şablon > HTML'yi düzenle seçeneklerine tıklayın.
• Kodların bulunduğu alana bir kez tıklayıp CTRL+F tuşlarına tıklayın. 
• Gelen arama kısmına ]]></b:skin> yazıp Enter'a tıklayın ve ]]></b:skin> kodunun bir üst satırına aşağıda görmüş olduğunuz kodu yapıştırın.

[#header h1 a:hover{/*animation*/-webkit-animation:jelly .5s;   -moz-animation:jelly .5s;    -ms-animation:jelly .5s;     -o-animation:jelly .5s;        animation:jelly .5s;}#header img:hover{/*animation*/-webkit-animation:jelly .5s;   -moz-animation:jelly .5s;    -ms-animation:jelly .5s;     -o-animation:jelly .5s;        animation:jelly .5s;}@-webkit-keyframes jelly{from,to{-webkit-transform:scale(1, 1);transform:scale(1, 1)}25%{-webkit-transform:scale(.9, 1.1);transform:scale(.9, 1.1)}50%{-webkit-transform:scale(1.1, .9);transform:scale(1.1, .9)}75%{-webkit-transform:scale(.95, 1.05);transform:scale(.95, 1.05)}}@keyframes jelly{from,to{-webkit-transform:scale(1, 1);transform:scale(1, 1)}25%{-webkit-transform:scale(.9, 1.1);transform:scale(.9, 1.1)}50%{-webkit-transform:scale(1.1, .9);transform:scale(1.1, .9)}75%{-webkit-transform:scale(.95, 1.05);transform:scale(.95, 1.05)}  }]

Son Sözler

Yapacaklarınız bu kadardı. Artık blog başlıklarınızın veya logolarınızın mouse ile üzerine gelindiğinde hoş bir animasyon belirecektir. Animasyonun nasıl olduğunu öğrenmek için benim logomun üzerine gelmeniz yeterlidir. Umarım bu küçük eklentiyi sizler de beğenmişsinizdir. Az daha unutuyordum, blog başlıklarınızdan kastım H1 yani blogunuzun adının olduğu başlıktır. Fikirlerinizi yorum olarak belirtebilirsiniz ya da beğendiyseniz aşağıdaki butonlara tıklayarak paylaşabilirsiniz.