Blogger'a Arşiv Tablosu Ekleme

Arşiv sayfaları ziyaretçilere tüm içeriğinizi tek bir yerden görme şansı verdiği için kullanıcı dostu ve oldukça faydalı sayfalardır. Bunun için ben de bir arşiv sayfası oluşturmuş ve bunu nasıl oluşturabileceğinizi paylaşmıştım.

Fakat benim paylaştığım arşiv sayfası tüm konu başlıklarını alt alta sıraladığı için yazı sayısı 1000’den fazla olan bloglarda kullanıcıların arşivi incelemesi biraz zor oluyordu. Bu yüzden Blogger’da tablo şeklinde bir arşiv sayfası oluşturulup oluşturulmayacağı ile ilgili bir araştırma yaptım ve Endonezya’lı bir arkadaşın aşağıda gördüğünüz projesine denk geldim.

Resimde de gördüğünüz gibi arşiv sayfasında blog yazılarınızda kullandığınız etiketler, sekme şeklinde tablonun sol tarafında alt alt sıralanıyor. Ve bu sekmelere tıkladığınızda o etikete ait yazılar listeleniyor. Böylece hem daha minimal hem de daha kullanıcı dostu arşiv sayfanız olacak.


Blogger arşiv tablosu ekle


Siz de Blogger blogunuzda böyle bir arşiv tablosu oluşturmak istiyorsanız Blogger kumanda paneline giriş yaptıktan sonra Sayfalar > Yeni Sayfa yolunu takip edin ve resimde gösterdiğim gibi aşağıdaki kodları sayfanın HTML bölümüne ekleyin.



blogger arşiv sayfası

<div id="tabbed-toc">
<span class="loading">Sayfa yükleniyor...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://bloghocam.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: true,
    showSummaries: true,
    numChars: 200,
    showThumbnails: true,
    thumbSize: 40,
    noThumb: "https://lh3.googleusercontent.com/-vuYNMl4ft0M/VZpjZGBIZFI/AAAAAAAALjk/vqRQH4M66Gk/s500/resimyok.gif",
    monthNames: [
        "Ocak",
        "Şubat",
        "Mart",
        "Nisan",
        "Mayıs",
        "Haziran",
        "Temmuz",
        "Ağustos",
        "Eylül",
        "Ekim",
        "Kasım",
        "Aralık"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0,
    sortAlphabetically: true,
    showNew: 7,
    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>Yeni!</em>"
};
</script>
<script src="https://googledrive.com/host/0B_PLgWpOK_wTazVMekZ3TTBiY2M/" type="text/javascript"></script>
<style>
#tabbed-toc {
width: 99%;
margin: 0 auto;
overflow: hidden !important;
position: relative;
color: #222;
border: 0;
border-top: 5px solid #FC0204;
background-color: #1D1D1D;
-webkit-transition: all 0.4s ease-in-out;
}
#tabbed-toc .loading {
display:block;
padding:5px 15px;
font:normal bold 11px Arial,Sans-Serif;
color:#FFF;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
margin:0;
padding:0;
list-style:none;
}
#tabbed-toc .toc-tabs {
width: 24.8%;
float: left !important;
}
#tabbed-toc .toc-tabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer;
  -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .toc-tabs li a:hover {
background-color: #515050;
color: #FFF;
}
#tabbed-toc .toc-tabs li a.active-tab {
background-color: #FFFC03;
color: #222;
position: relative;
z-index: 5;
margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
width: 75%;
float: right !important;
background-color: #F5F5F5;
border-left: 5px solid #FFFC03;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .divider-layer {
float:none;
display:block;
position:absolute;
top:0; right:0; bottom:0;
}
#tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px Arial,Sans-Serif;
}
#tabbed-toc .panel li a {
display: block;
position: relative;
font-weight: bold;
font-size: 11px;
color: #222;
line-height: 2.8em;
height: 30px;
padding: 0 10px;
text-decoration: none;
outline: none;
overflow: hidden;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px;
color:#666;
float:right;
}
#tabbed-toc .panel li .summary {
display:block;
padding:10px 12px;
font-style:italic;
border-bottom:4px solid #275827;
overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
background-color: #DBDBDB;
font-size: 10px;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
background-color:#222;
color:#FFF;
outline:none;
-webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
background-color:#fff;
border:0 solid #888;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
overflow:hidden;
width:auto;
float:none !important;
display:block;
}
#tabbed-toc .toc-tabs li {
display:inline;
float:left !important;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
background-color:#222;
color:#ccc;
}
#tabbed-toc .toc-tabs li a.active-tab {
color:#000;
}
#tabbed-toc .toc-content {
border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
display:none;
}
}
</style>


