Ads

Belajar Cara Membuat Custom Post Di Blogger

Belajar Cara Membuat Custom Post Di Blogger
Dagruel

Kali Ini aku mau membagikan Bagaimana cara membuat Custom Post Di blogger dari awal sampai akhir. Jadi Cermati script di bawah ok.

1. Membuat Function

Pertama Buatlah variable dengan nama custom post kita.

var customPost = {}

Selanjutnya kita membuat fungsi untuk memanggil script json blogger.

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

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

Penjelasan

  • outputDiv: Tempat Post yang akan di tampilkan.
  • namaLabel: Untuk menampilkan postingan dengan label tertentu.
  • jumlahPost: Jumlah postingan yang akan di tampilkan.
  • customPost.compile: Check script selanjutnya.

Jika sdh paham script nya. Maka selanjutnya adalah cara memanggil script tersebut.

Cara nya: customPost.run('customPost', 'Movie', 8);.

untuk outputDiv dan namaLabel karena berupa string maka harus di beri tanda petik 1/2, untuk jumlahPost karena nomor jadi tidak perlu di kasih tanda petik.

Step Berikut nya membuat function compile. yaitu membuat stuktur postingan nya.

customPost.compile = function(json) {
  //Ini mengambil element ber attribute id yang kita tulis di customPost.outputDiv
  var element = document.getElementById(customPost.outputDiv);
  //Ini mengambil callback json dari script customPost.run
  var feed = json.feed;

  //Ini Mencheck Apakah Di dalam json terdapat postingan
  if (feed && feed.entry.length > 0) {
    //Jika ada maka akan mengeksekuki script beriku. Yaitu Membuat Loop Daftar Postingan.
    //Buat dulu variable html untuk membuat daftar postingan
    var html = '';

    for (var i = 0; i < feed.entry.length; i++) {
      //karena di dalam for ada var i maka kita mengambil post nya begini
      var post = feed.entry[i];

      //Ini Mengambil Judul Postingan
      var postTitle = post.title.$t;

      //Ini Mengambil Data published
      var postDate = post.published.$t;
      //postDate di atas hasil nya seperti ini: 2001-01-01T17:50:00-08:00. maka akan kita ubah dengan script di bawah
      var year = postDate.substring(0, 4),
        mounth = postDate.substring(5, 7),
        days = postDate.substring(8, 10),
        mounthName = new Array;
      mounthName[1] = "Jan", mounthName[2] = "Feb", mounthName[3] = "Mar", mounthName[4] = "Apr", mounthName[5] = "May", mounthName[6] = "Jun", mounthName[7] = "Jul", mounthName[8] = "Aug", mounthName[9] = "Sep", mounthName[10] = "Oct", mounthName[11] = "Nov", mounthName[12] = "Dec";
      postDate = days + ', ' + mounthName[parseInt(mounth, 10)] + ' ' + year;
      // maka hasil akan menjadi 01, Jan 2001;

      //Ini Mengambil Link postingan
      var postLink = '';
      //Karena di atas di dalam for sudah terdapat var i maka di sini var z
      for (var z = 0; z < post.link.length; z++) {
        //Karena link nya ada banyak kita ambil yang ada attribute rel='alternate'
        if (post.link[z].rel == 'alternate') {
          postLink = post.link[z].href;
          //Ini untuk menghentikan Looping
          break
        }
      }

      //Mengambil Gambar postingan yang pertama jika gambar nya di upload lewat blogger
      var imagePost = '';
      if (post.media$thumbnail) {
        imagePost = post.media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/, '/w480-h360-p-k-no-nu');
        //Kenapa ada .replace karena ukuran default photo nya 72px jadi direplace agar lebar 480px dan tinggi 360px
      } else if (post.content) { //klo Ini jika gambar tidak di upload lewat blogger alias nyuri dari web lain
        var content = post.content.$t,
          a = content.indexOf("<img"),
          b = content.indexOf("src=\"", a),
          c = content.indexOf("\"", b + 5),
          d = content.substr(b + 5, c - b - 5);
          if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
            imagePost = d
          } else { // Klo Ini jika tidak terdapat gambar apapun
            imagePost = 'isi dengan url Gambar'
          }
      } else { // Ini  juga sama jika tidak terdapat gambar apapun
        imagePost = 'isi dengan url Gambar'
      }

      // Dan Ini untuk mengabungkan semua data di atas kedalam html;
      html += '<li><a href="'+ postLink +'">' +
      '<h2>'+ postTitle +'</h2>' +
      '<span>'+ postDate +'</span>' +
      '<img src="'+ imagePost +'"/>' +
      '</a></li>'
    }

    //Selanjutnya menambahkan daftar post yang dibuat kedalam element outputDiv cara nya;
    element.innerHTML = html;
  }
}

Penjelasan nya seperti yang tertera setelah tanda //.

