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.