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: "<p>Saya adalah pemilik blog ini.</p>",
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"'>
ISI</b:if>
Taufik Nurrohman
Kayaknya nggak bisa deh mas.
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 menggunakandiv.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()
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.
Atau begini saja juga bisa. Nggak perlu berbentuk JSON malah. Bisa bentuk objek biasa:
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?