Blogger için git.php Şeklinde URL Yönlendirme Özelliği

URL yönlendirme özelliği, tema paylaşım yazılarında, reklamlarda ve dışarı link verilen her yerde dışarı link vermeyi sevmeyen (kim sever ki?) blogcuların işine yarayabilecek süper bir yöntem. Bu yöntemi uygulamak için herhangi bir hosting hesabına veya karmaşık bir kod sistemine ihtiyacınız yok. Sadece birkaç css, html ve javascript kodu yeterli.
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
Ö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 🙂
Tam çalıştığından emin olmadan koymak istemedim. Şu an mevcut 🙂
Cok tesekkürler yararlı bilgi.
Çok güzel hocam. Bunun wordpress için olanı olaydı iyiydi 🙂
Hocam millet bunun Blogger versiyonunu arıyordu yana yana 🙂 WordPress zaten var. Yok mu 😕
Önizleme için seçtiğin sayfa da bi ayrı güzel.
Önizlemye benim websiteyi yapsan sevaba girersin 😀 safdsfasdfsda
herşeyi yaptımda şu kod mevzusu olmadı:S
Çok iyi olmuş bu Furkan. Sağolasın.
Nereden buluyorsun böyle güzel eklentileri? 😀 Adresini verde bizde bulalım 🙂
hocam 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
Anlattıklarımın aynını uygulaşmısınız fakat neden öyle bir siteye yönlendiğini ben de anlayamadım.
Furkan hocam, artık işlemiyormu anlamadım?
http://www.yunusemrecelik.blogspot.com sorunsuz çalışıyor örneğin son konuma bakabilirsiniz.
Ancak yeni blog açtım oraya işlemedi ; http://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.
Bloggerdaki sayfa sınırı kalktımı?
Hayır hâlâ aynı.
Sizin ö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.
iframe kodunun içine div ekledim o kadar.
Hocam bu konuda senin kadar usta değiliz gerçi usta değiliz 😀
bende 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.
Bu yorum yazar tarafından silindi.
hocam şimdi
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.
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.
sağolun hocam iyi bir paylaşım olmuş..
Hocam 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
URL 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.
Selam. Hocam, mevcut yazılardakı dış linklerin belli bir sayfamızda iframe olarak otomotik açmasını (her yazıdakı linki ayrılıkta düzenlemeden) nasıl sağlaya biliriz? Ve Bloggerde yapılan bu işlem sidebarda ve header altında yerleşen adsense kodlarını etkilemezmi?…
Bir de bu yontemi WP siteye nasıl uygulaya biliriz?
Cevabınız için önceden teşekkürler!
Blogger için her yazıdakı linki ayrı ayrı düzenlemeden yapmak mümkün görünmüyor. Bu işlem WP için hazır eklenti kullanılarak 2 dakikada yapılabilir.
Önce, cevabınız için tekrar teşekkürler, Furkan bey! WP için bu işi yapabilen ve güvenilir olan hangi eklentiyi tavsiyye ediyorsunuz?… (wordpress.org/plugins dizininde yerleşen)
Teşekkürler 🙂
Merhaba, biraz eski bir konuyu hortlatmış gibi olacağım şu an ama git.html’de üst kısma bir menü eklemek istiyorum fakat beceremedim. ne yaparsam ne edersem beceremedim. Yardımcı olma şansınız var mı acaba ?
git.html sayfasında menü kodunu javascriptin üstüne ekleyin.