Gadget HTML memang bermasalah ketika harus mengalami lintas template. Mungkin Anda sering mengalami, backup template Anda, namun ketika dipasang di blog lain template tidak se normal yang Anda duga. Banyak gadget hilang atau berantakan. Nah, biasanya ini terjadi pada gadget-gadget HTML (Gadget yang ditambahkan melalui tata letak, Add gadget > HTML gadget.)

1. Bisakah Mempertahankan Isi Gadget HTML?
Beberapa kali melakukan percobaan tetap saja saya kehilangan isi pada gadget HTML, ketika backup-an template digunakan di blog yang lain. Yang bertahan hanyalah title gadget, sementara isinya hilang atau berpindah acak ke kolom gadget HTML yang lain. Ini menjawab pertanyaan mengapa ketika Anda menggunakan template-template super custom bergaya magazine atau news dari simplex misalnya, maka para penyedia template akan melengkapinya dengan tutorial manual pengisian gadget-gadget HTML.


Intinya isi gadget HTML tidak bisa bertahan, jadi jika Anda ingin back-up template, untuk gadget-gadget HTML sebaiknya di back-up manual. Dengan cara pergi ke tata letak > Edit gadget HTML yang Anda inginkan, kemudian copy dan save isi gadget tersebut ke notepad, ms word atau program lainnya.

2. CSS Tertentu Untuk Gadget HTML
Gadget-gadget HTML memiliki id HTML1, HTML2, HTML3 dan seterusnya. Misalkan Anda meletakkan gadget HTML di sidebar, maka Anda dapat melakukan kustomisasi CSS khusus pada gadget HTML tertentu agar berebeda dengan gadget-gadget lain di sidebar. (Gadget-gadget pada sidebar akan mengikuti CSS sidebar, misalkan title akan otomatis mengikut CSS .sidebar h2, isi akan mengikuti .sidebar .widget dan lain-lain)

Nah, untuk membuat CSS tertentu Anda bisa menambahkan CSS selector #HTML1 atau #HTML2 atau #HTML3 dan seterusnya. Letakkan di atas ]]></b:skin>.

Contoh penulisannya sebagai berikut:
#HTML1 {font-size: 12 px; background:  #fff}
#HTML1 h2 {font-family: Arial}

Untuk mengetahui ID Widget silahkan baca: Cara Mudah Mengetahui ID Widget

3. Mempertahankan CSS Gadget HTML
Selanjutnya, pertanyaannya adalah bagaimana mempertahankan CSS dari gadget HTML?.
Misal kita membuat CSS untuk gadget HTML1 pada blog A, kemudian kita backup/download template kita. Template tadi ingin kita terapkan di blog yang lain, misal blog B. Padahal di blog B sudah ada gadget HTML1-nya. Ini berarti bisa terjadi tabrakan dua gadget HTML1.

Karena hal ini, maka otomatis gadget HTML1 pada template backup-an ketika dipasang di blog B akan berubah menjadi HTML2. Padahal seperti kita tahu CSS-nya menggunakan selector #HTML1. Alhasil, CSS selector salah sasaran akan mengatur gadget HTML1 yang asli ada di blog B, padahal yang kita inginkan CSS tersebut mengatur HTML1 pada template back-up yang knii sudah berganti id menjadi HTML2.

Permasalahan seperti ini tidak akan kita temukan jika kita tidak akan menggunakan template editan kita untuk banyak blog. Untuk mengatur Gadget HTML tertentu, cukup gunakan cara seperti pada poin nomer 2. Namun, jika kita ingin membagikan template editan kita kepada umum atau akan digunakan untuk beberapa blog kita, maka gunakan pengaturan CSS seperti berikut:

Pada Kolom Edit HTML Template, gadget HTML akan berbentuk kode seperti berikut:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
          </b:widget>

- Tidak usah mengedit ID gadget HTML1
- Untuk pengaturan judul gadget HTML, ubahlah 'title' menjadi id unik terserah Anda, misalkan 'toptabview'. Berarti baris title menjadi: <h2 class='toptabview'><data:title/></h2>.
- Untuk pengaturan gadget HTMl, seperti background gadget dll, ubahlah 'widget-contet' menjadi id unik misalkan 'toptabview'. Berarti baris widget-content menjadi: <div class='toptabview'>
- Terakhir tambahkan CSS dengan format:
.toptabview h2 {font-size:.......;}
.toptabview {background:...;}

Dengan cara tersebut, meski id gadget HTML berubah, maka CSS tidak akan salah sasaran. Hanya berbagi pengetahuan, jika Anda mengetahui lebih, tolong di share ya di kolom komentar...

NB: Jiak belum mengenal CSS, bisa dipelajari di: Belajar CSS.

Info ArticleBackup Gadget HTML Blogger - Blog Konsultasi