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.

Lights | Ellie Goulding

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() {
$(&#39;[data-disari]&#39;).click(function(e) {
e.preventDefault();
if($(e.srcElement).attr(&#39;target&#39;) == &quot;_blank&quot;) {
window.open(&quot;http://www.furkanozden.net/p/external.html?url=&quot; + $(e.srcElement).attr(&#39;href&#39;), &#39;_blank&#39;);
} else {
window.location = &quot;http://www.furkanozden.net/p/external.html?url=&quot; + $(e.srcElement).attr(&#39;href&#39;);
}
});
});
</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

Bunlar da hoşunuza gidebilir...

Görüşleriniz benim için değerlidir.

30 Cevaplar

  1. Poyraz Şahin dedi ki:

    Bir demo sayfası oluştursaydınız daha iyi olurdu.İkinci okumamda amacını anlayabildim 🙂

  2. hasan dedi ki:

    Cok tesekkürler yararlı bilgi.

  3. Kerim Potuk dedi ki:

    Çok güzel hocam. Bunun wordpress için olanı olaydı iyiydi 🙂

  4. kralizasyon dedi ki:

    Önizleme için seçtiğin sayfa da bi ayrı güzel.

  5. ahmet Güler dedi ki:

    Önizlemye benim websiteyi yapsan sevaba girersin 😀 safdsfasdfsda

  6. Anonymous dedi ki:

    herşeyi yaptımda şu kod mevzusu olmadı:S

  7. Arda Erakman dedi ki:

    Çok iyi olmuş bu Furkan. Sağolasın.

  8. Mustafa Çakmak dedi ki:

    Nereden buluyorsun böyle güzel eklentileri? 😀 Adresini verde bizde bulalım 🙂

  9. 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

  10. Yunusemre Çelik dedi ki:

    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.

  11. C Adam dedi ki:

    Bloggerdaki sayfa sınırı kalktımı?

  12. Anonymous dedi ki:

    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.

  13. Kemal Acar dedi ki:

    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…

    • Furkan Özden dedi ki:

      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.

  14. Nicat dedi ki:

    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!

    • Furkan Özden dedi ki:

      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.

      • Nicat dedi ki:

        Ö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)

  15. Şenol KAYHAN dedi ki:

    Teşekkürler 🙂

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Loading Facebook Comments ...
Loading Disqus Comments ...