Menggunakan Konten Widget Html Untuk Menyimpan Data Konfigurasi - Dewa Blogger

Halaman

    Social Items

Buy Now

Menggunakan Konten Widget Html Untuk Menyimpan Data Konfigurasi

Metode ini pertama kali Saya dapatkan dari Bung Frangki dimana dia memakai bidang konten pada widget HTML sebagai kawasan untuk menyimpan data konfigurasi. Widget tersebut yaitu widget yang dibentuk secara manual, bukan dengan cara memakai 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 ibarat 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 bisa menganggap string objek sebagai data objek. Sehingga jikalau kita menuliskan data konten sebagai objek Blogger dan memakai tag <b:with> sebagai konverternya, maka kita bisa memakai 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 yaitu 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


Sumber https://www.dte.web.id/