Sayfa Gezintisi

HIDE

Grid

GRID_STYLE
{fbt_classic_header}
latest

Blogger Websiteniz için JQuery Resim Soldurma Efek Eklentisi

Blogger ve Websiteniz ana sayfa ve açılan makale sayfanızdaki yazılarınıza yüklediğiniz ana resimleri soldurup, koyulaştırmaya çekici görü...

JQuery Resim Soldurma Efek Eklentisi
Blogger ve Websiteniz 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 mause duyarlılık hisside 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 → HTMLdü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 şekilde güncel linki eklediğinizde blog’unuza bir eklenti yüklemek istediğiniz zaman eski versiyon jquery linkini silerek eklentileri yükleyebilirsiniz. Çünki tek link tüm eklentilerinize 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.

Hiç yorum yok