Bu yazımda blogunda sık resim paylaşan blog yazarlarının özellikle işlerine yarayacak olan bir kod eklemesi paylaşacağım. Bu kod eklemesi çok basit bir ekleme ve işi de çok basit aslında blogdaki herhangi bir resmin üstüne mouse, fare ile geldiğinizde belirleyebildiğiniz bir ölçüde ve yine belirleyebildiğiniz bir renkte resmi sade animasyonda büyütecek ve bu basit iş bazı bloglar için vazgeçilmez olabiliyor. Bu kodu düzenleyerek farklı şekillerde de kullanabilirsiniz mesela blogumda olduğu gibi üzerine gelince sadece renkli çerçeve belirmesi gibi. Bu ekleme ve detayları yazımın devamında.
Bu Eklemeyi Nasıl Yaparım Bloguma?
NOT : Bu eklentiyi blogunuza eklerken blogunuzun şablonunda birkaç ekleme, çıkarma yapacağız ve bu düzenlemeleri yaparken yanlış bir şey yaptığınız taktirde sıkıntı olmaması ve rahat bir şekilde düzenleme yapabilmek için şablondan şablon yedeğini almayı unutmayınız.
Yapılacak : Şablondan HTML'yi Düzenleye tıklayın ardından Ctrl + F yardımıyla ]]></b:skin> kodunu bulun ve bir satır üzerine alttaki kodu yapıştırın.
kod:
/*===================================================Türk Blog Yardımcısı Reismleri Büyütme Kod Eklemesi====================================================*/.post-body img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .post-body img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.2);-webkit-box-shadow: 0 0 20px #1b93df;-moz-box-shadow: 0 0 20px #1b93df;box-shadow: 0 0 20px #7FE817;}
bu kod eklemesini yaptıktan sonra Şablonu kaydet butonuna basmanız yeterlidir ve isterseniz alttan Kodun Düzenlemeleri adlı kısımdan faydalanarak keyfinize göre bu eklemeyi düzenleyip değiştirebilirsiniz. Renk kodları lazım olursa HTML Renk Kodları İsimleriyle Tüm Renkler adlı yazımdan faydalanabilirsiniz.
Kodun Düzenlemeleri
1. düzenleme : scale(1.2); yazısındaki 1.2 değeri resmin üzerine fare ile geldiğinizde oluşacak olan resim büyütmesinin oranıdır.
2. düzenleme : #7FE817;} kodu büyümüş resmin etrafında oluşan kutunun renk kodudur ve üstteki açıklamadaki verdiğim yazımdan renk kodlarını bulabilirsiniz.
3. düzenleme : box-shadow: 0 0 20px yazısındaki 20 değeri büyümüş resmin etrafında oluşan kutunun genişliğini belirler.
Kodun düzenlemelerinden sonra kaydetmeniz yeterli olacaktır şablonunuzu bu düzenlemelerinizin blogunuzda geçerli olabilmesi için. Bu yazım ilginizi çekmiş ise Blogger Yorumlara Resim Ekleme adlı yazımda ilginizi çekebilir. Bu eklemenin faydasını görmeniz dileğiyle...
Kolay gelsin, iyi bloglar!
Arama açıklaması:
blogger blogspot resim fotoğraf üzerine üstüne mouse ile gelince geldiğinde rekli çerçeveli resim büyütme foto zumlama zoomlama blogger resim yakınlaştırma kodu eklemesi eklentisi resim yakınlaştırma ve netleştirme blog blogger blogspot fotoğraf büyütme ve netleştirme blogger resim büyütme resim büyütme ve netleştirme blogger Resim Üstüne Fareyle Gelince Renkli Büyütme Kodu
Bu yorum bir blog yöneticisi tarafından silindi.
YanıtlaSilHer yerde aradım ama bir tek burada bu kadar açıklayıcı buldum. 1 saattir uğraşıyorum. Çok teşekkürler basit anlatım için.
YanıtlaSilönemli değil yine beklerim bloguma ((:
Sil