Java script sayfalara entegre nasıl edilir ?

Burakcnnar

Sayfalarıma eklemek istediklerim bu videolardaki geri sayım sayaç vs ; pomodoro ve geri sayım

-Verilen css kodlarını görünüm harici css yerine atıyorum.
-Verilen html kodlarını sayfa içeriğine atıyorum.
.js uzantılı kodlarıda html içindeki <body> etiketlerinin arasına atıyorum fakat çalışmıyor. Yardımcı olursanız sevinirim.

Can

Hiç uğraşmadan en basit yol ile sitenin dizinine bu sayaçları doğru bir şekilde kur. Örneğin: xxx.com/sayac , xxx.com/pomodoro

Ardından Embed/Iframe kodu yardımı ile bunu Pages eklentisindeki HTML aktif et seçeneği ile kullan.

Iframe nasıl kullanacağını bilmiyorsan aşağıdaki kodu incele:

<iframe src="https://flarumtr.com/u/Lauren" width="100%" height="200" frameBorder="0" style="border: 0;"></iframe>
<br>Brought to you by <a href="https://flarumtr.com" target="_blank">flarumtr.com</a>

Burakcnnar

Can yanlarda vs kaydırma çubuğu mevcut oluyor tam sığdırmak lazım istediğim yeri zor galiba bana

Can

Burakcnnar Kaydırma çubuklarını bu css kodu sayesinde kaldırabilirsin.

/* Kaydırma Çubuğu */
::-webkit-scrollbar {
  display: none!important;
}
::-webkit-scrollbar-track {
  display: none!important;
}
::-webkit-scrollbar-thumb {
  display: none!important;
}
::-webkit-scrollbar-thumb:window-inactive {
  display: none!important;
}
/* End Kaydırma Çubuğu */

Benim ki sadece bir öneri. Daha farklı bir çözüm arıyorsanız diğer üyelerin çözüm önerilerini bekleyebilirsiniz.

Burakcnnar

Can yok böyle istediğim gibi değil malesef js.kodlarını çalıştıramıyorum

NightKing

Bir JS kodu ile değil de React gibi bir framework ile denerseniz daha başarılı sonuç alırsınız. JS tek başına yetersiz kalabiliyor.

Burakcnnar

NightKing tek js değil

NightKing

Burakcnnar Hocam sizin ilacınız React’te dökümantasyonuna göz atın. Şimdi pcde değil mobildeyim. Link atardım fakat mobilden zor oluyor. Dökümantasyonunda sayaç ile ilgili dökümanlarda var.

Burakcnnar

NightKing sadece icon ve emojiler mevcut orayı mı diyorsunuz

NightKing

videodan bakın hocam. Sayaçın nasıl yapılacağına dair bilgi veriyor.

Burakcnnar

NightKing yok hocam sayaç üzerinden gitmeyin eklemek istediğim daha birçok şey bu şekilde

fakat ekleyemiyorum ondan bahsediyorum

NightKing

Burakcnnar Anladım hocam. Ben sayaç yapacaksınız zannettim sadece. Bahsettiğiniz olaya yarın bakacağım şu anda mobildeyim.

Burakcnnar

NightKing teşekkürler cok iyi olur

NightKing

Burakcnnar siz tam ne yapmak istediğinizi açık dille yazarsanız şimdiden daha iyi olur. Ne yapmaya çalıştığınızı hala anlayabilmiş değilim çünkü.

Can

NightKing Pages eklentisinde bu codepen linkindeki sayfayı HTML aktif et seçeneği ile göstermek istiyor. Kendisine embed yardımı ile göstermesini tavsiye ettim. Ama tatmin etmedi sanırım.

Daha önce ben eklemeyi denedim fakat sayfa bozuluyor. Siz yarın daha dinç bir şekilde bakabilirsiniz yinede @NightKing .

Burakcnnar

NightKing yukarıdaki resimde olduğu gibi html-css-.js kodlarını oluşturduğum sayfaya (fof pages ile) içerik olarak atmak istiyorum.

kodların çıktısı bu. fakat sayfamda çalışmıyor

Burakcnnar

Can denemeniz yeter saolun sizede

Can

Burakcnnar JS ve CSS kodlarınızı <script> ve <style> kodları yardımı ile tek bir html üzerinde toplayın. ( projeyi export ederek dist klasörüne göz gezdirin. )

HTML aktif et seçeneği ile kodlarınızı Pages uzantısındaki sayfanıza eklemeyi deneyin.

Can

Burakcnnar https://flarumtr.com/d/3011-site-mapi-nasil-html-den-degistiririm/10

Buna değinmiştim bir önceki tartışma konumuzda. Tüm mesajları ve <script> <style> kodları kullanım örnekleri de vermiştim. Kendim taraflı deneyince sayfa bozuluyordu. O anki ruh halime bağlı olarak bazı şeyleri yanlış yapmış olabilirim. Siz isterseniz tekrar bi deneyin.

Burakcnnar

Can yok malesef bende de aynı oluyor

Can

Burakcnnar Sizin için iframe oluşturdum. Admin arkadaşımızın çözümünü bekleyene kadar işinizi göreceğine inanıyorum.

Pages ayarlarından HTML aktif et seçeneğini aktif hale getiririn.

İçerik kısmına bu kodu ekleyin. Bu kodu github sayfasına yükleyerek netlify ile yayınlıyorum. Uzun soluklu olacağını düşünmüyorum ama şimdilik işe yarıyor gibi.

<iframe src="https://whatismyipadress.netlify.app/" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe>

Sonraki Sayfa »