Script Diatas jika di gabung dan clean tanpa coment akan seperti ini.

var customPost = {};
customPost.run = function(t, e, n) {
  customPost.outputDiv = t, document.write('<script type="text/javascript" src="/feeds/posts/default/-/' + e + "?alt=json&callback=customPost.compile&max-results=" + n + '"><\/script>')
}, customPost.compile = function(t) {
  var e = document.getElementById(customPost.outputDiv),
    n = t.feed;
  if (n && n.entry.length > 0) {
    for (var r = "", s = 0; s < n.entry.length; s++) {
      var i = n.entry[s],
        a = i.title.$t,
        u = i.published.$t,
        l = u.substring(0, 4),
        o = u.substring(5, 7),
        c = u.substring(8, 10),
        m = new Array;
      m[1] = "Jan", m[2] = "Feb", m[3] = "Mar", m[4] = "Apr", m[5] = "May", m[6] = "Jun", m[7] = "Jul", m[8] = "Aug", m[9] = "Sep", m[10] = "Oct", m[11] = "Nov", m[12] = "Dec", u = c + ", " + m[parseInt(o, 10)] + " " + l;
      for (var p = "", f = 0; f < i.link.length; f++)
        if ("alternate" == i.link[f].rel) {
          p = i.link[f].href;
          break
        } var d = "";
      if (i.media$thumbnail) d = i.media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/, "/w480-h360-p-k-no-nu");
      else if (i.content) {
        var b = i.content.$t,
          g = b.indexOf("<img"),
          h = b.indexOf('src="', g),
          v = b.indexOf('"', h + 5),
          y = b.substr(h + 5, v - h - 5);
        d = -1 != g && -1 != h && -1 != v && "" != y ? y : "isi dengan url Gambar"
      } else d = "isi dengan url Gambar";
      r += '<li><a href="' + p + '"><h2>' + a + "</h2><span>" + u + '</span><img src="' + d + '"/></a></li>'
    }
    e.innerHTML = r
  }
};

Script Tersebut di pasang di atas tag </head> pada template.

Dan contoh memanggil nya begini.

<ul id="customPost">
  <script type="text/javascript">
    customPost.run('customPost', 'Movie', 10);
  </script>
</ul>

Sisanya tinggal atur css dan lain lain untuk mempercantik tampilan nya. Sekian Dari Saya semoga bermanfaat.

12 komentar

Blogger Disqus
  1. Setelah dibaca komentar // baru gw mengerti setiap fungsinya.

    Saya sudah ada rencana membuat post hompage seluruhnya dari custom label, biar gk perlu mengupdate tanggal post.

    Bagimana caranya agar kedua pemangil muncul kalau ditumpuk?
    Label Anime, dan Manga.
    <ul id="customPost">
    <script type="text/javascript">
    customPost.run('customPost', 'Anime', 10);
    </script>
    </ul>
    <ul id="customPost">
    <script type="text/javascript">
    customPost.run('customPost', 'Manga', 10);
    </script>
    </ul>


    Makasih, atas tutornya,
    dan juga loadingya lebih cepat.

    BalasHapus
    Balasan
    1. tinggal ubah bagian outputDiv nya "customPost1", "customPost2"

      Hapus
    2. Bang gak nyobak skrip menu ini

      https://drive.google.com/file/d/1Z4xSGQE8J8RMxg6gO9d773BufFeam_Tx/view?usp=sharing

      habis ngambil dari Template Soratemplates

      Hapus
    3. @Lord Voldemort
      Masih lama, ini baru tahap desain kerangka blog.
      @Rizki Aldi
      Ini drop down yg bisa diedit di tata letak kan.
      Nanti kucoba

      Hapus
    4. @Wernayasa
      Yap betul sekali cuma tinggal 1 code mega menu aja bang yang error gitu jadi ku hapus, kalok bisa pasang di head

      Hapus
    5. @Rizki Aldi
      gak Support klo gak pakai script ini. lebih baik buat manual klo bikin dropdown

      Hapus
    6. @Rahmad Hidayat
      masak gak support bang aku bisa

      https://old-thema.blogspot.com/

      dah ku cobak bang (Maaf kalok gak support)

      sebenarnya skripnya ada 2 atau 3 gitu, yang sudah ku cobak cuma 1 yang 2 belum ku cobak

      Hapus
    7. @Rahmad Hidayat
      maaf bang peletakannya langsung letak di bawah nya bang, kayak di skripnya

      Hapus
    8. @Rizki aldi
      Nih Bro tanpa tambahan script murni dari Blogger https://www.dagruel.com/2021/08/cara-edit-widget-linklist-blogger.html

      Hapus
  2. Nice, gaperlu capek2 lagi buka W3School buat nyari fungsi setiap method nya :)

    BalasHapus
  • 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>