Widget HTML Blogger untuk Menyimpan Data Konfigurasi

Metode ini pertama kali Saya dapatkan dari Bung Frangki dimana beliau menggunakan bidang konten pada widget HTML sebagai tempat untuk menyimpan data konfigurasi. Widget tersebut adalah widget yang dibuat secara manual, bukan dengan cara menggunakan fitur antarmuka dari Blogger.

<b:widget id='HTML1' locked='true' title='Related Post' type='HTML' version='1'>
  <b:widget-settings>
    <b:widget-setting name='content'>numPosts: 6,
widgetStyle: 3,
summaryLength: 125</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h4 class='widget-title'><data:title/></h4>
    </b:if>
    <div class='widget-content'>
      <script>
      var relatedPostConfig = {<data:content/>};
      </script>
    </div>
  </b:includable>
</b:widget>

Sehingga pada hasil keluaran nantinya akan menjadi seperti ini:

<div class='widget HTML' data-version='1' id='HTML1'>
  <h4 class='widget-title'>Judul Widget</h4>
  <div class='widget-content'>
    <script>
    var relatedPostConfig = {
        numPosts: 6,
        widgetStyle: 3,
        summaryLength: 125
    };
    </script>
  </div>
</div>

Sekarang kita coba lihat kembali bagaimana tag <b:with> bekerja. Selain untuk menampilkan data berupa string, tag ini juga mampu menganggap string objek sebagai data objek. Sehingga jika kita menuliskan data konten sebagai objek Blogger dan menggunakan tag <b:with> sebagai konverternya, maka kita bisa menggunakan teks data konten tersebut sebagai data objek:

<b:widget id='HTML1' title='Profil' type='HTML' version='1'>
  <b:widget-settings>
    <b:widget-setting name='content'>{
    name: "Taufik Nurrohman",
    content: "&lt;p&gt;Saya adalah pemilik blog ini.&lt;/p&gt;",
    links: [{
        title: "Facebook",
        url: "//www.facebook.com/ta.tau.taufik"
    }, {
        title: "Google+",
        url: "//plus.google.com/+TaufikNurrohman"
    }]
}</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h4 class='widget-title'><data:title/></h4>
    </b:if>
    <div class='widget-content'>
      <b:with var='config' expr:value='data:content'>
        <h5><data:config.name/></h5>
        <div>
          <data:config.content/>
        </div>
        <h6>Links</h6>
        <b:if cond='data:config.links.size > 0'>
          <ul>
            <b:loop values='data:config.links' var='value'>
              <li><a expr:href='data:value.url'><data:value.title/></a></li>
            </b:loop>
          </ul>
        </b:if>
      </b:with>
    </div>
  </b:includable>
</b:widget>

Referensi: https://productforums.google.com/forum/#!topic/blogger/kIszC8MjUyg;context-place=forum/blogger

21 Komentar

  • Bundet

    istimewa bener-bener indie programmer om :-bd

  • John Doe

    Is just amazing!! Thank you so much!!

  • カレルくん

    pak taufik, cara ngambil label dalam artikel lalu di panggil ke widget popularpost buat filter gimana ya?
    contoh filternya di popularpost
    <b:if cond='data:labelpopularpost.name == data:labelartikel.name&quot;'>
    ISI</b:if>

  • Adi

    Apa dengan cara itu juga bisa digunakan untuk memparer file json ya mas?

    • Taufik Nurrohman

      Tidak bisa kalau JSON berada di berkas eksternal. Tidak ada caranya.

      • Adi

        kalau pakai innerHTML lalu di taruh dalam di b:widget-setting pemanggilnya, apa juga tidak bekerja cara tersebut?

        • Taufik Nurrohman

          Bisa kalau diparse lewat JavaScript. Kalau mau diiterasikan pakai `` misalnya, ya tidak bisa.

          Di sini Saya memakai div.getAttribute('data-config'), tapi bisa juga menggunakan div.innerHTML kalau sudah paham konsepnya.

          • Adi

            oh ya mas kalau di contoh itu kan pakai data:content untuk widget HTML lalu saya sebenarnya ingin menerapkannya pada widget postingan jadi pakai data:post.body bisa juga ya mas?

          • Adi

            sudah bisa ternyata mas dengan cara tersebut namun saya menggunakan json internal dan belum mencoba json eksternal.

            https://www.travelign.nl/2021/04/suroboyo.html

          • Adi

            saya menggunakan cara ini supaya hasil renderan htmlnya muncul, kalau saya pakai javascript hasil renderan tidak muncul.

          • Adi

            kalau ingin memparse json tanpa memunculkan tanda petik itu bagaimana caranya ya mas?

            • Taufik Nurrohman

              Kalau tanpa tanda petik namanya bukan JSON tapi objek biasa. Paling bisa pakai eval()

              const config = window.eval('(' + div.innerHTML + ')');

              Referensi: https://stackoverflow.com/a/13718664/1163000

              • Adi

                saya berhasil mengkonversi json eksternal menjadi objek menggunakan JSON.parse.

                ada tag pemanggilnya yang ada di dalam b:widget-setting name='content' bagaimana mengambil datanya mas?

              • Taufik Nurrohman

                Sama saja dengan yang lain.

                <b:widget-setting name='content'>{"foo":"bar","baz":1}</b:widget-setting>
                <div id="test-data">
                  <data:content/>
                </div>
                <script>
                const container = document.querySelector('#test-data');
                const data = JSON.parse(container.textContent);
                console.log(data);
                </script>

                Atau begini saja juga bisa. Nggak perlu berbentuk JSON malah. Bisa bentuk objek biasa:

                <script>
                const data = <data:content/>;
                console.log(data);
                </script>
  • Adi

    tag b:includable dan b:widget-setting tidak bisa dijadikan tag pemanggil ya mas?

    • Adi

      maksud saya pemanggil dari innerHTML

      • Taufik Nurrohman

        Tidak bisa. Kalau mau buat variabel kustom lebih baik pakai <b:with> saja.

        • Adi

          saya ingin menulis contoh kode disini pakai perintah apa ya mas?

          • Taufik Nurrohman

            Pakai sintaks blok kode di Markdown.

            • Adi

              mau tanya mas, saya ingin var destination_iata itu otomatis keisi dari function useriata apa bisa mas?

              function useriata(e) {
                  var name = e.name;
                  console.log(name);
              };
              var destination_iata = "JKT";
              var destination_name = "Jakarta";
              var locale = "en_us";
              var currency = "usd";
              var tp_url = "https://suggest.travelpayouts.com";
              function route(e) {
                  if (document.getElementById("rute")) {
                      for (var city_iata, s, r = e.origin, n = "", a = document.getElementById("rute"), l = 0; l < limit; l++) {
                          for (var c = 0; c < limit; c++)
                         var city_name = r[l].city_name;
                         n += "<div class='col-md-4 ftco-animate fadeInUp ftco-animated'></div>"
                     } 
                     a.innerHTML = n
                 }
              }






Semua kode HTML akan dihapus kecuali kode-kode HTML yang dituliskan sebagai contoh. Gunakan sintaks Markdown untuk memberi gaya pada komentar.


Batal