Ads

Update: Source Code Sitemap Blogger Dengan Navigasi Abjad

Update Source Code Sitemap Blogger Dengan Navigasi Abjad
dagruel.com

Update: Sitemap Blogger Tanpa Encrypt. Sudah Support 150 post lebih langsung saja comot.

Pasang css berikut di atas </style> atau ]]></b:skin>.

#mapAbjd{font-size:14px;font-weight:400}#mapAbjd .judul{font-size:150%;background-color:#008c5f;color:#fff;font-weight:600;text-align:center;margin-bottom:20px;padding:15px}#mapAbjd a{color:#666;text-decoration:none;transition:all .3s ease;white-space:nowrap;overflow:hidden}#mapAbjd a:hover{color:#000}#mapAbjd .isi .abjad{background-color:#36688a;color:#fff;padding:10px 15px;font-size:110%;font-weight:600;text-transform:uppercase;position:relative}#mapAbjd .isi .abjad:nth-of-type(even){background-color:#b53428}#mapAbjd .isi .abjad #top:before{content:'';width:12px;height:calc(100% - 20px);position:absolute;right:0;top:0;padding:10px;cursor:pointer;background:rgba(0,0,0,.2) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat}#mapAbjd ol,#mapAbjd ol li{list-style-type:none}#mapAbjd .nav ol{margin:0 0 15px;padding:0;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}#mapAbjd .nav ol li{background-color:#444;color:#fff;padding:7px 0;cursor:pointer;margin:0 5px 5px 0;text-align:center;text-transform:uppercase;width:40px}#mapAbjd .nav ol li:last-child{margin-right:0}#mapAbjd .isi ol{margin:0 0 20px;padding:0;border:1px solid #ccc;border-top:0;overflow:hidden}#mapAbjd .isi ol li{color:#666;list-style-type:none;margin:0;padding:10px;line-height:1.5em;display:flex;width:47%;float:left}#mapAbjd .isi ol li:before{content:'';width:20px;height:20px;min-width:20px;min-height:20px;margin:0;vertical-align:-5px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%234b4f56'/%3E%3C/svg%3E") center no-repeat;transition:.4s all ease;-webkit-transition:.4s all ease;-moz-transition:.4s all ease;-ms-transition:.4s all ease;-o-transition:.4s all ease}#mapAbjd .isi ol li:hover:before{transform:rotate(-36deg);-webkit-transform:rotate(-36deg);-moz-transform:rotate(-36deg);-ms-transform:rotate(-36deg);-o-transform:rotate(-36deg)}@media screen and (max-width:680px){#mapAbjd .isi ol li{width:100%;float:none}}@media screen and (max-width:480px){#mapAbjd{font-size:13px}#mapAbjd .judul{padding:10px}#mapAbjd .isi .abjad{padding:7px 15px}}@media screen and (max-width:360px){#mapAbjd{font-size:12px}#mapAbjd .judul{padding:10px}#mapAbjd .isi .abjad{padding:7px 12px}#mapAbjd .isi ol li{padding:7px 12px}}

Selanjut nya Buat Halaman Baru dan pasang HTML dan script berikut.

<div id="mapAbjd">Loading....
<script>/*<![CDATA[*/
const mapAbjd={compile:function(){for(var t in this.settings.arr.forEach(t=>{const s=t.title.charAt(0).toLowerCase();-1==this.settings.abjad.indexOf(s)?(this.settings.abjad+=s,this.settings.grup[s]=[{title:t.title,url:t.url}]):this.settings.grup[s].push({title:t.title,url:t.url})}),this.settings.grup)this.settings.key.push(t);const s=this.settings.key.sort();s.forEach(t=>{this.settings.print+=`<div class="abjad"><span data-value="${t}">${t}</span><span id="top" title="Back to Top"></span></div><ol>`;for(let s=0,i=this.settings.grup[t];s<i.length;s++){let t=i.sort((t,s)=>t.title>s.title?1:-1);this.settings.print+=`<li><a href="${t[s].url}" title="${t[s].title}">${t[s].title}</a></li>`}this.settings.print+="</ol>",this.settings.nav+=`<li>${t}</li>`}),this.settings.output.innerHTML=`<div class="judul">Total Post: ${this.settings.arr.length}</div><div class="nav"><ol>${this.settings.nav}</ol></div><div class="isi">${this.settings.print}</div>`,this.scrollRun()},create:function(t){if("entry"in t.feed){const s=t.feed.entry;s.forEach(t=>{const s=t.title.$t,i=t.link.find(t=>"alternate"==t.rel).href;this.settings.arr.push({title:s,url:i})}),s.length>=this.settings.max?(this.settings.start+=this.settings.max,this.run()):this.compile()}else 0!=this.settings.arr.length&&this.compile()},run:function(){if(this.settings.output=document.getElementById("mapAbjd"),!this.settings.output)return console.log("Output Noting");const t=void 0===this.settings.label?"":`/-/${this.settings.label}`,s=document.createElement("script");s.src=`/feeds/posts/summary${t}?alt=json&callback=mapAbjd.create&start-index=${this.settings.start}&max-results=${this.settings.max}`,document.body.appendChild(s)},settings:{abjad:"",arr:new Array,grup:new Array,key:new Array,max:150,nav:"",print:"",scroll:"instant",start:1},scrollRun:function(){document.querySelectorAll(".nav ol li").forEach(t=>{t.onclick=(t=>{const s=t.currentTarget;document.querySelector(`.isi .abjad [data-value="${s.innerHTML}"]`).parentNode.scrollIntoView({behavior:this.settings.scroll,block:"start"})})}),document.querySelectorAll(".isi .abjad #top").forEach(t=>{t.onclick=(()=>{document.querySelector(".nav").scrollIntoView({behavior:this.settings.scroll,block:"start"})})})}};
mapAbjd.settings.label = 'Blogger';
mapAbjd.run();
/*]]>*/</script>
</div>
Perhatikan text yang di tandai. Jika ingim semua postingan terindex maka hapus yang di tandai. tetapi jika yang ingin di tampilkan adalah label tertentu saja silahkan ganti tulisan Blogger dengan nama label yang di inginkan.

