Tips membuat widget type HTML

Menambah widget Blogger

Widget Blogger tersedia sekitar kurang lebih 25 type widget.

Namun disini yang menjadi pembahasan adalah widget HTML / Javascript.

Dimana dalam penggunaan widget type HTML ini, jika konten widget berisi kode HTML maka akan diurai (escaped / parsed). Sehingga pada saat terjadi pengeditan melalui template HTML terasa sedikit menyulitkan. Perhatikan penjelasannya dibawah ini.

Konten widget type HTML

Apabila dilihat dari template, konten widget HTML yang berisi kode dan elemen HTML akan terurai seperti ini.

<b:widget id='HTML1' locked='false' title='Widget HTML' type='HTML' visible='true'>
          <b:widget-settings>
            <b:widget-setting name='content'>&lt;div class=&#39;container&#39;&gt;
&lt;p&gt;&lt;a href=&#39;https://google.com&#39;&gt;&lt;span&gt;Google&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
...
</b:widget>

Bagaimana cara agar konten widget HTML tidak terurai ?

Sebenarnya terdapat string yang dapat mempertahankan karakter kode agar tidak terurai, yaitu string CDATA seperti ini : <![CDATA[ kode HTML ]]>. Masalahnya adalah pada saat template tersimpan, string CDATA terhapus dan karakter kode tetap terurai. Jadi harus menggunakan cara lain yang bisa diterima oleh template.

Setelah beberapakali mempertimbangkan, cara agar karakter kode HTML konten widget tersebut tidak terurai adalah : Dengan memindahkan kode konten dari <b:widget-setting>
Pindahkan kedalam tag <div class='widget-content'> yang berada dibawahnya.
Perhatikan baris nomor 9 kolom kode diatas.

Agar pemindahan kode konten tidak harus bolak-balik dari halaman edit template HTML ke halaman Tata letak untuk menyalin kode konten, ikuti cara ini (posisi tetap di halaman edit template HTML):

Copy semua kode konten widget HTML yang terurai, lalu buka Free Formater

Pastekan kode tersebut kedalam kolom yang tersedia. Lalu klik tombol unescape HTML.

Pada kolom hasil, jika kode masih terurai klik tombol Copy lalu pastekan lagi ke kolom diatasnya,
lakukan unscape HTML kedua lalu lihat hasilnya.

Pada unescape kedua seharusnya kode HTML sudah kembali ke format standart.
Klik tombol Copy lalu kembali ke dalam template.

Pastekan tepat diatas atau dibawah data:content, lihat kode berikut :

<b:includable id='main'>
   <b:include name='widget-title'/>
   <div class='widget-content'>
     <!--paste disini-->
       <data:content/>
     <!--atau disini-->
   </div>
 </b:includable>

Dengan cara ini, kode elemen tidak akan terurai. Tapi jika dibuka dari halaman Tata Letak, konten widget HTML tersebut dalam kondisi kosong, tanpa konten. Hal ini tidak menjadi masalah dan tidak akan menimbulkan kendala apapun.

⇐ Sebelumnya

Selanjutnya ⇒