Blogger Tablo Şeklinde Arşiv Sayfası Yapımı

Temmuz 07, 2015
Blogger için bu zamana kadar birçok farklı şekilde sitemap veya arşiv sayfası yapımı anlatıldı. Benim şimdi sizlerle paylaşacağım arşiv sayfası yapımında bir farklılık göreceksiniz. Blogger bloğunuz için hazırlanan bu modern tarzdaki arşiv eminim sizinde çok hoşunuza gidecek.

blogger-tablo-arsiv-yapimi

Bu sitemap sayfamızda tüm yayınlarımızı ister başlığına göre ister tarihine göre sıralayabiliyoruz. Tüm yazılarımız tablo şeklinde alt alta düzgünce sıralanıyor. Haydi başlıyoruz:

İlk olarak aşağıdaki HTML kodlarını blogger panelimizde Sayfalar > Yeni Sayfa oluştur yolunu takip ederek açılan yazı alanında sol üstte HTML butonuna tıklayıp oraya yapıştırıyoruz ve yayınlıyoruz.

<div id="bp_toc">
</div>
<script src="http://yourjavascript.com/4205717119/arsiv.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>

Daha sonra blogger panelimizden Şablon>HTML'yi Düzenle yolunu takip ederek CTRL+F tuşlarına basarak ]]></b:skin> kodunu bulup üst satırına aşağıdaki kodları ekliyoruz.

/* http://blogbakkali.blogspot.com.tr/ */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;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 {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}

Son olarak arşivin görünümde değişiklik yapmak istiyorsak background:#ffaaa4 gibi değişkenlerle oynayın. Buradaki yazımda renk kodlarını paylaşmıştım renklerle ilgili karar vermenize yardımcı olur.

Evet işlemler bu kadar. Arşiv sayfamız son derece modern bir görünüme kavuştu. Anlatamamış olabilirim veya sizin konuyla ilgili farklı sorularınız olabilir, bunun için aşağıdaki yorum formunu kullanarak sorulr sorabilirsiniz. İyi bloglamalar.

Arama: blogger tablo şeklinde arşiv sayfası yapımı, tarihe göre sıralanan arşiv nasıl yapılır sitemap tüm yayınları tablo şeklinde alt alta gösterme.

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

5 Yorum
avatar

Merhaba,

Blogunuzun arşiv bölümünde kullandığınız eklentiyi kullanmak istiyorum yardımcı olur musunuz?

Yanıtla
avatar

Merhaba, yeni sayfa oluşturun. HTML kısmına aşağıdaki kodları yapıştırın ve kodlar içerisindeki blogbakkali.blogspot.com.tr adresini kendi adresinizle değiştirin hazır.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 0 1px #eee;}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #eee;transition:initial;}
.table-of-content .toc-header:hover{background-color:#fdfdfd;}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#fc4f3f transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#fcfcfc!important;transition:initial;border-bottom:1px solid #e9e9e9;border-top:1px solid #fff;}
.table-of-content li:first-child(border-top:0}
.table-of-content li:last-child(border-bottom:0}
.post ol li a,.post ol li a:link{color:#444!important;text-decoration:none;font-size:86%;transition:initial}
.post ol li a:visited{color:#999;transition:initial}
.post ol li a:link:hover,.post ol li a:visited:hover{color:#fc4f3f;text-decoration:underline;transition:initial}
.post ol li:before{display:none}
ol {text-shadow:initial;}
.post a:link {color:#444!important;}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading"></span></div>
<script>
var toc_config = {
url: 'http://blogbakkali.blogspot.com.tr/',
containerId: 'table-of-content',
showNew: 15,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">yeni</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script> </div>

Yanıtla
avatar

Emeğinize sağlık, arşiv sayfanizdaki tarih kısmı hatalı gibi geldi bana, ay ve günler biçimi farklı.
Standart değil. TEŞEKKÜRLER.

Yanıtla
avatar

Hatalı değil Mustafa Bey, Yıl-Ay-Gün şeklinde gösteriliyor. Evet standart değil ama arşiv sayfalarında genellikle tarih bu şekilde gösterilir diye işte neyse sağolun yorum için :)

Yanıtla
avatar

Sizin bir arşivinizin tarihinde birinde ay önce diğerinde gün önce, tabikide standart a
Yıl ay gün dür, ben sizin kodda yada yayınlama tarihinizde sıkıntı var demiştim. Kusuruma bakmayın.
Emeğinize sağlık, TEŞEKKÜRLER.

Yanıtla

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