Kodlarda kırmızı renkle gösterdiğim http://bloghocam.blogspot.com yerine kendi blog adresinizi yazmayı unutmayın!

45 yorum:

  1. Peki bir süre etiket kullanıyoruz hocam hangi etiketlerde ki yazıları gösterebileceğimizi seçebiliyor muyuz? Seçiyorsak nasıl yapıyoruz. Saygılar

    YanıtlaSil
  2. Hayır, tüm etiketler otomatik olarak listeleniyor. İstediğimizi gösterip göstermeme seçeneği yok malesef.

    YanıtlaSil
  3. Teşekkürker :) Peki site hızında yavaşlama olur mu ?

    YanıtlaSil
  4. @Trend Güzeli
    Ana sayfadan bağımsız ayrı bir sayfada olduğu için blogun açılış hızını etkilemez.

    YanıtlaSil
  5. Haocam çok güzel ama bunu etiketlerden değilde aylara göre sıralanmışını nasıl yapabiliriz.

    YanıtlaSil
  6. @Ruhsuz Atmaca
    Emin değilim ama şunu false yapmayı deneyin.
    sortAlphabetically: true,

    YanıtlaSil
  7. Güzelmiş İnşallah çalışır uyguluyorum teşekkürler

    YanıtlaSil
  8. @Adam Zeka
    Deneyip çalıştığına emin olmadan hiçbir şey paylaşmıyorum zaten.

    YanıtlaSil
  9. merhaba blog hocam yazılArınızı kendi blogumda paylaşmak istiyorum kaynak belirtecegim izin verirseniz. vermesseniz paylaşmayacagım hırsızlık yapmak istemem saygılar.

    YanıtlaSil
  10. Güzel bir eklenti, deneye değer :)

    YanıtlaSil
  11. @kivanc
    Kaynak göstererek paylaşabilirsiniz.

    YanıtlaSil
  12. @Ruhsuz Atmaca
    tarihi göre sıralanabilen tablo şeklinde arşiv sayfası yapımını buradan bulabilirsin.
    http://blogbakkali.blogspot.com.tr/2015/07/blogger-tablo-seklinde-arsiv-sayfasi-yapimi.html

    YanıtlaSil
  13. Arşiv sayfaları gerçekten kullanıcı dostu. Aradığımız içeriğe kolayca ulaşabiliyoruz. Eklentiyi bloguma ekledim. Blog tanıtımı kategorileri kolayca bulunabiliyorum, fakat etiketler çok olduğu için biraz uzun oldu arşiv. Eklenti için teşekkür ederim Serdar Bey.

    YanıtlaSil
  14. Başarılı bir kod çalışması olmuş tebrik ederim Serdar Bey.

    YanıtlaSil
  15. Saolun hocam işime yaradı.

    YanıtlaSil
  16. Teşekkürler
    Diğer arşiv sayfasını kullanıyordum. Ama hem çok uzun hem de etiketler arada pek görünmüyordu. Renk ve tasarım biraz basit görünsede oldukça kullanışlı.

    YanıtlaSil
  17. Hocam merhaba iyi günler sizi uzun zamandır takip ediyorum. http://bilisimhoca.blogspot.com.tr/ Bu sitedeki menü açılan etiketler kısmını nasıl oluşturabilirim. Sitenin yazarına sordum ama cevap gelmedi. Lütfen bununla ilgili makale yazar mısınız.

    YanıtlaSil
  18. Gerçekten güzel bir yazı blogumu geliştirme aşamasındayım ve bu yayını başka bir yabancı blogda görmüştüm yapamamıştım inşallah sizin yazınız sayesinde yaparım saolun. Blogum : http://semihkececioglu.blogspot.com/

    YanıtlaSil
  19. selam blog hocam bu site ve diger tum turk blogcuları inceledim blogger tasarım konularını blogger cidden cokmu geri hayalimdeki hic bir seyi yapamadım mesela ufacık bir yere kucuk bir slider eklicem onla butun gün ugrastım zaman kaybi 1 blogger le yaklasık olarak bir aydır icli dıslı ugrasıyorum gadget eklentiler dısında blogger tasarım ve duzenleme blog kayıtları görunusu hakkında en ufak bir bilgi bulamadım dış kaynakları cok arastırdım ordada tam ıstedıgım sekilde blog tasarlamak icin hic bir bilgi yok blogger cok gerilemis seo konusunda biraz ilerlemis mobil telefon yapılan bu sene bir kac tema dısında onlarda iyinin kötüsü iste yani demem oki blogger bırakın bence hic bir ilerlemesi yok harcadıgım zamana yazık cidden wordpress le ugrassaydım daha iyiydi bir ay wordpress kesin dönüs yapacam temalarına bakın duzenlmeneye bıle gerek yok blogger cidden zaman kaybı geriledikce gerilemis pişman oldum bide millet bildiklerini sır gibi saklamazmı komik cidden ne yse kolay gelsin

    YanıtlaSil
  20. Serdar Bey, uzun süredir blogevimde sizin sayenizde cok güzel uygulamalar buluyor ve kullanıyorum. Hepsi cok basarılı.Minnettarım dogrusu...Özellikle arsiv tablosu mükemmel oldu. Ellerinize emeklerinize saglık. Tesekkürlerimle

    YanıtlaSil
  21. işime yarayan paylaşım yine saolun hocam.

    YanıtlaSil
  22. blogger'ıma yıldızlı oylama sitemi gibi bişey yapmak istiyorum sizin sitedeikine baktım hatta en az 40 50 site gezdim hiçbi rating vb sitesi olmuyor temada uyumsuzluk varmış diyorlar bunu nası düzeltebilirim

    YanıtlaSil
  23. Çok güzel bir paylaşım olmuş. Sadee renk ayarlarında oynama yapılması gerekli. Zira Her sitenin renk uyumu farklı. Bu hususta yorumunuz varsa sevinirim.

    http://www.gebelikhesaplama.co

    YanıtlaSil
  24. çok iyi çok işime yaradı teşekürler...

    YanıtlaSil
  25. Arşiv sayesinde diğer postlarınıza internal link vermiş ve longtail trafiğinizi arttırmış oluyorsunuz.

    Teşekkürler blog hocam.

    YanıtlaSil
  26. blogunuzu lise yıllarımdan beri takip ediyorum şuan üniversite 3. sınıftayım ; pek çok blog açtım pek yayın yaptım ; sayenizde sitelerim kalitesini her geçen gün artırdım yeni hesabımla mesleğimle bağlantılı olacak şekilde 3 gün önce yeni bir site açtım ; siz blog yönetici ve tüm kullanıcılarınızı siteme davet etmekten onur duyarım :)

    Tekrardan emeğine sağlık üstad
    www.hukukhocam.com beklerim :)

    YanıtlaSil
  27. Dediklerinizi harfiyen yapıyorum fakat tıpkı diğer arşiv olmadığı gibi buda olmadı.Lütfen bakar mısınız ?

    http://vucutdengesi.blogspot.com.tr/

    YanıtlaSil
  28. Teşekkürler, ufak renk değişiklikleriyle blogumun temasına tam uydu.. Güzel ve yararlı..

    http://cbulog.blogspot.com/p/arsiv.html

    YanıtlaSil
  29. Hocam elinize sağlık, çok güzel bir paylaşım olmuş, renk ayarları da yapıla bilse çok güzel olacak... :)
    Bkz; http://harunistenci.blogspot.com/p/arsiv.html

    YanıtlaSil
  30. Çok teşekkürler hocam.Arşiv eklentisi arıyordum bende artık bunu kullanıyorum..Gerçekten çok kaliteli içeriklere sahip bir blogun var bu yardımlarından ötürü sana ayrıca herkez adına teşekkür ederim

    YanıtlaSil
  31. hocam dediklerinizi uyguladım fakat sitemde arşiv kısmı çıkıyor neden böyle oluyor

    YanıtlaSil
  32. Merhaba
    Ben dediğiniz gibi yapıştırdım olmadı.Yardımcı olurmusunuz?

    YanıtlaSil
  33. Hocam 2 ya da 3 tane bloğu bir arşiv tablosuna entegre edebilirmiyim, yoksa sadece bir bloğumu kabul ediyor?

    YanıtlaSil
  34. Bende ekledim çok teşekkürler Serdar Bey...

    YanıtlaSil
  35. Anlattığınız diğer arşivi oluşturmuş fakat bazı etiketler gözükmüyor diye bunu yüklemiştim. Bunda da gözükmüyor mesela Maldivler etiketi ile hiç yazı yok gözüküyor aslında 9 tane var, yada kitap etiketi 9 gözüküyor aslında 30 adet var gibi.
    Yardımcı olursanız çok sevinirim.
    www.yollardahayatvar.com

    YanıtlaSil
  36. sayfa yükleniyor diye kalıyor hocam

    YanıtlaSil
  37. Merhaba

    bu fonksiyonu www.nehissettinseo.com a uyguladım

    deneme yanılma yöntemiyle kendi tarzıma göre epey bir değişiklik yaptım

    ancak iki hususu değiştiremedim

    -soldaki etiketler baştan sona örneğin: MÜREKKEP ACI gibi tamamen büyük harflerle çıkıyor ki bu tarz bir yazım şekli bloguma aykırı

    -soldaki etiketlerde örneğin; MÜREKKEP ACISINDA HİSSEDİLENLER gibi orjinal etiket, ancak belli sayıdaki karakter kadar gösteriyor,

    - küçük resimlerin yanındaki kısa metinleri arial / 10 fontuna dönüştüremedim

    öncelikle bilgi için teşekkür ederim

    bilgili ve ilgili tüm siz bloggerlardan yardımınızı rica ederim

    teşekkür ederim

    YanıtlaSil
    Yanıtlar
    1. Etiketlerin tamamen büyük harfle çıkmasını engelemek için şu satırı silmeniz yeterli: text-transform:uppercase;

      Sil
    2. Merhaba Serdar Kara

      cevabınız çok hızlı geldi, beklemiyordum açıkçası,
      teşekkür ederim öncelikle :)

      çözümünüzü uyguladım ve oldu http://www.nehissettinseo.com/p/tum-yazilar.html


      aynı html içinde yer alan 2 çözüm ihtiyacım var

      rica etsem buna da bilginizle cevap alabilir miyim?

      -soldaki etiketlerde örneğin; MÜREKKEP ACISINDA HİSSEDİLENLER gibi uzun bir etiket, ancak MÜREKKEP ACISI olarak bir kısıtlı karakter gösteriyor,

      - küçük resimlerin yanındaki kısa metinleri arial / 10 fontuna dönüştüremedim

      teşekkür ederim

      www.nehissettinseo.com

      Sil
  38. Yani ne diyeyim.ÇOK TEŞEKKÜRLER

    YanıtlaSil
  39. çook teşekkürler, süper bir paylaşım...

    YanıtlaSil
  40. Bloggerda arşiv sayfaları açılmaz oldu, sizinkine tıkladım oda açılmıyor.
    Daha önce tıkır tıkır çalışan kodlar artık çalışmıyor, denemediğim kod kalmadı ne yazık ki, acaba bloggerın https geçmesiyle ilgisi var mıdır?
    Yada elimizdeki kodları yeniden çalışır hale getirmemizin bir yolu var mı?

    YanıtlaSil
  41. https ye geçildiğin için çalışmıyor galiba.

    YanıtlaSil

Blogger tarafından desteklenmektedir.