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

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.

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.

/* https://teknoowin.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.

Konuyla ilgili farklı sorularınız olabilir, bunun için aşağıdaki yorum formunu kullanarak sorunlarınızı belirtiniz.