Araştırdığım kadarıyla Muhammed Mustafa Ahmedzai, kendi blogunda bunu bir üniversite projesi olarak hayata geçirmiş ve bu özellik için 'Bu eklenti Blogger için türünün tek örneği' demiş.
Yazıya geçmeden önce bu faydalı özelliği keşfettikleri için Muhammed Mustafa Ahmedzai ve ona yardımcı olan arkadaşı Ahmed Nasır'a teşekkür ederim.
Navigasyon
- Önizleme
- Nasıl Çalışır?
- Sayfa Oluşturma
- jQuery Yerleştirme
- Bağlantı Oluşturma
- Tavsiye
- Mutlaka Okuyun
Önizleme
Önizleme için butona tıklayın.
Nasıl Çalışır?
Bu özellik genel anlamıyla 2 adet sayfadan ibaret. Birincisi bloga ait olan sayfa. İkincisi sayfanın içinde yer alan iframe sayfası. Blogda bir linke tıklanıldığında blogun yönlendirme sayfası açılarak içindeki iframede gidilmek istenen sayfa görüntülenecektir.
Sayfa Oluşturma
Öncelikle kodu çalıştırmak için bir sayfa oluşturmak gerekiyor. Bunun için Kumanda Paneli › Sayfalar adımlarını izleyerek bir sayfa oluşturun.
Ardından aşağıdaki kodları olduğu gibi sayfaya yapıştırın.
<div height="100%" id="iframe-container" width="100%"><div height="100%" id="iframe-container" width="100%">
<style type='text/css'>body ,html{
margin:0;
padding:0;
width:100%;
height:100%;
}
html {
overflow:hidden;
}
#frame {
height:100%;
width:100%;
border:0;
}
#iframe-container {
overflow: hidden;
background: none!important;
}
</style>
<iframe frameborder="0" id="frame" src="" width="100%"> </iframe>
</div>
<script>
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
var query = window.location.search.substring(1);
query = query.replace("url=", "");
$('#frame').attr('src', query);
var str = $('#iframe-container').html();
$('body').html(str);
$('iframe').height($(window).height());
</script>Sayfayı kaydetmeden önce aşağıdaki resimde belirttiğim gibi ayarların yapılması gerekiyor.
jQuery Yerleştirme
Kodun sitenin ana yapısında çalışması için <body>...</body> arasına bir div eklemek gerekiyor. Onu da şu şekilde halledebiliriz:
Kumanda Paneli › Şanlon › Yedekle/Geri Yükle › Tam Şablonu İndir adımlarını izledikten sonra aynı menüden HTML'yi Düzenle butonuna tıklayıp Widget Şablonlarını Genişlet kutusunu işaretleyin ve ardından aşağıdaki işlemleri yapın.
Temayı kaydetmek çok önemli. Çünkü işin içinden çıkamazsınız baştan başlamak için temanın yedeğine ihtiyacınız olacak.
]]></b:skin> kodunu arayın ve hemen öncesine aşağıdaki jQuery kodunu ekleyin.
<script>
$(document).ready(function() {
$('[data-disari]').click(function(e) {
e.preventDefault();
if($(e.srcElement).attr('target') == "_blank") {
window.open("http://www.furkanozden.net/p/external.html?url=" + $(e.srcElement).attr('href'), '_blank');
} else {
window.location = "http://www.furkanozden.net/p/external.html?url=" + $(e.srcElement).attr('href');
}
});
});
</script>Kırmızı ile belirttiğim yerleri kendi blogunuza göre değiştirin. Yapılandırma işlemi bu kod ile sona erdi.
Bağlantı Oluşturma
Bu özelliği kullanabilecek bir bağlantı oluşturmak için jQuery kodu içinde atadığımız değere aşağıdaki gibi true vermemiz yeterlidir.
<a href="#" data-disari="true">Dışarı link örneği</a>
Bağlantı adresinin http:// ile başlamasına dikkat edin.
Tavsiye
Bu kodu her sayfa için kullanabilirsiniz. Örneğin, indirme sayfası için ayrı önizleme sayfası için ayrı bir sayfa oluşturabilirsiniz.
En başta verdiğim sayfa içeriği kodunu düzenleyerek sayfaya sayfa ile beraber kayan bir logo veya çubuk koyabilirsiniz.
Mutlaka Okuyun
Eğer anlattıklarımı adım adım yaptıysanız bağlantı istediğiniz gibi kendi blogunuzdan çıkmadan açılacaktır. Fakat yine de dışarıya link olarak görülür. O yüzden bağlantıyı yazarken http://www.furkanozden.net/p/external.html?url=http://lights.elliegoulding.com/ şeklinde yazarsanız dışarıya link olarak görünmez. Eğer bağlantıları bu şekilde kullanırsanız şu adımı atlayabilirsiniz.
data-disari etiketini tek tek eklemek istemiyorsanız veya blogunuzdaki yayın sayısı bunu mümkün kılmıyorsa şu yazıma göz atın: Dışarıya Linklerin Hepsine nofollow ve blank Vermek
Bir demo sayfası oluştursaydınız daha iyi olurdu.İkinci okumamda amacını anlayabildim :)
YanıtlaSilTam çalıştığından emin olmadan koymak istemedim. Şu an mevcut :)
SilCok tesekkürler yararlı bilgi.
YanıtlaSilÇok güzel hocam. Bunun wordpress için olanı olaydı iyiydi :)
YanıtlaSilHocam millet bunun Blogger versiyonunu arıyordu yana yana :) Wordpress zaten var. Yok mu :?
SilÖnizleme için seçtiğin sayfa da bi ayrı güzel.
YanıtlaSilÖnizlemye benim websiteyi yapsan sevaba girersin :D safdsfasdfsda
YanıtlaSilherşeyi yaptımda şu kod mevzusu olmadı:S
YanıtlaSilÇok iyi olmuş bu Furkan. Sağolasın.
YanıtlaSilNereden buluyorsun böyle güzel eklentileri? :D Adresini verde bizde bulalım :)
YanıtlaSilhocam eklentiyi siteme uyguladım paylaştığınız js kod xyz sitesine yönleniyor durumu nasıl düzeltebilirim sitemin footer daki maskolis linkinden hataya ulaşabilirsiniz ilgilenirseniz sevinirim kolay gelsin
YanıtlaSilAnlattıklarımın aynını uygulaşmısınız fakat neden öyle bir siteye yönlendiğini ben de anlayamadım.
SilFurkan hocam, artık işlemiyormu anlamadım?
YanıtlaSilwww.yunusemrecelik.blogspot.com sorunsuz çalışıyor örneğin son konuma bakabilirsiniz.
Ancak yeni blog açtım oraya işlemedi ; www.yunusemrecelik.net
Yardımcı olursan sevinirim.
İlkinde işleyip ikincisinde işlemediyse sorun sende gibi görünüyor. Yaptıklarını tekrar gözden geçir.
SilBloggerdaki sayfa sınırı kalktımı?
YanıtlaSilHayır hâlâ aynı.
SilSizin önizlemede üst kısımda sayfa ile birlikte kayan menü gibi birşey var nasıl eklediniz? Bende hazır sayfa ile birlikte kayan menü kodu var ama çabaladım eklemeyi başaramdım.
YanıtlaSiliframe kodunun içine div ekledim o kadar.
SilHocam bu konuda senin kadar usta değiliz gerçi usta değiliz :D
Silbende bulunan menü kodunu denedim iframe arasında olmadı.
Müsait olduğunuz bir ara sizdeki iframe arasındaki kodları paylaşırmısınız?
Onun için ayrıca bir yazı yazamam ama şu bağlantıda kayan yere sağ tıklayıp Öğeyi denetle seçeneğinden kodları nereye koyduğumu görebilirsiniz.
SilBu yorum yazar tarafından silindi.
Silhocam şimdi
YanıtlaSilBağlantı Oluşturma
Bu özelliği kullanabilecek bir bağlantı oluşturmak için jQuery kodu içinde atadığımız değere aşağıdaki gibi true vermemiz yeterlidir.
Dışarı link örneği
bu bağlantıyı nere oluşturcaz onu anlamadım yardımcı olursanız sevinirim...
Normal link yazarken nereye yazıyorsanız oraya.
Silsağolun hocam iyi bir paylaşım olmuş..
SilHocam hata verdi örk:http://blogyilmaz.blogspot.com/p/external.html?url=http://www.furkanozden.net/2013/02/blogger-icin-git.php-seklinde-url-link-yonlendirme-ozelligi.html#jquery
YanıtlaSilURL yapılandırmanız doğru. Muhtemelen sayfa içeriğindeki kodlarda hata var. Sayfayı kaydettikten sonra içinde tekrar düzenleme yapıp kaydederseniz bozulma yaşanıyor. Nedenini ben de bilmiyorum ama muhtemelen Blogger altyapısından dolayı. O yüzden her değişiklik yaptığınızda sayfa kodlarını sıfırdan düzenlemeniz gerekecek. O yüzden ne değişiklik yapacaksanız hepsini tek seferde yapmanız gerekiyor.
Sil