Blogunuzda Bulunan Yazıların Tamamını Bir Tabloda Gösterin

Yeni, yine , yeniden...

Blogger kullanıcıların gönlüne taht kuracak bir eklenti ile karşınızdayım. Bu eklentiyi bu blogda da sağ tarafta "Yazı Tablosu" adı altında görebilirsiniz. Bu eklentinin amacı blogunuzda bulunan yazıların tamamını bir tablo içinde göstermek. Üstelik başlıkları adlarına , yayınlanma tarihine göre sıralamak ve etiketine göre listelemek mümkün.

Öğle saatlerinde Beautiful Beta blogunda gördüğüm bu eklentiyi kullanabilmek için gerekli olan JavaScript dosyasını vakit geçirmeden Türk Blogger kullanıcıların kullanımına sunmak için düzenlemeye ve Türkçeleştirmeye başladım ve nihayetinde bitirdim. Bu eklenti de "Son Yorumlar" eklentisi gibi JSON-Feed ile çalışmakta.

Lafı daha fazla uzatmadan uygulamaya geçelim.


Güncelleme: Bu uygulamayı MaFiAMaX Blog!'tan kaldırdım. Sebebi sağ tarafta bulunan sidebar'ın geç yüklenmesine sebeb olmasıdır. Uygulamanın örneğini görmek için buraya tıklayın.

Uyarı 1: Bu düzenlemeleri yapmadan önce blog şablonunuzun bir yedeğini mutlaka alın.

Uyarı 2: Bu yöntem Blogger XML şablonlar içindir. Klasik şablonlar için uygulama farklıdır.

Çalışmamız her zamanki gibi HTML, CSS ve JavaScript olmak üzere 3 kısımda ilerleyecek.

HTML Kısmı


Sayfa Ögesi Ekle bölümünden blogumuza HTML/JavaScript ögesini seçin ve aşağıdaki kodu yapıştırıp kaydedin.
<div id="toc"></div>

Böylelikle yazı sonuçlarının görüntüleneceği kısmı belirlemiş olduk. Bu sayfa ögesini sayfa ögeleri bölümünde "Blog Yazıları" sayfa ögesinin hemen üstüne koymak en iyisi. Çünkü sonuçlar geniş bir tabloda listelenmeli. Yoksa düzgün bir görüntü elde edemezsiniz.

Daha sonra başka bir HTML/JavaScript sayfa ögesi açın ve aşagıdaki kodları yapıştırın. Bu sayfa ögesi de JavaScript dosyamızdan sonuçları çağıracak öge.
Örnek:benim blogumda sağ tarafta en üst kısımda bulunan "Yazı Tablosu [Yeni]"
<div id="toclink"><a href="javascript:showToc();">Yazıların tamamını bir tabloda görmek için tıklayın(Bu adı siz değiştirebilirsiniz)</a>
</div><script src="http://kullanıcıadı.googlepages.com/mafiamax-blogtoc.js"></script><script src="http://BLOGADRESİNİZ.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Eğer JavaScript dosyasını kendiniz başka bir alan adı altında barındırabiliyorsanız, scriptte bulunan koyu adresin yerine JavaScript dosyasını barındırdığınız adresi yazabilirsiniz.

CSS Kısmı


JavaScript kodunda tanımladığımız ögeleri burada stillendirebiliriz. Bunlar;

.toc-header-col1 = Tabloda "Yazı Başlığı" yazan kısım
.toc-header-col2 = Tabloda "Yazı Tarihi" yazan kısım
.toc-header-col3 = Tabloda "Etiket" yazan kısım
.toc-entry-col1 = Tabloda yazıların görüntülendiği kısım
.toc-entry-col2 = Tabloda tarihlerin görüntülendiği kısım
.toc-entry-col3 = Tabloda etiketlerin görüntülendiği kısım

Bu ögeleri CSS ile istediğiniz şekilde stillendirebilirsiniz.

Örnek olarak benim CSS kodlarım:


#toc { border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;}

.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #eeeeee;
color: #000000;
padding-left: 5px;
width:250px;}

.toc-header-col2 {
width:75px;}

.toc-header-col3 {
width:125px;}

.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
color:#8cab46;
text-decoration:none;}

.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
background:#666666;}

.toc-entry-col1 a:link, .toc-entry-col1 a:visited, .toc-entry-col3 a:link, .toc-entry-col3 a:visited {
padding-left: 0px;
color:#000000;
font-size:80%;
text-decoration:none;}

.toc-entry-col2 {
padding-left: 10px;
color:#000000;
font-size:80%;}

