Web Sitenize Ücretsiz Metronom Nasıl Eklenir
Bir müzik blogu, özel ders sitesi ya da tab dolu bir sayfa işletiyorsanız, kendiniz kodlamadan çalışan bir metronom ekleyebilirsiniz. Küçük bir kod parçasını kopyalayıp sayfanıza yapıştırın, tam işlevli bir metronom belirir: 20 ile 300 BPM arası tempo, tap tempo, ölçü seçimi ve üç farklı klik sesi. Her şey ziyaretçinin tarayıcısında çalışır, kurulacak hiçbir şey ve açılacak hesap yoktur.
İşte tüm kod bu kadar.
<div style="max-width:440px;margin:0 auto;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
<iframe src="https://pluri.tools/embed/tr/metronom" title="Metronom — pluri.tools" width="100%" height="600" style="border:0;display:block;width:100%" loading="lazy"></iframe>
<a href="https://pluri.tools/tr/metronom/" target="_blank" rel="noopener" style="display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border-top:1px solid #e2e8f0;font:500 12px system-ui,sans-serif;color:#64748b;text-decoration:none">
<img src="https://pluri.tools/favicon.svg" alt="" width="16" height="16" style="display:block" />
Powered by pluri.tools
</a>
</div>Entegrasyonun tamamı bu. Bu rehberin geri kalanı, widget’ı kendi tasarımınıza nasıl uyduracağınızı, WordPress, Wix veya Notion’a nasıl yapıştıracağınızı ve iframe’in asla kaydırma çubuğu göstermemesini sağlayan bir yöntemi anlatıyor.
Sayfanıza neden metronom koymalısınız
Metronom, insanların tam da içeriğinizi okudukları anda aradığı araçlardan biridir; ne öncesinde ne sonrasında. Sayfaya gömülü bir widget’ın, okuyucuyu başka bir yere gönderen bir bağlantıdan daha iyi olduğu birkaç durum:
- Ders sayfaları. “Bu gamı 80 BPM’de çalış” diyen bir öğretmen, metronomu egzersizin hemen altına koyabilir; öğrenci oraya kaydırdığında hazır bekler.
- Tablar ve nota sayfaları. Parçanın temposunu notasyonun yanında gösterin, böylece müzisyen doğru tempoyla başlar.
- Pratik rutinleri. Hız kazanmayla ilgili bir yazı, her adımda okuyucunun pratik için ihtiyaç duyduğu aracı eşleştirebilir.
- Grup ve stüdyo siteleri. Ziyaretçileri sayfada daha uzun tutan ve tekrar gelmeleri için bir neden veren küçük bir araç.
Widget bir iframe içinde yaşadığı için sayfanızın geri kalanına asla müdahale etmez. İçeriğinizi okumaz, sitenizin URL’sini değiştirmez ve kendi başına yüklenir.
Hemen burada deneyin
Bu, yukarıdaki kodla tamamen aynı snippet; bu sayfada canlı olarak yükleniyor. Düğmeleri kullanarak açık veya koyu temada görüntüleyin — aşağıdaki kod da buna göre güncellenir. Başlat’a basın, temposunu sürükleyin veya bir şarkının ritmine uyarak Tap Tempo’ya dokunun.
Powered by pluri.tools
Yukarıda gördüğünüz her şey, küçük atıf bağlantısı dahil, kodu yapıştırdığınız anda sitenizi ziyaret edenlerin göreceği şeyin ta kendisi.
Renkleri sitenize uydurun
Widget varsayılan olarak ziyaretçinin sistem temasını (açık veya koyu) takip eder. Sayfanızın sabit bir görünümü varsa, URL’deki theme parametresiyle temayı zorlayabilirsiniz:
<!-- Her zaman koyu -->
<iframe src="https://pluri.tools/embed/tr/metronom?theme=dark" ...></iframe>
<!-- Her zaman açık -->
<iframe src="https://pluri.tools/embed/tr/metronom?theme=light" ...></iframe>Genişlik için kapsayıcı widget’ı max-width:440px ile sınırlar, iframe ise onu width="100%" ile doldurur; böylece mobilde dar sütunları doldururken masaüstünde tuhaf biçimde genişlemez. Düzeniniz daha darsa kapsayıcının max-width değerini, diğer kartlarınızla uyumlu olsun diye border-radius değerini değiştirin.
Widget 13 dilde de mevcut. Yoldaki tr kısmını istediğiniz dille değiştirin, örneğin İngilizce için /embed/en/metronome veya Almanca için /embed/de/metronom. Her dilin URL’de kendi slug’ı vardır, bu yüzden karşılık gelen olanı kullanın.
Kaydırma çubuğuna son: iframe’i kendi kendine boyutlandırın
Herhangi bir iframe’in en can sıkıcı yanı sabit yüksekliktir. Çok kısa olursa kontrolleri keser, çok uzun olursa boş alan bırakır. Yerleştirme, her değiştiğinde gerçek yüksekliğini üst sayfaya bildirerek bu sorunu çözer. Tek yapmanız gereken bu mesajı dinlemek ve çerçeveyi buna göre boyutlandırmak.
iframe’e bir id verin ve sayfanızın herhangi bir yerine bu küçük betiği bir kez ekleyin:
<iframe
id="metronom-embed"
src="https://pluri.tools/embed/tr/metronom"
title="Metronom — pluri.tools"
width="100%"
height="600"
style="border:0;max-width:440px;border-radius:12px"
loading="lazy"
></iframe>
<script>
window.addEventListener('message', function (event) {
if (event.data && event.data.type === 'pluri-embed-height') {
var frame = document.getElementById('metronom-embed')
if (frame) frame.style.height = event.data.height + 'px'
}
})
</script>Artık çerçeve içeriğine göre kendi kendine büyür ve küçülür, hiçbir zaman kaydırma çubuğu görünmez. Betiği eklemezseniz, sabit height="600" değeri widget’ın tamamını sığdıran güvenli bir varsayılan olarak kalır.
Platforma göre notlar
Çoğu site oluşturucu <iframe> kodunu sıradan metinden farklı ele alır. Kural basit: kodu bir HTML veya yerleştirme bloğuna yapıştırın, iframe’leri silme eğiliminde olan görsel düzenleyiciye asla.
| Platform | Kod nereye yapıştırılır |
|---|---|
| WordPress (blok düzenleyici) | Bir Özel HTML bloğu ekleyip iframe’i yapıştırın. Görsel paragraf düzenleyici onu kaldırır. |
| Wix | HTML Yerleştir öğesini ekleyip (Widget Yerleştir) kodu yapıştırın. |
| Webflow | Bir Embed öğesi sürükleyip iframe’i yapıştırın. |
| Notion | Yalın https://pluri.tools/embed/tr/metronom URL’sini yapıştırıp Yerleştirme oluştur’u seçin. |
| Blogger | Yazı düzenlerken HTML görünümüne geçip iframe’i doğrudan koda yapıştırın. |
| Düz HTML | <body> içinde herhangi bir yere yapıştırın. |
Sık yapılan hatalar
- Zengin metin düzenleyiciye yapıştırmak. Kaydettiğinizde widget kayboluyorsa yanlış bloğu kullandınız demektir. Özel HTML veya Kod’a geçin.
- Butonları kesen bir yükseklik. Başlat ve Tap Tempo kontrolleri alta yakındır. Yüksekliği en az 600 tutun veya yukarıdaki otomatik boyutlandırma betiğini kullanın.
- Başka bir kütüphaneye ihtiyaç olduğunu düşünmek. Widget’ın çalışması için ek bir betik gerekmez. Tek isteğe bağlı betik yükseklik dinleyicisidir.
- http ve https’yi karıştırmak. Her zaman
httpsüzerinden yerleştirin. Bu rehberdeki kod zaten bunu yapıyor.
Yerleştirme neler içeriyor
Snippet, widget’ın hemen altında, araca geri götüren küçük bir “Powered by pluri.tools” bağlantısı içerir. Yerleştirmenin karşılığında istediği tek şey bu bağlantıdır ve metronom bu sayede ücretsiz kalır. 13 dilin tamamına ve paylaşılabilir tempo URL’lerine sahip tam sayfayı isteyenler bu bağlantıyı takip edebilir.
Sıkça sorulan sorular
Gerçekten ücretsiz mi?
Evet. Hesap, API anahtarı ya da kullanım sınırı yok. Snippet yalnızca bir atıf bağlantısı içerir, başka hiçbir şey eklemez.
Sitemi yavaşlatır mı?
iframe loading="lazy" kullanır, yani tarayıcı onu yalnızca ekrana girdiğinde yükler. Widget’ın kendisi hafiftir ve sesi Web Audio API ile üretir, indirilecek herhangi bir ses dosyası yoktur.
Ziyaretçiler tempoyu değiştirebilir mi, yoksa sabit mi?
Tamamen etkileşimlidir. Sayfanızı görüntüleyen herkes 20 ile 300 arasında istediği BPM’i ayarlayabilir, ölçüyü değiştirebilir, ses seçebilir ve Tap Tempo kullanabilir. Yerleştirme 120 BPM’de açılır.
Telefonda çalışır mı?
Evet. Widget duyarlıdır ve ses iOS ile Android’de çalışır. iOS’ta, kişi Başlat’a bastığı anda sessiz düğmesi açık olsa bile hoparlörden ses gelir.
Dili değiştirebilir miyim?
Evet. URL’deki tr kısmını desteklenen 13 dilden biriyle değiştirin, o dilin slug’ını kullanarak; örneğin İtalyanca için /embed/it/metronomo veya Portekizce için /embed/pt/metronomo.