Sampai sini sudah selesai, silahkan lihat hasil nya. Jika berhasil maka akan tampil seperti di Demo.

Cara Menambahkan Gambar di dalam script.

"media$thumbnail" in entry ? entry.media$thumbnail.url.match(/\/s[0-9]{2}-(w[0-9]+-)?c/) ? entry.media$thumbnail.url.replace(/\/s[0-9]{2}-(w[0-9]+-)?c/, '/w100-h150-p-k-no-nu') : entry.media$thumbnail.url.replace(/\=s[0-9]{2}-(w[0-9]+-)?c/, '=w100-h150-p-k-no-nu') : 'noImageUrl';

17 komentar

Blogger Disqus
  1. Mau nanya lagi, bagaimana mengatasi alphabet hanya muncu M S T,
    A B C... dst hilang.
    Demo Page
    Aku memakai label Anime

    BalasHapus
    Balasan
    1. kesalahan dalam menulis judul postingan aja itu, di awal terdapat space.
      " Arifureta Shokugyou de Sekai Saikyou "
      Cek lagi postingan nya.

      Hapus
    2. Sudah fix,
      tenyata benar ada spasi di awal judul.

      Hapus
  2. Bisa bantu aku menambahkan thumbnail dan tanggal.
    Desainnya kira2 seperti ini:
    https://blogger.googleusercontent.com/img/a/AVvXsEg5tZYGB3R3nwQLsQKj7yYab4Ifeg9usv2vbjpxYBTEPCwcTpTm7lFidUHy8vLicRVOAXgzXXX_hZe06DmRi0iIbhPQbXZ6XOsgiRWih6VGmuKFZuCoQgtKgOlARHpvo1Gp5ea7KCyOOByPBJ0Xqi26BF7zhlFpZR5s2OaccpnSXFZZSkAJY6KSnUi6=s1006
    yang penting ada thumbnail dan tanggal, style css tidak perlu, aku kerjakan sendiri.

    BalasHapus
  3. Min kok pas dipencet tidak berfungsi?https://blogger.googleusercontent.com/img/a/AVvXsEj-KWL802PxK3OjOXV3IhL9CZTffhuEodiyy1HwskxBfmQ8HNE0-LtMR9VqbqUk7trT9CWCndVXibIv7QZKLln81Xo5u61KDx0XNSOffdXfpL1D8-oEqdV48oYYNI_Gl6Ys9An29S8J3QXqru5mi7IcEZuEY-R7o4cawvVjXBm4bXmDTgWUAZ05_XFv

    BalasHapus
    Balasan
    1. Mungkin ada js yang kurang lengkap. Coba cpy paste sekali lagi

      Hapus
    2. udah kucoba tadi tapi masih belum bisa

      Hapus
    3. coba pasang ulang lagi.
      code yang kira nya bermasalah sdh di update.

      Hapus
    4. belum bisa bang, kayaknya masalanya ada ditemplate

      Hapus
    5. @Dani_Edtz_
      Menurutku bukan masalah template,
      tapi code yg di parser kayaknya menyebabkan js nya corupt.
      Coba ambil langsung source codenya dengan inspect element di demo.

      Hapus
    6. pasang code ini di bawah <head>
      <script>
      window.onload = function() {
      mapAbjd.scrollRun();
      }
      </script>

      klo masih gak bisa, ada masalah di tempate nya.

      Hapus
  4. Judul postingan saya kan pake Batch Subtitle Indonesia min, nah tulisan itu bisa dihilangin gk biar gak kepanjangan dan enak dilihat. thanks before

    BalasHapus
    Balasan
    1. cari t[s].title di dalam script nya. ubah menjadi.
      t[s].title.split('Batch')[0]

      Hapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
  • Gunakan Shortcode berikut untuk menambahkan gambar atau Video. Contoh:
    <i rel="spoiler image">url_gambar</i>
    <i rel="spoiler">spoiler_text</i>
    <i rel="iframe">url_embed</i>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!