Davetsiz Hayat'a hoşgeldiniz, 17 Kasım 2017

Blogger Akordiyon Arşiv Eklentisi – Arşiv Sayfası

Bu yazımızda  Blogger bloglarda arşiv sayfası nasıl hazırlanır onu anlatmaya çalışacağız. Öncelikle  blogger panelimize giriş yapıyoruz. Buradan  sayfalar  kısmına tıklayarak yeni bir sayfa oluşturuyoruz. Bu sayfanın adını kendinize göre düzenleyebilirsiniz. Arsiv, Arsiv Sayfasi gibi  Türkçe karakter kullanmadan  bir sayfa oluşturabilir siniz.

Sayfamızı oluşturduktan sonra  blogger için tasarlanan etikete duyarlı arşiv eklentisini  blog sayfamıza uyarlama adımına geçiyoruz.  Aşağıdaki  kodu  oluşturduğumuz arşiv sayfasına  HTML  bölümüne yapıştırıyoruz.

 

[code]<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 10px rgba(0,0,0,.2)}
.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 #ccc;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:#666 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:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten…</span></div>
<script>
var toc_config = {
url: ‘http://viennatheme.blogspot.com/’,
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;">baru</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>[/code]

Kodu yapıştırdıktan sonra direk kaydediyoruz. Arşiv sayfası kullanılmaya hazır oldu. Örnek görünümü için aşağıdaki demo’ yu inceleye bilirisiniz.

Demo

 

Etiketler:

BU KONUYU SOSYAL MEDYA HESAPLARINDA PAYLAŞ

Yorumlar

Henüz yorum yapılmamış.

Yorum Yaz