iframe’niz Yalnızca Kendi Websitenizde Çalışsın

Bugün yeni edindiğim bir tecrübeyi sizlerle paylaşmak istiyorum. Bir iframe kodladınız, ve kendi websitenizden başka sitede çalışmasını istemiyorsunuz. O zaman vereceğim kod tam size göre.

iframenizin kodları aşağıdaki gibi olmalı.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="EnUstDiv">
İçeriğimiz
</div>
<script type="text/javascript">
function removeElementsByClass(className)
{
var elements=document.getElementsByClassName(className);
while(elements.length>0){elements[0].parentNode.removeChild(elements[0])
}
}
var domainadi=window.parent.location.hostname;
domainadi.replace(["//","//","/","www."],"");
if(domainadi!="onurunwebsitesi.com")
{
removeElementsByClass("EnUstDiv");
alert("Eğer bu eklentiyi websitenizde yayımlamak istiyorsanız, onurunwebsitesi.com adresimden veya r10.net onur89tr nickim aracılığıyla benimle iletişime geçin.")
}
</script>
</body>
</body>
</html>

Bu kodda ne yaptık? iframe’mizin ana içeriğini html > body > .EnUstDiv şeklinde oluşturduk. Scriptimize div silme function’u tanımladık. Eğer üst domain onurunwebsitesi.com değilse, ana içeriğimizi sildik, ve bir uyarı yazdırdık. Eğer onurunwebsitesi.com ise çalışacaktır.

Not: Burada 2 kısım önemli. 1.’si onurunwebsitesi.com kısmını kendi domain adınızla değiştiriyorsunuz. Alt klasör girmeden. Ama subdomain gerekebilir. Orasını test edince anlarsınız. 2.’si EnUstDiv kısmının içinde olmalı tüm içerikler. Adını değiştiriyorsanız script’teki adı da değiştirin.

Numaralı Manşet Kodu

Numaralı manşet kodu için tıkla!

Önizleme:

_____________________

İndir:

Merhaba arkadaşlar. Müşterimin son anda entegresinden vazgeçmesinden (daha doğrusu yanıt verecek ticari etiğe sahip olmamasından sanıyorum) ötürü ben yaptığım manşetin HTML + CSS halini sizlerle paylaşmaya karar verdim. Eminim işine yarayanlarınız çıkacaktır.

Yüksekliği Dinamik Değişen iframe Çözümü (X-Browser)

Yüksekliği dinamik iframe kodu istiyorsan bu makale tam sana göre!

Önizleme:

_____________________

_____________________

İndir:

Uzun uğraşlar sonucu dinamik yüksekliğe sahip iframe nasıl yapılır, araştırmalarım sonucu çözüme kavuşturdum. Kaynağı vermek isterdim ancak kod hataları ile dolu, dolayısıyla daha basit, Türkçe anlatım yapmak istedim. Gelin bu yazıda dinamik yükseklikli iframe nasıl yapılıyormuş bakalım…

Örnek iframe kodlarımız:

(iframemiz.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{margin:0;padding:0} 
.Btn{float:left;margin-left:10px}
.Icerik{line-height:20px;}
</style>
</head>
<body>
<div class="Tumu">
<div style="clear:both;height:10px"></div>
<input class="Btn1 Btn" value="Buton1" type="button">
<input class="Btn2 Btn" value="Buton2" type="button">
<div style="clear:both;margin-top:10px"></div>
<div class="Icerik1 Icerik">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</div>
<div class="Icerik2 Icerik">Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır. Ayrıca arama motorlarında 'lorem ipsum' anahtar sözcükleri ile arama yapıldığında henüz tasarım aşamasında olan çok sayıda site listelenir. Yıllar içinde, bazen kazara, bazen bilinçli olarak (örneğin mizah katılarak), çeşitli sürümleri geliştirilmiştir.</div>
<div style="clear:both"></div>
</div>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var sendHeight=function(){height=$(".Tumu").height();window.parent.postMessage({height:height},"*");};
$(document).ready(function(){
$(".Icerik2").hide();
sendHeight();
$(".Btn1").on("click",function(){ 
$(".Icerik2").hide();
$(".Icerik1").show();
sendHeight();
});
$(".Btn2").on("click",function(){
$(".Icerik1").hide();
$(".Icerik2").show();
sendHeight();
});
});
$(window).resize(function(){
sendHeight();
});
</script>
</body>
</html>

Bu sayfada ne yaptık? 2 adet input ve 2 adet yazı içeren div tanımladık. 1. buton 1. yazıyı, 2. buton 2. yazıyı açıyor. Script’imizdeki ilk satıra dikkat. O satır iframe sayfasına eklenmelidir. Daha sonra yaptığımız her yükseklik değişimi için sendHeight(); function’undan yararlanıyoruz. Örnek olarak ben burada tıklama function’larını gösterdim.

iframe kodunu eklediğimiz sayfaya body kapanışından önce şunları yazıyoruz:

(Aynı sitede herhangi bir isimde sayfa açın. Dosya yolunu doğru belirttiğinizden emin olun. Aynı klasöre index.html açtık diyelim.)

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

<iframe id="iframem" src="iframemiz.html" scrolling="no" frameborder="0" style="width:100%">Tarayıcınız iframe desteklemiyor.</iframe>
<script type="text/javascript">
  window.addEventListener("message",function(event){if(height=event.data.height){console.log(height);$("#iframem").css("height",height+"px");}});
</script>

Şimdi 2 ayrı dosyamız oldu. index.html’ye girdiğimizde iframemiz.html açılıyor ve butonlara tıkladığımızda 2 ayrı yükseklik değeri kazanıyor. Demek ki dinamik yüksekliği olan iframe işini çözdük. 🙂 İyi kodlamalar…

Sitene Şık Puan Durumu & Fikstür Botu Ekle!

Arkadaşlar sitelerinize kendiniz renklendirebileceğiniz, HTML ve CSS’ine şekil verebileceğiniz, aynı zamanda responsive ve şık Puan Durumu & Fikstür eklemek istemez misiniz? Çok uygun fiyata bırakıyorum.


Bana R10.net’ten onur89tr nickim ile ulaşın.

200₺ değil
150₺ değil

Sadece

125

Puan Durumu & Fikstür Önizlemeleri:

Sitene Atatürk Sözleri Ekle

Merhaba. Atatürk‘ün en ünlü sözlerini sitene eklemek istemez misin?
Özellikle bu devirde çok eksikliğini hissettiğim için böyle bir çalışma yaptım.
728×90, 300×250, 250×250 çözünürlüklerine göre tasarlandı.
iframe yöntemi ile sitene ekleyebilirsin!

İŞTE O KODLAR:

<!--728x90-->
<iframe src="//www.onurunwebsitesi.com/ataturk.php" scrolling="no" frameborder="0" align="center" height="90" width="728" border="0">Tarayıcınız desteklemiyor.</iframe>
<!--300x250-->
<iframe src="//www.onurunwebsitesi.com/ataturk.php" scrolling="no" frameborder="0" align="center" height="250" width="300" border="0">Tarayıcınız desteklemiyor.</iframe>
<!--250x250-->
<iframe src="//www.onurunwebsitesi.com/ataturk.php" scrolling="no" frameborder="0" align="center" height="250" width="250" border="0">Tarayıcınız desteklemiyor.</iframe>

Nereden Bulabilirim?

Lorem Ipsum pasajlarının birçok çeşitlemesi vardır. Ancak bunların büyük bir çoğunluğu mizah katılarak veya rastgele sözcükler eklenerek değiştirilmişlerdir. Eğer bir Lorem Ipsum pasajı kullanacaksanız, metin aralarına utandırıcı sözcükler gizlenmediğinden emin olmanız gerekir. İnternet’teki tüm Lorem Ipsum üreteçleri önceden belirlenmiş metin bloklarını yineler. Bu da, bu üreteci İnternet üzerindeki gerçek Lorem Ipsum üreteci yapar. Bu üreteç, 200’den fazla Latince sözcük ve onlara ait cümle yapılarını içeren bir sözlük kullanır. Bu nedenle, üretilen Lorem Ipsum metinleri yinelemelerden, mizahtan ve karakteristik olmayan sözcüklerden uzaktır.

Neden Kullanırız?

Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli ‘buraya metin gelecek, buraya metin gelecek’ yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır. Ayrıca arama motorlarında ‘lorem ipsum’ anahtar sözcükleri ile arama yapıldığında henüz tasarım aşamasında olan çok sayıda site listelenir. Yıllar içinde, bazen kazara, bazen bilinçli olarak (örneğin mizah katılarak), çeşitli sürümleri geliştirilmiştir.

Nereden Gelir?

Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia’daki Hampden-Sydney College’dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan ‘consectetur’ sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan “de Finibus Bonorum et Malorum” (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan “Lorem ipsum dolor sit amet” 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.
1500’lerden beri kullanılmakta olan standard Lorem Ipsum metinleri ilgilenenler için yeniden üretilmiştir. Çiçero tarafından yazılan 1.10.32 ve 1.10.33 bölümleri de 1914 H. Rackham çevirisinden alınan İngilizce sürümleri eşliğinde özgün biçiminden yeniden üretilmiştir.

Lorem Ipsum Nedir?

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500’lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960’larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.