BloggerScript: Javascript Library khusus Blogger

BloggerScript: Javascript Library khusus Blogger

BloggerScript adalah javascript yang khusus di desain untuk website berbasis "Blogger", dan berfungsi sebagai peringkas script, mempercepat web, dll.

Bagi yang suka membuat script tentang blogger khusus nya script untuk mengambil "Feed" yang berupa data json, dengan "BloggerScript" ini maka proses nya akan lebih simpel.

Postingan ini akan menjelaskan bagaimana dan perbedaan menggunakan BloggerScript atau tidak. Jadi langsung saja pasang script nya.

Cara Memasang BloggerScript

Pasang kode javascript berikut di atas tag </head> pada template blogger kalian.

<script type='text/javascript'>/*<![CDATA[*/
  "use strict";class BloggerScript{constructor(a={}){this.config=a,this._siteMap={arr:new Array,callback:"undefined",fc:"function",max:150,start:1,url:"url"}}siteMap(b,c=function(a){console.log(a)}){let a=this;a.xhr("GET",`${b}?alt=json-in-script&start-index=${a._siteMap.start}&max-results=${a._siteMap.max}`,function(d){if("entry"in d.feed){let e=d.feed.entry;Array.prototype.push.apply(a._siteMap.arr,a.getFeed(d)),e.length>=a._siteMap.max?(a._siteMap.start+=a._siteMap.max,a.siteMap(b,c)):c(a._siteMap.arr)}else c(a._siteMap.arr)})}getFeed(a){if(a.feed.entry){let b=new Array;return a.feed.entry.forEach(a=>{let c={};c.title=a.title.$t,c.link=this.getLink(a.link),c.image=this.getImage(a),c.label=this.getLabel(a.category),c.date=this.getTime(a.published.$t),c.published=a.published.$t,c.updated=a.updated.$t,"summary"in a&&(c.summary=a.summary.$t),"content"in a&&(c.content=a.content.$t),"author"in a&&(c.author=this.getAuthor(a)),b.push(c)}),b}return[]}getImage(a){if("media$thumbnail"in a)return this.resizeImage(a.media$thumbnail.url);if(!("content"in a))return this.config.noImage||"";{let b=a.content.$t,d=b.indexOf("<img"),c=b.indexOf('src="',d),e=b.indexOf('"',c+5),f=b.substr(c+5,e-c-5);return -1!=d&& -1!=c&& -1!=e&&""!=f?f:this.config.noImage||""}}getAuthor(a){var b,c,d,e,f,g;return{name:(null===(b=a.author[0])|| void 0===b?void 0:null===(c=b.name)|| void 0===c?void 0:c.$t)||"",link:(null===(d=a.author[0])|| void 0===d?void 0:null===(e=d.uri)|| void 0===e?void 0:e.$t)||"",image:(null===(f=a.author[0])|| void 0===f?void 0:null===(g=f.gd$image)|| void 0===g?void 0:g.src)||""}}getLink(a){return a.find(a=>"alternate"==a.rel).href}getLabel(a){return a.map(a=>a.term)}getTime(c){if(/([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/.test(c)){var b=c,d=b.substring(0,4),e=b.substring(5,7),f=b.substring(8,10),a=new Array;return a[1]="Jan",a[2]="Feb",a[3]="Mar",a[4]="Apr",a[5]="May",a[6]="Jun",a[7]="Jul",a[8]="Aug",a[9]="Sep",a[10]="Oct",a[11]="Nov",a[12]="Dec",f+" "+a[parseInt(e,10)]+" "+d}return!1}resizeImage(a){return this.config.sizeImage?a.match(/\/s[0-9]{2}-(w[0-9]+-)?c/)?a.replace(/\/s[0-9]{2}-(w[0-9]+-)?c/,`/${this.config.sizeImage}`):a.replace(/\=s[0-9]{2}-(w[0-9]+-)?c/,`=${this.config.sizeImage}`):a}relatedPost(b=function(a){console.log(a)}){let a=this,c=0,d=new Array,e=document.location.pathname;"undefined"!=a.config.label&&""!=a.config.label&&0!=a.config.label.length&&a.config.label.forEach(f=>{a.xhr("GET",`/feeds/posts/default/-/${f.replace(/\&amp;/g,"&").replace(/\//g,"%2F")}?alt=json-in-script&max-results=${a.config.jumlah}`,function(g){if("entry"in g.feed&&a.getFeed(g).forEach(a=>{!a.link.includes(e)&&(d.some(b=>b.link==a.link)||d.push(a))}),++c==a.config.label.length){if(0==d.length)return!1;let f=a.shuffle(d);return f.length>a.config.jumlah&&(f=f.slice(0,a.config.jumlah)),b(f)}})})}randomPost(b,c=function(a){console.log(a)}){let a=this,d=a.config.jumlah;a.xhr("GET",`${b}?alt=json-in-script&max-results=0`,function(f){let e=f.feed.openSearch$totalResults.$t;if(a.config.allRandom)e=e<=150?1:a.shuffle2(1,e-150),d=150;else{if(e<a.config.jumlah)return;e=a.shuffle2(1,e-a.config.jumlah)}a.xhr("GET",`${b}?alt=json-in-script&start-index=${e}&max-results=${d}`,function(b){if("entry"in b.feed){let d=a.getFeed(b);return c(d=a.shuffle(d))}})})}shuffle(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a}shuffle2(a,b){return Math.floor(Math.random()*(b-a))+a}xhr(b,c,d){let a=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");a.onreadystatechange=function(){if(4==this.readyState&&200==this.status||304==this.status){let a=this.responseText,b=JSON.parse(a.substring(a.indexOf("{"),a.lastIndexOf("}")+1));d&&d(b)}},a.onerror=a=>console.log(a),a.open(b,c,!0),a.send()}inTag(b){let a=document.createElement("script");a.src=b,document.body.appendChild(a)}}
/*]]>*/</script>

Jika sudah di pasang kita lihat perbedaan dalam pembuatan script nya. Di sini saya akan menulis script untuk mengambil feed blogger.

Pertama script yang tidak memakai "BloggerScript".

function createFeed(e) {
  let entry = e.feed.entry;
  entry.forEach(item => {
    let title = item.title.$t,
      link = '',
      summary = item.summary.$t,
      image = item.media$thumbnail.url ? item.media$thumbnail.url : 'url_noImage';
    for (let inz = 0; inz < i.link.length; inz++) {
      let el = link[inz];
      if ('alternate' == el.rel) {
        link = el.href;
        break;
      }
    }
  })
}

Script di atas untuk mengambil gambar dan link saja kode nya sudah cukup panjang belum lagi gambar nya belum di resize dan belum support untuk postingan yang pakai gambar bukan dari bloggger.

Selanjut nya script jika pakai "BloggerScript".

let bS = new BloggerScript({
  noImage: 'Url_Gambar',
  sizeImage: 'w207-h300'
})

function createFeed(e) {
  let entry = bS.getFeed(e);
  entry.forEach(item => {
    let title = item.title,
      link = item.link,
      image = item.image,
      date = item.date,
      summary = item.summary;
  })
}

Script yang memakai "BloggerScript" untuk mengambil data menjadi lebih simpel bahkan gambar nya sudah di resize dan sudah support untuk postingan yang pakai gambar bukan dari blogger.

Cara Menggunakan BloggerScript

Kalian sudah melihat perbedaan dalam menggunakan BloggerScript dengan yang tidak, sekarang adalah cara menggunakan nya. Kalian hanya perlu membuat variable baru dengan nama terserah kalian misal:

let script1 = new BloggerScript({
  noImage: 'Url_Gambar',
  sizeImage: 'w480-h320'
})

Di atas kita membuat variable script1. Jadi kita hanya perlu menggunakan fungsi-fungsi nya saja. Berikut Daftar Fungsi nya.

xhr

xhr ini berfungsi untuk memanggil script feed dari blogger. Sebelum nya kita lihat dulu script yang tidak menggunakan "BloggerScript".

<script>
  function getPost(e) {
    ...........
  }
</script>
<script src='/feeds/posts/default?alt=json-in-script&max-results=10&callback=getPost'></script>

Sedangkan xhr seperti ini.

<script>
  function getPost(e) {  
    ...........
  }
  script1.xhr('GET', '/feeds/posts/default?alt=json-in-script&max-results=10', getPost)
</script>

Atau bisa juga begini.

<script>
  script1.xhr('GET', '/feeds/posts/default?alt=json-in-script&max-results=10', function(e) {
    ...........
  })
</script>

Kelihatan simpel bukan. Oke lanjut sekarang adalah fungsi untuk mengisi bagian function nya.

getFeed

getFeed ini hasil nya berupa array object yang akan secara otomatis mengambil semua data. Berikut data yang di ambil.

Key Desc
title Mengambil Judul Postingan
link Mengambil Link Postingan
image Mengambil Gambar yang langsung di resize
label Mengambil Daftar Label Postingan berupa array.
date Mengambil tanggal postingan
summary Snippet Post versi pendek
content Snippet Post versi panjang
author berupa object untuk mengambil nama, link dan gambar author. (author.name, author.link, author.image)

Berikut contoh script nya jika di pasang kedalam function getPost.

<script>
  function getPost(e) {  
    let entry = (script1.getFeed(e));
    entry.forEach(item => {
      item.title;
      item.image;
      item.link;
      item.date;
      item.label;
      item.summary;
      item.content;
      item.author.name;
      item.author.link;
      item.author.image
    });
  }
  script1.xhr('GET', '/feeds/posts/default?alt=json-in-script&max-results=10', getPost)
</script>

Adapun Fungsi yang lain adalah versi manual dari fungsi getFeed.

Fungsi Manual dari getFeed.

Key Desc
getLink Mengambil Link Postingan
getImage Mengambil Gambar yang langsung di resize
getLabel Mengambil Daftar Label Postingan berupa array.
getTime Mengambil tanggal postingan
getAuthor Mengambil data penulis (Berupa object)

Contoh nya.

<script>
  function getPost(e) {  
    let entry = e;
    entry.forEach(item => {
      let link = script1.getLink(item.link);
      let image = script1.getImage(item);
      let date = script1.getTime(item.published.$t);
      let label = script1.getLabel(item.category);
      let author = script1.getAuthor(item);
    });
  }
  script1.xhr('GET', '/feeds/posts/default?alt=json-in-script&max-results=10', getPost)
</script>

Sampai sini dulu nanti fitur nya akan di tambahin setelah update berikut nya.

Bonus Script

<ul id='output'></ul>
<script>
  let script1 = new BloggerScript({
    noImage: 'Url_Noimage',
    sizeImage: 'w480-h320'
  })
  function getPost(e) {  
    let entry = script1.getFeed(e);
    let html = '';
    entry.forEach(item => {
      html += `<li><img src='${item.image}'/><a href='${item.link}'>${item.title}</a><div>${item.date}</div></li>`;
    });
    document.getElementById('output').innerHTML = html;
  }
  script1.xhr('GET', '/feeds/posts/default?alt=json-in-script&max-results=10', getPost)
</script>

Artikel Terkait

42 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>

Emoticon

  • Berkas Kita
    9 Juli 2022 22.19
    Profil: https://www.blogger.com/profile/05392949523370725401
    keren bang, akhirnya web nya kebuka lagi.
  • Wernayasa
    9 Juli 2022 23.37
    Profil: https://www.blogger.com/profile/09171272848542294839
    Akhirnya balik lagi.
    Bagaimana dengan postingan lama, apakah hilang atau nanti di post ulang?
    • Шош. Сом
      10 Juli 2022 07.34
      Profil: https://www.blogger.com/profile/11131198046075365419
      postingan akan di update satu-satu
    • Nay
      15 Agustus 2022 02.26
      Profil: https://www.blogger.com/profile/00306083901598888680
      @Wernayasa
      Is EmissionHex forum closed? Or gone private? :D
    • Wernayasa
      16 Agustus 2022 18.49
      Profil: https://www.blogger.com/profile/09171272848542294839
      @Nay
      maintenance, i will be back
  • Berkas Kita
    14 Juli 2022 11.06
    Profil: https://www.blogger.com/profile/05392949523370725401
    bang saran BloggerScript kasih komen versi biar mudah dilihat kalok ada update/pembaruan V.1, V.2 dan seterusnya

    // BloggerScript V.1
    BloggerScript....


    saran saja bang
    • Wernayasa
      15 Juli 2022 14.26
      Profil: https://www.blogger.com/profile/09171272848542294839
      Baru mau komment, duluan kamu.
      Iya, biar gampang melacak versinya.

      Menurutku ini lebih cocok disebut framework, biar kedengaran keren aja.
  • Dani_Edtz_
    21 Juli 2022 17.12
    Profil: https://www.blogger.com/profile/17902859638216038844
    thanks bang sangat cocok buat saya yang pengen bisa javascript tapi males belajar🗿
  • true
    25 Juli 2022 18.24
    Profil: https://www.blogger.com/profile/03791865258710224921
    bang untuk custom post gimana bang?
    script1.xhr('GET', '/feeds/posts/default?alt=json-in-script&max-results=10', getPost)
    script1.xhr('GET', '/feeds/posts/default/-/LABEL?alt=json-in-script&max-results=10', getPost)
    supaya ngisi label gak manual gimana ya bang?
    • Шош. Сом
      25 Juli 2022 18.32
      Profil: https://www.blogger.com/profile/11131198046075365419
      yang no 2 sudah benar itu.
    • true
      25 Juli 2022 18.48
      Profil: https://www.blogger.com/profile/03791865258710224921
      dah coba memang bisa, kayak kurang enak saja gitu. mau nya pakek var : nama label gitu, bisa kah bang
    • Шош. Сом
      25 Juli 2022 18.51
      Profil: https://www.blogger.com/profile/11131198046075365419
      kaya gini.let customLabel: "Series";
      script1.xhr('GET', `/feeds/posts/default/-/${customLabel}?alt=json-in-script&max-results=10`, getPost)
    • Шош. Сом
      25 Juli 2022 18.52
      Profil: https://www.blogger.com/profile/11131198046075365419
      ralat let customLabel = "Series"
    • true
      25 Juli 2022 19.08
      Profil: https://www.blogger.com/profile/03791865258710224921
      makasih bisa bang
    • true
      25 Juli 2022 20.08
      Profil: https://www.blogger.com/profile/03791865258710224921
      untuk filter label bang
      var postLabel2 = i.category.map(function(e) {
      if(e.term == '1080p' || e.term == '720p' || e.term == '480p' || e.term == '360p' || e.term == '240p' || e.term == '144p') return e.term;
      }).join(' ');

      biasa nya saya pakek ini, untuk penulisan di bloggerscript gimana bang
    • Шош. Сом
      26 Juli 2022 08.33
      Profil: https://www.blogger.com/profile/11131198046075365419
      let script1 = new BloggerScript();

      function getPost(item) {
      //Cara Pertama
      let entry = script1.getFeed(item);
      entry.forEach(post => {
      let label = post.label.map(i => i == '480p' || i == '720p' || i == '1080p').join(', ');
      })

      //Cara kedua
      item.forEach(post => {
      let label = script1.getLabel(post.category).map(i => i == '480p' || i == '720px' || i == '1080p');
      })
      }
      script1.xhr('GET', '/feeds/posts/summary?alt=json-in-script&max-results=20', getPost);
      Begini kira nya.
    • true
      26 Juli 2022 15.08
      Profil: https://www.blogger.com/profile/03791865258710224921
      untuk cara pertama cuma muncul true dan false saja.
      untuk cara ke dua malah error bang
    • Dagruel.com
      26 Juli 2022 15.32
      Profil: https://www.blogger.com/profile/02480525259652322034
      1. ganti map menjadi filter
      2. pada cara kedua ganti item.forEach jadi item.feed.entry.forEach
    • true
      26 Juli 2022 16.04
      Profil: https://www.blogger.com/profile/03791865258710224921
      mantap berhasil
    • true
      5 Agustus 2022 16.42
      Profil: https://www.blogger.com/profile/03791865258710224921
      bang saya ada judul date a live episode 01
      trus saya mau cuma nampilin date a live nya saja dan sebalik nya episode 01 saja, gimana ya bang?
    • Шош. Сом
      5 Agustus 2022 16.52
      Profil: https://www.blogger.com/profile/11131198046075365419
      let title = 'Date A Live Episode 1';
      title = title.split(' Episode')[0];
      console.log(title);
    • true
      5 Agustus 2022 17.43
      Profil: https://www.blogger.com/profile/03791865258710224921
      ehh kurang paham bang
      let episode_lainnya = new BloggerScript()
      function el(e) {
      let entry = episode_lainnya.getFeed(e);
      let html = '';
      entry.forEach(item => {
      html += `<li class="bk-Episode"><a href="${item.link}" title="${item.title}"><span title="${item.title}">${item.title}</span></a></li>`;
      });
      document.getElementById('bk-episode-lainnya').innerHTML = html;
      }


      cara menulisannya gimana bang
    • Шош. Сом
      5 Agustus 2022 18.36
      Profil: https://www.blogger.com/profile/11131198046075365419
      item.title.split(' Episode')[0]
  • true
    5 Agustus 2022 18.14
    Profil: https://www.blogger.com/profile/03791865258710224921
    bang kalok sebaliknya bisa kah cuma episode nya muncul
    • Шош. Сом
      5 Agustus 2022 18.17
      Profil: https://www.blogger.com/profile/11131198046075365419
      Pakai slice item.title.slice(item.title.indexOf('Episode'))
    • true
      5 Agustus 2022 18.27
      Profil: https://www.blogger.com/profile/03791865258710224921
      ohh ya bang dia atas sudah gak bisa koemn lagi apa max 15 ya
    • Шош. Сом
      5 Agustus 2022 18.39
      Profil: https://www.blogger.com/profile/11131198046075365419
      nggak, kesalahan nulis tag aja tadi maka nya gak bisa.
    • true
      10 Agustus 2022 19.23
      Profil: https://www.blogger.com/profile/03791865258710224921
      bang 1 lagi nih tentang buat summary gimana ya?
    • Шош. Сом
      10 Agustus 2022 19.52
      Profil: https://www.blogger.com/profile/11131198046075365419
      let summary = 'summary' in item ? item.summary : 'Summary Tidak ada';
      let content = 'content' in item ? item.content : 'Tidak ada Content';

      Dalam penulisan url pemanggil summary menjadi seperti ini.
      /feeds/posts/summary
      sedangkan content begini.
      /feeds/posts/default
    • true
      10 Agustus 2022 20.04
      Profil: https://www.blogger.com/profile/03791865258710224921
      ohhh saya pakek yang content berhasil tapi semua muncul dari gambar, link dll. hah trus caranya biar text saja bisa kah bang, kayang cuma 150 kata gitu
    • Шош. Сом
      10 Agustus 2022 20.26
      Profil: https://www.blogger.com/profile/11131198046075365419
      let newDiv = document.createElement('div');
      newDiv.innerHTML = 'content' in item ? item.content : 'Tidak ada Content';
      let content = newDiv.innerText.slice(0, 150);

      150 itu panjang text nya.
    • true
      10 Agustus 2022 20.31
      Profil: https://www.blogger.com/profile/03791865258710224921
      oohh, seumpama saya pekek summary berarti kurang lebih sama juga ya bang. ohh ya berhasil bang makasih
    • true
      17 Agustus 2022 17.59
      Profil: https://www.blogger.com/profile/03791865258710224921
      bang..
      <div id='output'></div>
      <script>
      let script1 = new BloggerScript({
      noImage: 'Url_Noimage',
      sizeImage: 'w480-h320'
      })
      function getPost(e) {
      let entry = script1.getFeed(e);
      let html = '';
      entry.forEach(item => {
      html += `<div><img src='${item.image}'/><a href='${item.link}'>${item.title}</a><div>${item.date}</div></div>`;
      });
      document.getElementById('output').innerHTML = html;
      }
      script1.xhr('GET', '/feeds/posts/default?alt=json-in-script&max-results=10', getPost)
      </script>


      dan hasilnya :
      <div id='output'>
      <div><img src='#'/><a href='#'>Judul</a><div>Tgl</div></div>
      <div><img src='#'/><a href='#'>Judul</a><div>Tgl</div></div>
      <div><img src='#'/><a href='#'>Judul</a><div>Tgl</div></div>
      <div><img src='#'/><a href='#'>Judul</a><div>Tgl</div></div>
      </div>

      pertanyaannya bisakah bang menanbah div lagi hasilnya kayak gini...
      <div id='output'>
      <div class="bungkus" id="bungkus">
      <div><img src='#'/><a href='#'>Judul</a><div>Tgl</div></div>
      <div><img src='#'/><a href='#'>Judul</a><div>Tgl</div></div>
      <div><img src='#'/><a href='#'>Judul</a><div>Tgl</div></div>
      <div><img src='#'/><a href='#'>Judul</a><div>Tgl</div></div>
      </div>
      </div>
    • Шош. Сом
      19 Agustus 2022 10.00
      Profil: https://www.blogger.com/profile/11131198046075365419
      ganti yang ini.
      //Awal
      let html = '';

      //Replace
      let html = '<div class="bungkus" id="bungkus">';

      //Awal
      document.getElementById('output').innerHTML = html;

      //Replace
      document.getElementById('output').innerHTML = html + '</div>';
    • Yukine
      19 Agustus 2022 14.22
      Profil: https://www.blogger.com/profile/16537327212291797418
    • true
      31 Agustus 2022 15.45
      Profil: https://www.blogger.com/profile/03791865258710224921
      bang saya nyobain buat custom post kayak gini tapi error salahnya di mana bang
      let Rekomen = new BloggerScript({
      noImage: 'Url_Gambar',
      sizeImage: 'w207-h300'
      })

      let customPost = {}
      customPost.run = function(outputDiv, namaLabel, jumlahPost) {
      // outputDiv Postingan Akan Tampil di tag tersebut
      customPost.outputDiv = outputDiv;

      document.write('\x3Cscript type="text/javascript" src="/feeds/posts/default/-/' + namaLabel + '?alt=json&callback=customPost.compile&max-results=' + jumlahPost + '">\x3C/script>')
      }

      function createFeed(e) {
      //Ini mengambil element ber attribute id yang kita tulis di customPost.outputDiv
      let element = document.getElementById(customPost.outputDiv);
      let entry = Rekomen.getFeed(e);
      entry.forEach(item => {
      html += `<li><img src='${item.image}'/><a href='${item.link}'>${item.title}</a><div>${item.date}</div></li>`;
      });
      element.innerHTML = html;
      }

      mohon bantuannya bang
    • true
      31 Agustus 2022 15.46
      Profil: https://www.blogger.com/profile/03791865258710224921
      nyobain buat custom post kayak dulu.
    • true
      1 September 2022 08.21
      Profil: https://www.blogger.com/profile/03791865258710224921
    • true
      1 September 2022 12.56
      Profil: https://www.blogger.com/profile/03791865258710224921
      baru sempat coba masih error
    • Шош. Сом
      2 September 2022 08.39
      Profil: https://www.blogger.com/profile/11131198046075365419
      tambahkan let html = ''; di dalam function customPost.compile
    • true
      18 September 2022 07.13
      Profil: https://www.blogger.com/profile/03791865258710224921
      bang boleh nambah id post
  • Rio Kazuto
    13 September 2022 20.42
    Profil: https://www.blogger.com/profile/16199607135379820616
    klo cma ngambil sinopsis gimna ya, ap lewat item.content