Bugün sizlerle güzel bir çalışma paylaşıyorum. Saf javascript ile yazılmış ve Blogger api 3.0'a dayanan, yayın tarihine göre düzenlenmiş bir yazı dizini oluşturan eklentidir.
Blogun tüm yazılarını alabildiği ve bunu optimize edilmiş bir şekilde yaptığı, yalnızca tarihin gerektirdiği verileri talep ettiği için 150 giriş sınırı sorunu yoktur. Bu nedenle mükemmel bir performans elde eder.
Kurulum
Blogger yönetim panelimize giriyoruz, ardından Temalar > Özelleştir > Gelişmiş Seçenekler > Özel CSS'e gidiyoruz ve aşağıdaki kodu yapıştırıyoruz.
/*!
=> GetData Historial v1.0.2
=> Copyright 2018 Daniel Abel | fb.com/danieI.abel (zkreations)
=> Licensed under MIT | github.com/zkreations/GetData/blob/master/LICENSE
*/.wjs-history__list,.wjs-history__list-element,.wjs-history__title,.wjs-history__title-url{background:0 0;padding:0;margin:0;border:0;list-style-type:none;box-shadow:0 0 transparent;font:inherit;text-decoration:none}.list-element__count,.list-element__date,.wjs-history__list-element{display:flex}.list-element__count,.list-element__date{align-items:center}.wjs-history__title::before{display:block;position:absolute;content:"";top:50%;width:100%;left:0;transform:translateY(-50%)}.wjs-history__title-url{display:inline-block;padding-right:1em;position:relative;z-index:1}.wjs-history__title{position:relative;margin-bottom:.5em}.list-element__count{padding:0 1em}.wjs-history__list{margin-bottom:1em}.list-element__title{display:block}.list-element__title,.wjs-history__title-url{transition:color .3s}.list-element__date svg{margin-right:.5em}@keyframes loading{from{transform:rotate(0)}to{transform:rotate(360deg)}}svg.wjs-history__loading{animation:loading infinite linear .5s;fill:rgba(0,0,0,.75)}
/*
=> Özelleştir
*/
/* Cuerpo
--------------------------------------------*/
.wjs-history {
font-size: 14px; /*tamaño de fuentes*/
}
/* Başlık (ay ve yıl)
--------------------------------------------*/
.wjs-history__title-url {
background-color: #ffffff; /*color de fondo*/
color: rgba(0, 0, 0, 0.5); /*color*/
font-weight: 700; /*grosor del texto*/
font-size: 1.1em; /*tamaño de fuente*/
}
.wjs-history__title::before {
border-top: 4px double #D9D9D9; /*decoracion del titulo*/
}
/* Liste
--------------------------------------------*/
.wjs-history__list {
margin-bottom: 1.5em; /*Separacion entra listas*/
background-color:rgba(222, 221, 218, 0.2); /*color de fondo*/
}
.wjs-history__list-element:nth-child(even) {
background-color: rgba(0, 0, 0, 0.05); /*color de fondo cada 1 elemento*/
}
/* Öğeleri listeleyin
--------------------------------------------*/
.list-element__count {
font-weight: 700; /*grosor del texto (dia)*/
background: rgba(0, 0, 0, 0.1); /*color de fondo (dia)*/
font-size: 1.1em; /*tamaño de fuente (dia)*/
}
.list-element__data {
padding: 1em; /*relleno (datos)*/
}
/* Gönderi başlığı
--------------------------------------------*/
.list-element__title {
color: rgba(0, 0, 0, 0.75); /*color*/
font-size: 1.1em; /*tamaño de fuente*/
font-weight: 500; /*grosor del texto*/
}
/* Gönderi tarihi
--------------------------------------------*/
.list-element__date svg {
width: 16px; /*tamaño del icono*/
fill: rgba(0, 0, 0, 0.4); /*color*/
}
.list-element__date {
color: rgba(0, 0, 0, 0.4); /*color*/
font-weight: 700; /*grosor del texto*/
font-size: 12px; /*tamaño de fuente*/
}
Değişikliklerin yürürlüğe girmesi için "Uygula" düğmesine basmayı unutmayın. Ardından yönetim panelinize geri dönün, "Sayfalar" sekmesini seçin ve "Yeni Sayfa" düğmesine tıklayın:
Yazı editörüne girdikten sonra, editörü HTML moduna geçiriyoruz ve ardından aşağıdaki kodu içerik olarak yapıştırıyoruz:
<!-- Historial v1.0.2 | github.com/zkreations/GetData -->
<div id='wjs-history' data-blogid='{blogid}' data-apikey='{apikey}'>
<svg class='wjs-history__loading' xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 50 50'><path d='M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z'></path></svg>
</div>
<script src='//cdn.rawgit.com/zkreations/GetData/master/labs/plugins/wjs-history/getdata_historial.min.js'></script>
{blogid} yerine blog kimliğinizi ve {apikey} yerine API anahtarınızı yazmanız zorunludur. Her ikisini de nasıl alacağınız aşağıda açıklanmıştır:
Veri alma
{blogid}
Kimlik kodunu almak için gezinti çubuğunu kontrol etmeniz yeterlidir. Kod, blogID= ve # ifadeleri arasında bulunan sayısal kombinasyon olacaktır:
{apikey}
API anahtarını kolayca almak için Blogger uygulamaları için API anahtarı alma yazımdaki adımları izleyin.
Veriler doğru şekilde değiştirildikten sonra, "Yayınla" düğmesine basın, böylece yeni oluşturduğumuz sayfa blogda kullanılabilir hale gelir. Hepsi bu kadar.
Özelleştir
İşlevsel css kodunu estetikten ayırıp, ayrıca kod boyunca yorumlar bıraktım. Böylece her şeyin neyi değiştirdiğini bilebilirsiniz.
Şimdilik hepsi bu kadar. Umarım faydalı olmuştur. Eğer öyleyse, sosyal ağlarınızda paylaşmayı unutmayın.
