Geldik HTML ders serimizin harika bir finalle taçlanacağı son adımına! 6. Ders ile birlikte, öğrendiğimiz tüm bu HTML bilgilerini harici dünyayla birleştireceğiz ve Blogger’ın en güçlü esnekliği olan Widget (Alet İşleçleri) dünyasının kapısını aralayacağız.

Ders 6: Iframe (Harici İçerik) ve Blogger Widget Mantığı

Merhaba Blogger yazarları! Serimizin bu son dersinde, blogumuzu sadece yazı yazılan bir yer olmaktan çıkarıp interaktif bir platforma dönüştürmeyi öğreneceğiz.

Konumuz: Dışarıdan video veya araç çekmemizi sağlayan <iframe> etiketi ve Blogger'ın can damarı olan HTML/JavaScript Widget'ları.

1. Iframe Nedir? (Site İçinde Site Açmak)

<iframe> (Inline Frame), kendi web sayfanızın içinde, başka bir web sitesine ait bir pencere açmak anlamına gelir. Blogunuza bir YouTube videosu, Google Haritası, Spotify çalma listesi veya harici bir borsa/hava durumu grafiği eklemek istediğinizde neredeyse her zaman bir <iframe> kodu kullanırsınız.

Temel Yapı:

<iframe src="harici_sitenin_adresi" width="genişlik" height="yükseklik"></iframe>

YouTube Videosunu HTML ile Bloga Yerleştirme

YouTube'da bir videonun altındaki Paylaş > Yerleştir (Embed) seçeneğine tıkladığınızda size otomatik olarak bir HTML kodu verir. Bu kod tam olarak şuna benzer:

<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allowfullscreen>
</iframe>

allowfullscreen: Okuyucunun videoyu tam ekran yapmasına izin veren hayati bir niteliktir.
frameborder="0": Videonun etrafındaki eski nesil çirkin çizgileri kaldırır.

2. Blogger "HTML/JavaScript" Widget'ının Gücü

HTML kodlarını sadece yazıların içine yazmak zorunda değiliz. Blogunuzun yan menüsüne (Sidebar), logosunun yanına veya alt bilgisine (Footer) kalıcı araçlar eklemek için Blogger bize muazzam bir alan sunar.

Adım Adım Widget Yönetimi:

Blogger panelinizden Yerleşim (Layout) sekmesine gelin.
Kod eklemek istediğiniz alandaki (örneğin Sidebar) Gadget Ekle (Add a Gadget) yazısına tıklayın.
Açılan listeden HTML/JavaScript seçeneğini bulun.
Başlık kısmını boş bırakabilir (daha sade ve temiz bir tasarım için) veya istediğiniz bir başlığı yazabilirsiniz.
İçerik kısmına ise HTML kodlarınızı yapıştırıp Kaydet demeniz yeterlidir.

Son Pratik: Bloga Hem Video Hem Harici Araç Ekleyelim

Şimdi Blogger panelinizde Yerleşim alanına gidin, bir HTML/JavaScript gadget'ı açın ve içerik kısmına aşağıdaki kod yapısını ekleyerek kaydedin:

<div class="widget-video-kutusu">
<iframe
width="100%"
height="200"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0"
allowfullscreen>
</iframe>

<p>Videoda bahsettiğimiz kaynak dosyalara ulaşmak için aşağıdaki bağlantıyı kullanabilirsiniz:</p>

<a href="https://bloggerarsivim.blogspot.com" target="_blank" rel="noopener">
<strong>Kaynak Dosyaları İndir (Ücretsiz)</strong>
</a>
</div>

- Fark Ettiniz mi? width (genişlik) değerine 560 gibi sabit bir sayı vermek yerine %100 yazdık. Böylece video, yerleştirdiğiniz widget alanının genişliği ne kadarsa (ister dar bir sidebar ister geniş bir footer olsun) oraya otomatik olarak tam sığacaktır.

Blogger Arşivim Notu: Widget'larda Duplicate ID (Çift ID) Tehlikesi!

Blogger şablonlarında kodlama yaparken veya harici hazır widget'lar eklerken en sık yapılan hatalardan biri, internetten kopyalanan bir kodu yan menüye iki kez eklemektir. Eğer kopyaladığınız kodun içinde id="ozel-kaydirici" gibi bir kimlik tanımı varsa ve siz bu widget'ı bloga iki defa eklerseniz, aynı sayfada iki aynı ID olacağından dolayı blogunuzun hem kod hiyerarşisi bozulur hem de bazı tarayıcılarda widget'lar çalışmayı durdurabilir. Hazır kod kullanırken saf kod bloklarını tercih etmeye ve benzersiz ID'ler kullanmaya her zaman özen gösterin.

🎉 Tebrikler, HTML Ders Serisini Tamamladınız!

Harika bir iş çıkardınız! 6 ders boyunca bir web tasarımcısının ve profesyonel bir Blogger yazarının bilmesi gereken tüm temel HTML iskeletini öğrendiniz. Artık:

Yazılarınızın SEO hiyerarşisini yönetebilir,
Linklerinizi ve görsellerinizi arama motorlarına uyumlu hale getirebilir,
Tablo, liste ve bölmelerle (div) sayfa düzeni kurabilir,
Widget'ları ve dış kaynakları blogunuza sorunsuz entegre edebilirsiniz.

dersleri,html,iframe