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&max-results=9999&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.
5 Yorum
Merhaba,
YanıtlaBlogunuzun arşiv bölümünde kullandığınız eklentiyi kullanmak istiyorum yardımcı olur musunuz?
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.
Yanıtla<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>
Emeğinize sağlık, arşiv sayfanizdaki tarih kısmı hatalı gibi geldi bana, ay ve günler biçimi farklı.
YanıtlaStandart değil. TEŞEKKÜRLER.
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ıtlaSizin bir arşivinizin tarihinde birinde ay önce diğerinde gün önce, tabikide standart a
YanıtlaYı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.
Yorumlarda Kod vs. Kullanmak İÇİN