Blogger da jQuery Kodlarını Çalıştırmak

Gönderen

Blogger da HTML, CSS, jQuery, JS Kodları Nasıl Eklenir?


Blogger üzerinde eklenti yada şablon teması üzerinden bir paketlenmemiş kod çalıştırmak istediğimizde neler yapmalıyız İzah etmeye çalışalım.
Aslında Blogger için hazırlanmış bir kod olduğunda zaten widget olarak eklemek yada temada belirtilen yere ekleyip çalışması için kaydetmek yeterlidir. Bazı durumlarda bu kodlar Blogger için hazır bir şekilde paketlenmez. Özellikle WP için yazılmış bazı kodlar genelde sadece WP'se nasıl ekleneceği gösterildiğinden Blogger dahil diğer platformlarda çalışması için düzenlemeler gerekir. Özellikle kod paylaşım platformlarında paylaşılan kodların sadece çalışan kısımlarının editörde bulunmasıda bu kodları düzenlenmesini gerekli yapar.

CSS Kodlarının Çalıştırılması

 CSS (Cascading Style Sheets) : HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir işaretleme dilidir. Genelde yazılara özellik atamada kullanılır.

<style type="text/css">
CSS Kodlarının bulunduğu alan
</style>

Yada

<style>
CSS Kodlarının bulunduğu alan
</style>


JavaScript Kodlarının Çalıştırılması

JS : JavaScript, yaygın olarak web tarayıcılarında kullanılmakta olan dinamik bir programlama dilidir. 

<script type="text/javascript">
JS Kodlarının bulunduğu alan
</script>

Yada

<script>
JS Kodlarının bulunduğu alan
</script>


jQuery Kodlarının Çalıştırılması

jQuery: Bir açık kaynak JavaScript kütüphanesidir. Kısaca JS kodlarını istenilen yapıya uzun uzun eklemek yerine bir jquery JS kütübhanesinde barındırıp kısaltılmış linki kullanmak için oluşturulmuş CDN (Content delivery network, internet üzerindeki birçok veri merkezinde bulunan dağınık ve geniş bir sunucu sistemidir. CDN'nin amacı kesintisiz bir şekilde yüksek performans ile son kullanıcılara içerik sunmaktır. ) yapısıdır. Avantajları da dezavantajları da olan bir sistemdir. Benim gibi kurtlular kodların tamamını bir arada görmek istediklerinden bu yapıyı pek sevmezler.
http://blog.jquery.com/

Blogger jQuery Kodlarının Çalıştırılması


1.) Blogger de jQuery Kodlarının Temaya Eklenerek Çalıştırılması

Kodların çalışması için gerekli CND yapısının bağlantısını <head>  </head> etiketleri arasına eklemeniz gerekir.

Kendinden barındırılan bağlantı
<script src="jquery.js"></script>

Google CDN
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>

Microsoft CDN
<script src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js"> </script> 

Mantık aslında basittir. Git o belirtilen kütüphaneden jQuery kodunu al, üstüne benim eklediklerimi birleştir ve kodun tamamını çalıştır demektir.

2.) Blogger de jQuery Kodlarının Widget Olarak  Çalıştırılması

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript"> jQuery(document).ready(function(){ 
jQuery KODLARI
}) 
</script>


Şeklinde düzenlenerek kullanılabilinir.

Özetleyelim; internetten bulduğunuz kodlar blogger de çalışması için paketli değil ise çalıştırmak için ilgili tag'ların (etiketlerin) arasına kodu yerleştirip bloggere ilgili yere eklerseniz kodlar çalışır. Bazen kodların başına editörde çalışsın diye HTML vb. ekleyebilirler. Bu durumda çakışma yapmaması için bu tag'ın silinmesini tavsiye ederim. 


HTML / JAVASCRIPT EKLEMEK

Tema içinde kullanmak için :
Blogger > Tema > HTML'yi Düzenle > "ilgili bölüm"

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod editörünü kullanabilirsiniz.


Yorumlar

Yorum Gönder

🔺 YUKARI ÇIK 🔺