26 Mart 2016 Cumartesi

Blogger da Fotoğraflara İnstagram Efekti Nasıl Verilir

fotoğraflara-instagram-efekti

İnstagramın belki de kullanıcıları tarafından sevilen en önemli özelliklerinden birisi fotoğraflara uygulanan çeşitli efekteri. Çektiğiniz fotoğrafları bu sosyal ağ üzerinde paylaşmadan onu daha çekici hale getirecek filtreleri uygulayarak paylaşmak çoğu kullanıcının tercih ettiği yöntem. Peki aynı filtreleri blogunuzdaki resimlerde uygulasını nasıl olurdu ?

Gelin şimdi blogger da paylaştığınız fotoğraflara instagram efekti nasıl verilir ona bakalım:

Fotoğraflara bu özelliği uygulamak için CSS ile her bir efektin oluşturacağı etki tanımlanıp sizin resim paylaşacağınız zaman hangi efekti vermek istiyorsanız onu html ile belirtmeniz gerekir. Birazdan bahsedeceğim yöntemin temel mantığı bu şekilde.

Şimdi blogger da nasıl bir değişiklik yapmamız gerekiyor onu açıklayayım :

  • Blogger hesabınıza giriş yapın ve Şablon düzenle kısmına gelin.
  • <head> etiketini kodlarınızda arayın ve hemen altına aşağıdaki kodu yapıştırın.
<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">

Gelelim son adıma. Şimdi hangi resme efekt vermek istiyorsunuz o resmin linkine aşağıdaki gibi kod blogu içerisinde yer vermelisiniz.

<figure class="_1977">
<img src='resim-adresi'/>
</figure>

Burada kodlar içerisinde yer alan _1977 sadece oluşturacağınız efektlerden bir tanesi. Siz aşağıdakilerden herhangi birisini seçip değiştirebilirisiniz :

  • 1977: class="_1977"
  • Aden: class="aden"
  • Brooklyn: class="brooklyn"
  • Clarendon: class="clarendon"
  • Earlybird: class="earlybird"
  • Gingham: class="gingham"
  • Hudson: class="hudson"
  • Inkwell: class="inkwell"
  • Lark: class="lark"
  • Lo-Fi: class="lofi"
  • Mayfair: class="mayfair"
  • Moon: class="moon"
  • Nashville: class="nashville"
  • Perpetua: class="perpetua"
  • Reyes: class="reyes"
  • Rise: class="rise"
  • Slumber: class="slumber"
  • Toaster: class="toaster"
  • Walden: class="walden"
  • Willow: class="willow"
  • X-pro II: class="xpro2"

Peki tüm resimleri otomatik nasıl yapabilirim ?

Hemen aklınıza böyle bir soru geleceğini tahmin ediyorum. Eğer resimlerinize bu türden efekt vermek hoşunuza gittiyse tüm resimlere uygulamanın derdinde olacağınızı düşünüyorum. Onun için de sizlere yardımcı olacak kodları aşağıda veriyorum :

Bu kodları </body> kodundan önce blogunuza eklemelisiniz :

<script type='text/javascript'>
//<![CDATA[
(function() {
  var e = document.querySelectorAll('img');
  for (var i = 0; i < e.length; i++) {
    var wrapper = document.createElement('figure'),
      myDiv = e[i];
    wrapper.setAttribute('class', '_1977');
    wrapper.appendChild(myDiv.cloneNode(true));
    myDiv.parentNode.replaceChild(wrapper, myDiv);
  }
})();
//]]>
</script>

Yalnız kod img class ı kontrol ettiği için blogunuzda yer alan tüm resimleri değiştirecektir. Kodu denedikten sonra blogunuzu baştan aşağıya görüntüleyerek her şeyin yolunda olduğundan emin olun!

Son Sözler

Özellikle kendi çektiğinizi ve sizi yansıtan fotoğrafları paylaştığınız bir blogunuz varsa onlara instagram efekti uygulayarak şık bir sunum yapabilirsiniz.

3 yorum

güzel bilgi deneyelim bakalım nasıl sonuç vericek :D

Guzel bir site devamli takipteyim basarilarinizin devamini bekleriz

Bunu öğrendiğim iyi oldu. Çok teşekkürler

Konu ile alakalı yorum gönderirseniz sevinirim. Yazı hakkındaki görüşleriniz sizden sonrakiler için önemli olacaktır.
EmoticonEmoticon