Mecha versi 2.6.4 sudah dirilis!

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

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
   }
}

Komentar telah ditutup.