29 Ağustos 2015 Cumartesi

Blogger Resim Üstüne Fareyle Gelince Renkli Büyütme Eklemesi

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
author

Yazar Hakkında

Merhaba ben Onur Gücer, hobi olarak uzun zamandır blog yazmaktayım ve bu blogda sizlere deneyimlerimi paylaşıyorum.. İyi günler, iyi bloglar.. (:

3 yorum:

  1. Bu yorum bir blog yöneticisi tarafından silindi.

    YanıtlaSil
  2. Her 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
    Yanıtlar
    1. önemli değil yine beklerim bloguma ((:

      Sil

Yorum Kuralları
1. Dediklerinizde kimseye kırıcı olmayınız.
2. Lütfen konu dışı şeyleri iletişim sayfamızdan yazmaya çalışınız.
3. Sorularınıza en kısa sürede cevap verilmeye çalışılacaktır.