İ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!
- Blogunuzu ücretsiz ekleyeceğiniz kaliteli blog dizinleri
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.
güzel bilgi deneyelim bakalım nasıl sonuç vericek :D
YanıtlaSilGuzel bir site devamli takipteyim basarilarinizin devamini bekleriz
YanıtlaSilBunu öğrendiğim iyi oldu. Çok teşekkürler
YanıtlaSilYazı hakkındaki görüşleriniz sizden sonrakiler için önemli olacaktır.