Blogger ve Web siteniz ana sayfa ve açılan makale sayfanızdaki yazılarınıza yüklediğiniz ana resimleri soldurup, koyulaştırmaya çekici görünüm vermeye yarayan JQuery Resim Soldurma Efek Eklentisi. Blogger, tema görselliğine önem veren yönetici yazarların, temalarını güzelleştirip zevkle kullanabilecekleri, ayrıca fareye duyarlılık hissi de veren JQuery Resim Soldurma Efek Eklentisini birkaç adımda blog temanızda yapılandırarak görselliğin tadını çıkarabilirsiniz.
JQuery Resim Soldurma Efek Eklentisinin farklı bir versiyonu adnan.guney.com Wordpres sitemde örnek olarak görebileceğiniz gibi şu anda okuduğunuz makale üzerindeki resim üzerine mause yanaştırdığınızda canlı görselin özelliklerini hissedebilirsiniz. NOT: Öncelikle blog’unuzun yedeğini alın.
→ Blogunuzu iki şekilde yedekleyeceğinizi biliyor musunuz?
JQuery Resim Soldurma Efek Eklentisinin Kurulumu:
1. Blogger kumanda paneline giriş yapın.
2. Şablon → HTML’yi düzenle ile şablon kodlarını görülür duruma getirin.
3. Kodları eklemeden önce açıklamayı lütfen dikkatli okuyun.
→ jquery min js, ile biten aşağıdaki link şablon kodlarınızda varsa kod içindeki jquery min js satırını silerek kullanın. Bu link kodlaması şablonunuz ( ]]></b:skin> ) etiketinin hemen altında bulunur. Bu linkin şablonda bulunduğu alanın resmini inceleyin.
→ Yukarı anlatın jquery link’i şablonunuzda varsa kod içindeki linki silin.
→ Ayrıca verilen kod içindeki linki silerek, ( ]]></b:skin> ) etiketinin hemen altına aşağıdaki yeni versiyon ve güncel jquery kütüphanesinin linkini ekleyerek farklı eklentiler için defalarca aynı link ekleme problemi yaşamayın.
Birçok eklenti içinde jquery kütüphanesinin linki vardır. Siz anlatılan şekilde bir kez bahsedilen güncel linki eklediğinizde blog’unuza bir eklenti yüklemek istediğiniz zaman eski versiyon jquery linkini silerek eklentileri yükleyebilirsiniz. Çünkü tek link tüm eklentinizde yeterli olacaktır.
4. ( ]]></b:skin> ) CSS kodlarını yapılandıran etiketin altına bir kez ekleyeceğiniz kod link’i.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
5. Aşağıda verilen kodları eklemeniz için CTRL+F arama tuşları ile </head> etiketini bulun ve hemen üstüne aşağıdaki kodları yapıştırıp şablon’unuzu kaydedin.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
6. Şu anda bitirmiş olmalısınız blog temanızı inceleyin. Ayrıca eklediğiniz kodların görselini inceleyin.
Blogger varsayılan ve Blogger özel temanızı özelleştirme konusunda sorun mu yaşıyorsunuz? Tema Tasarım kategorisindeki makaleleri inceleyerek sorunlarınızı çözün.