.toc-entry-col1 a:hover, .toc-entry-col3 a:hover, {
padding-left: 0px;
font-size:80%;
text-decoration:underline;}


JavaScript Kısmı


Bu kısmı ben sizin için hazırladım :-)) Javascript dosyanızı kendi sunucunuzda yayınlamak için indirmek isterseniz tıklayın.
Aklınıza takılan her hangi bir konuyu sormaktan çekinmeyin...

MaFiAMaX Blog!'ta Yazı Tablosu

Yorumlar

  1. Valla tahmin ettiğim şeyi yaptıysan süper ama ben ne yaptığını anlayamadım açıkcası. Bir örnek ya da beutiful beta sayfasını da versen

    YanıtlaSil
  2. :-)) Erdal benim blogta en üst sağ tarafa bakarsan anlarsın. Arama kutusunun hemen üstü.

    Blogta bulunan tüm yazıları bu yöntemle bir tabloda görüntüleyebiliyorsun.

    YanıtlaSil
  3. Valla süper olmuş. Bi şey daha soracam misal benim bloga yaptık bunu 700'ün üstünde yazı var. Ne olacak alttarafa doğru mu inecek.

    Bir de bi şey danışacam. Ben nasıl yapıldığını fazla araştıramadım. Misal bu siteye girdik "Hack" labellerinı arattırdık. Yazıların sadece başlıkları gözüküyor. Yazı yok yani. Onu nasıl yapmış eleman. Bi bakabilecen mi?

    YanıtlaSil
  4. Öncelikle şunu belirteyim. Bu eklenti en fazla 100 yazıyı gösteriyor. 100'ün üzerinde gösterebilmesi için:

    <-script src="http://BLOGADINIZ.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=100&callback=loadtoc"-><-/script-><-script src="http://BLOGADINIZ.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=101&max-results=100&callback=loadtoc"-><-/script->

    bu koda bakacak olursak yazımda verdiğim koddan farklı olarak koyu ile belirtilmiş script fazladan yazılı. Bunu yazarak 101. yazıdan itibaren 200. cü yazıya kadar olan yazıları da bu tabloda görüntüleyebiliyoruz. Tabi 200 den fazlası için de koyu renkli scriptin aynısını ekleyip scriptte ...index=201 koymalıyız. Ama bunu eklerken diğer scriptleri silmeyeceksin. Çünkü her biri 100 yazıyı çağırıyor.

    Biraz karışık oldu kusura bakma...

    YanıtlaSil
  5. Oldukça işe yarar bir widget olmuş teşekkurler

    YanıtlaSil
  6. hıımm güzel olmuş..

    yazı da güzel ama ben üşeniyorum yapmaya :-p

    YanıtlaSil
  7. selam ben bu söylediklerinizi yaptım fakat yazılar sidebar da çıktı sizin blogunuzdaki gibi postların olduğu bölgede değil ve yazıların tamamı tabloda gözüküyor sebebi nedir acaba?

    YanıtlaSil
  8. şu kodu <-div id="toc"-><-/div-> "blog yazıları yada blog posts" yazan kısmın üzerine koyduğumuzda sidebar da değilde ana bölümün olduğu yerde görüntüleniyor tablo ama bütün yazılar listeleniyor 100 aşkın:) :(

    YanıtlaSil
  9. @İsimsiz merhaba,

    Bak ben yazımda nedemişim:

    Sayfa Ögesi Ekle bölümünden blogumuza HTML/JavaScript ögesini seçin ve aşağıdaki kodu yapıştırıp kaydedin.

    <-div id="toc"-><-/div->

    Böylelikle yazı sonuçlarının görüntüleneceği kısmı belirlemiş olduk. Bu sayfa ögesini sayfa ögeleri bölümünde "Blog Yazıları" sayfa ögesinin hemen üstüne koymak en iyisi. Çünkü sonuçlar geniş bir tabloda listelenmeli. Yoksa düzgün bir görüntü elde edemezsiniz.


    Yani yazıyı dikkatli okumamışsın :-)

    Blog adresini verirsen senin bloguna da bakıp yardımcı olabilirim.

    Çok fazla yazı olunca haliyle tablo uzayıp gidiyor. Ama açılır kapanır olması bu dezavantajını kaldırıyor.
    --------------------------------
    @TaFuGu,

    Bence üşenme, hatta Google hesabını bana ver ben senin için yapayım :-))

    YanıtlaSil
  10. hımm çok faideli bir çalışma olmuş:D

    YanıtlaSil
  11. Merhaba MaFiAMaX,

    Bu eklenti için teşekkürler. Çok güzel ve faydalı bir eklenti.

    Bloguma yükledim ve güzel çalışıyor. Ama bir sorun var. Blogtaki tıklanmamış linkler lacivert ve altı çizgili olarak görülmeye başladı. Bu neden oldu acaba? Bunu eski haline nasıl getirebilirim? Yardımcı olursan sevinirim.

    Çalışman için tekrar teşekkürler.

    YanıtlaSil
  12. Bu tamamen CSS ile ilgili. Tıklanmış linkler (a:visited) ile tanımlanır. Eğer normal linklere ve tıklanmış linklere aynı stillendirmeyi yaparsanız aradaki fark ortaya çıkmaz.

    Blogunuzdaki CSS kodlarına baktım ve a:link ve a:visited değerlerinin aynı stillendirmeye sahip olduğunu gördüm. Dolayısıyla bir sorun oluşmamısı gerek. Kendim de bizzat blogunuzda inceledim ama bir sorun göremedim.

    YanıtlaSil
  13. Bende ziyaret edilmemiş linkler lacivert renkte gözüküyor. Eskiden böyle değildi. Acaba sizde farklı mı gözüküyor? Acaba bende mi bir sorun var?

    YanıtlaSil
  14. Şimdi hem IE hem de FF ile deneme yaptım. Şablonunuzda bulunan CSS kodlarında bir sorun yok. Ama tarayıcılar tabloyu açtıktan bir kaç sn sonra CSS yorumunu algılıyorlar.

    Şablonunuzda dikkat ettiğim bir nokta da .toc-header-col1 = Tabloda "Yazı Başlığı" yazan kısım gibi tanımlamaları
    /*
    Tanımlamalar
    */
    içerisine almamışsınız. Bu yüzden bu sorun oluşuyor kanımca.

    YanıtlaSil
  15. Evet sorun ondan kaynaklanıyormuş. İlgilendiğiniz için çok teşekkürler.

    YanıtlaSil
  16. Javascript dosyasinin linki olmus.tekrardan yukleyebilirseniz sevinirim.simdiden tesekkurler

    YanıtlaSil
  17. Uyarınız için teşekkür ederim. Bağlantı güncellenmiştir.

    YanıtlaSil
  18. ben tesekkur ederim ilgilendiginiz icin..basarilar

    YanıtlaSil
  19. ozur diliyorum ama tekrardan bi sorum olacakti.acilan pencerede yazi tarihi ve etiketleri kaldirmamiz mumkunmu acaba...

    YanıtlaSil
  20. @serkan, istediğin şekilde çalışan JavaScript dosyasını hazırlayıp yükledim. İndirip bu dosyayı kullanabilirsin.

    YanıtlaSil
  21. cok tesekkur ederim ilgilendiginiz icin,size zathet verdigim icinde kusura bakmayin.calismalarinizda basarilar...

    YanıtlaSil
  22. Merhabalar, ben sürekli deniyroum ama bir türlü ilk aşamayı bile kaydetmeyi beceremedim. Konu başında bahsettiğin klasik ve klasik olmayan şablonlar için ayrı ayrı yöntemler var demişsin ya, aceba ununla mı bir ilgisi var, kestiremiyorum. Şimdi işin ilginç yanı ben daha benimkinin klasik mi değil daha onu bilmiyorum(googlenin verdiği şablonu kullanmıyorum. Şablonu, Şablon veren siterin birinden almıştım)... meşgul etmek istemem ama bir el atarsan çok savinirim... istersen bloguma giriş bilgilerimi de verebilirim... şimdiden teşekkürler...

    YanıtlaSil
  23. @ömero, kullandığınız şablon XML şablon. Bir sorun olmaması gerek. Açıkcası şimdiye kadar bu yöntemi onlarca kişi yaptı, sizde de çalışmaması için hiç bir neden yok.

    Bir ara tanıyıp tanımadığım bir çok kişinin temasına müdehale edip düzenleme yaptım. Ancak bundan sonra bu tür birşeyle uğraşacak vaktim yok.

    Lütfen kusura bakmayın.

    YanıtlaSil
  24. Tabiî ki ne demek. Yalnızca ben dün daha ilk aşamayı yapamıyorum demiştim ya, işte o sorun kalktı ortadan. Verdiğin JavaScript'in ne işe yaradığı çok açık, dosyayı indirdim ama neye, nereye, nasıl? Yükleyeceğimi çözemedim. Direkt açıp içindeki kodları, İkinci aşamada yapılmasını istediğiniz yönteme mi uygulayacağız(nasıl açılır neyle açılır şu JavaScript?) . Eğer öyleyse verdiğin JavaScript'i nasıl açıp işleyeceğimi bilemedim... Bir de tüm yazıları göstersin istiyorum, İlk oluşturduğum HTML/JavaScript öğesini “Blog Yazıları” kısmının üstünde tutmam yeterlimi yoksa verdiğin JavaScript 'le de ayrıca bir işlem yapmak gerekiyor mu(Ah! Şu cahilliğin gözü kör olsun!)… JavaScript'i kendi sunucunuz da dediğin olay, Örneğin ben Bloggerda tutabilri miyim?... ( ya şu devamını oku eklentisini kurmak daha zordu ama onu yaptım da şu olay daha basit ama nedense kavrayamıyorum :) Muhtemelen çok basittir ama acemi olunca gel de çık işin içinden): İlgin için Teşekkürler, Ola ki Ben yapamasam da, Çok harika bir uygulama, paylaşımların için sağ ol...

    YanıtlaSil
  25. @ömero, şimdi en baştan daha yalın bir şekilde anlatacağım.

    1-) Öncelikle HTML Kısmı başlığı altındaki ikinci kodu aynı ilk kodda yaptığın gibi HTML/Javascript Sayfa ögesi içine koyup keydedeceksin. Blog ayarlarından Yerleşim > Sayfa Ögeleri sekmesine gelip, şablonun sağ tarafında bulunan Sayfa Ögesi Ekle linkine tıklayıp açılan pencereden HTML/Javascript olanı seçip kodu içine yapıştıracaksın. Kodda bulunan bazı yerleri sizin blogunuza göre değiştireceğinizi unutmayın.

    2-) Şimdi CSS Kısmı başlığına geçelim. Buradaki kodlardan anlamıyorsan benim verdiğim örnek kodları aynen kullanabilirsiniz. Şimdi bu kodları koyacağın yeri anlatayım.

    Blog ayarlarından Yerleşim > HTML'yi Düzenle sekmesine gel. Burada şablonun kodlarını göreceksiniz. Burada en başlara doğru <head> etiketini bulun ve hemen altına CSS kodlarını yapıştırın.

    Son olarak şablonu kaydedip ve çıkın.

    3-) Javascript Kısmı en son adım. Burada verdiğim dosyayı Googlepages hesabına yükleyeceğiz şimdi. Bunun için Google Page Creator'a girip Google kullanıcı adı ve şifreniz ile giriş yapın.

    Giriş yaptıktan sonra sağ tarafta Upload stuff başlığı altında upload linkine tıklayın ve bilgisayarınıza indirdiğiniz Javascript dosyasını yükleyin.

    Gördüğünüz gibi bu dosyayı açıp herhangi bir müdehalede bulunmaya gerek yok, zaten ben gerekli olan herşeyi en başta yapmıştım.

    Hatırlatma: Bu dosyayı yükledikten sonra dosyanın adresi şu şekilde olacaktır:

    http://googlekullaniciadi.googlepages.com/mafiamax-blogtoc.js

    Bu adresi HTML Kısmında ikinci kodda http://mafiamax.googlepages.com/mafiamax-blogtoc.js yerine eklemeyi unutmayın!

    YanıtlaSil
  26. Müthiş bir anlatım oludu, zahmetin için çok teşekkür ederim. İşte bu kez başardım sanırım(: Sanıyorum çünkü henüz tüm konulara bakmaya nail olamadım): ne kadar bakmak istesem, bir kutucul çıkıyor ve "Lütfen bekletin..." diyor. umarım yarın baktığım da görmüş olurum... Görmesem de bu açıklayıcı bilgiler için müteşekkirim...

    YanıtlaSil
  27. Yok dostum ya! olmadı. Sunucumu değiştirip senin sunucuna yönlendirdim gene olmadı.. var bir yerde bir terslik ama...
    Sağlık olsun.

    YanıtlaSil
  28. gün olur ben de yaparım aynısını

    YanıtlaSil
  29. Mafiamax merhaba, Google Page Creator' a üye alımları durdurulduğundan giremiyorum. Sizin hazırladığınız Javascript dosyasını başka nerde sağlıklı olarak upload edebilirim.

    YanıtlaSil
  30. @merwick, bir çok alternatif vardır ama bence Google Sites veya 110mb.com'u deneyebilirsin. Belki daha iyileri de vardır...

    YanıtlaSil
  31. @Mafiamax ilgilendiğin için teşekkürler. Hemen Google sites'de işe koyuldum. Ama maalesef upload etmek istediğimde "Sorry, we do not currently support '.js' files diyor.
    .js uzantılı haricinde sanki tüm diğer uzantılı dosyaları kabul ediyor. HTML olarak nasıl yapabilrim ki. Seni de rahatsız ediyorum işin vardır mutlaka ama taktım kafaya yapıcam bunu bugün. :)

    YanıtlaSil
  32. @Mafiamax, Yok saçmaladım ben sanırım afedersin Javascript olması lazım. Biraz daha kurcalıyayım şu işi bir çaresini bulurum. HTML olmazki zaten. Saatlerdir bir sürü kodlarla uğraşmaktan kafam karıştı.

    YanıtlaSil
  33. @merwick, şimdilik .exe, .s gibi dosya uzantıları kabul edilmiyor. Bunu yazımda da belirttim. Başka bir servisi denemelisin.

    YanıtlaSil
  34. @Mafiamax, müsait olduğunda benim siteye bakabilirsen tabloyu yapmış olduğumu görebilirsin. Ohhh be dedim inan :) Ama şimdilik tam istediğim gibi bir tablo olmadı,en azından nasıl yapıldığını öğrendim. Çok teşekkürler buradaki tüm açıklamaların için.

    YanıtlaSil
  35. @merwick, bloguna baktım, yapmışsın. Güle güle kullan.

    YanıtlaSil
  36. @Mafiamax yine ben. :) Teşekkürler bakabildiğin için. Ancak bir şey sormak istiyorum. Yukarıdaki sizin CSS kodlarınızı Head den sonra yerleştirdim üzerinde oynamalar yapıyorum yazı rengi,zemin rengi v.s. ama hiç bir şekilde değişmiyor. Sizi de usandırmamak için sormak istemedim ama bu saat oldu olmuyo bir türlü..Sizin yaptığınız örnekteki gibi 3 kolon birden görünmüyor sadece yazı başlıkları görünüyor, tarih ve etiketler görünmüyor. Etiketlerden vazgeçtim ama en azından tarihlerini gösterebilsem. Müsait olduğunda cevap verebilirsen sevinirim.

    YanıtlaSil
  37. Siz benim yazımda paylaştığım dosya yerine serkan kullanıcı adlı ziyaretçi için hazırladığım JavaScript dosyasını indirmişsiniz. Yazımın sonundaki dosyayı indirin lütfen.

    Ayrıca Videolu Blogger İpuçları başlılı yazımdaki videoyu da izleyebilirsiniz.

    YanıtlaSil
  38. Mafiamax merhaba. Çok teşekkür ederim haklısın ben yanlış dosyayı kullanmışım ve düzelttim. Hazırladığın video'yu izledikten sonra çok kolaylaştı benim için. İki-üç gündür Blogger Buster'daki gibi üç tab'lı yan menü yapmaya o kadar dalmışım ki teşekkür etmediğimi bugün buradaki yorumlara göz gezdirirken farkettim.

    Yayınladığınız önceki yazılarınıza baktım ama bu 3 tab'lı menü konusu ile ilgili bir yazıyı belki ben bulamadım. Bu konuya daha önce değinmediyseniz bence iyi bir yazı konusu olabilir. Çünkü bu konuda yardıma ihtiyacım var bazı yerlerini bir türlü yapamıyorum. :)

    Ayrıca son duyuru'nuzdakilere takmayın bence. Benim gibi nice insanlara bıkmadan usanmadan buradan yardım ediyorsunuz, bir nevi teknik destek servisi gibisiniz.

    Bu sitede yayınlanan yazıları ve tüm yorumları zevkle okuyorum ve arkadaşlarıma da sitenizi öneriyorum. Yolunuz daha da açık olsun!

    YanıtlaSil
  39. @merwick, videonun işe yaradığına sevindim. Yapa yapa, hatalarını göre göre öğreniyor insan.

    Blogger Buster da gerçekten yararlı bir kaynak. Evet, ben bahsettiğin konuya değinmedim. Aslında Türkçe kaynak olarak bir sürü adres var ama Blogger için anlatanı var mı bilmiyorum. Açıkcası ben videolu anlatımlarıma devam edeceğim, aklımda bu konu yok. Ama sen bana e-posta yoluyla nerede takıldığını anlatırsan yardımcı olabilirim.

    Görüşlerini paylaştığın için teşekkür ederim.

    YanıtlaSil

Yorum Gönder