Cara Mengatasi Kerusakan Tampilan Yang Terjadi Pada Layout Atau Tata Letak Widget

Apakah tampilan susunan tata letak widget pada blog yang Anda kelola mengalami perubahan, yaitu dengan munculnya list item style seperti yang tampak pada gambar di atas setelah menambahkan tab menu horizontal dengan cara menerapkan teknik yang diuraikan dalam artikel dengan judul ‘Cara Membuat Tab Menu Horizontal Seperti Navbar Di Atas Header Halaman Blog’ atau ‘Cara Membuat Pull Down Menu Dengan Ujung Sudut Melengkung Atau Rounded Corners Tab’? Jika ya, maka berikut ini adalah solusi cara untuk mengatasinya.

Oke, sebelumnya perlu diketahui bahwa sebenarnya perubahan yang terjadi pada layout widget tersebut hanya Anda yang dapat melihatnya (selaku admin atau pengelola blog) dan tidak dapat diketahui oleh pengunjung karena memang tidak berdampak sama sekali terhadap tampilan halaman blog. Dengan demikian maka ketika blog dibuka oleh pengunjung, halaman blog pun akan ditampilkan sebagaimana mestinya.
Namun demikian bila tampilan tata letak widget tampak kurang rapi seperti gambar di atas, bisa jadi akan membuat Anda kurang nyaman. Sehingga untuk merapikannya Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, untuk mempermudah proses selanjutnya cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

.bilah-menu-atas.section,
.bilah-menu-atas .widget,
.bilah-menu-atas .widget ul {
  margin: 0px;
}

.bilah-menu-atas .widget,
.bilah-menu-atas .widget ul,
.bilah-menu-atas .widget li {
  padding: 0px; 
}

Ketiga, cari <div class="bilah-menu-atas" id="bilahmenuatas"> dan kemudian sisipkan kode berikut ini tepat di atasnya.

<b:section class='bilah-menu-atas' id='bilahmenuatas' maxwidgets='1' showaddelement='yes'/>

Keempat, copy atau salin seluruh rangkaian kode mulai dari <div class="bilah-menu-atas" id="bilahmenuatas"> sampai dengan tag penutupnya ke dalam text editor. Dan selanjutnya setelah Anda menyalinnya, maka hapuslah seluruh rangkaian kode dalam template untuk bagian tersebut. Sebagai gambaran untuk bagian yang dihapus, dapat Anda lihat pada contoh rangkaian script berikut ini.

<div class='bilah-menu-atas' id='bilahmenuatas'> <!-- SALIN DARI SINI -->
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <!-- Rangkaian Script -->
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <!-- Rangkaian Script -->
      </ul>
    </div>
  </div>
</div> <!-- SALIN SAMPAI SINI -->

Keterangan:
Contoh script di atas merupakan rangkaian script yang terdapat pada langkah keempat dari kedua artikel yang telah saya sebutkan sebelumnya.

Kelima, simpan template. Dan bila telah tersimpan maka tutuplah editor template untuk kemudian klik menu ‘Layout / Tata Letak’, sehingga Anda akan mendapati adanya 1 (satu) buah kolom widget baru di atas kolom widget untuk bagian header blog.

Keenam, klik tautan ‘Tambah Gadget’ yang terdapat pada kolom widget baru tersebut, dan kemudian tambahkan gadget baru berupa ‘HTML/JavaScript’.

Ketujuh, jika jendela yang digunakan untuk melakukan konfigurasi HTML/JavaScript telah ditampilkan, maka salinlah rangkaian kode yang sebelumnya telah disalin ke dalam text editor dengan menggunakan langkah keempat, dalam kotak konten yang terdapat pada jendela konfigurasi HTML/JavaScript tersebut.

Kedelapan, klik tombol ‘Simpan’. Akan tetapi jika setelah diklik tombol simpan malah terjadi error dan tidak dapat menyimpan konfigurasi untuk widget tersebut, maka tambahkan kode <!---> sebagai judul widget agar konfigurasi dapat tersimpan.

Kesembilan, sekali lagi buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Kesepuluh, cari <b:section class='bilah-menu-atas' yang lebih kurang rangkaian script untuk bagian tersebut akan berubah menjadi seperti berikut ini.

<b:section class='bilah-menu-atas' id='bilahmenuatas' maxwidgets='1' showaddelement='yes'>
<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'> <!-- HAPUS KODE INI -->
    <data:content/>
  </div> <!-- DAN HAPUS JUGA KODE INI -->

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

Selanjutnya bila rangkaian script seperti contoh tersebut telah Anda temukan, maka hapuslah 2 (dua) buah kode yang ditandai dengan keterangan menggunakan huruf kapital di atas.

Kesebelas, simpan template.

Dengan demikian maka tata letak widget pada blog yang Anda kelola akan kembali ke tampilan yang semestinya, karena list item style yang sebelumnya ditampilkan pada layout tidak akan dimunculkan lagi. Disamping itu ketika ingin melakukan perubahan pada menu yang ditampilkan pada tab horizontal, Anda tidak perlu lagi membuka editor template untuk melakukan pembenahan, namun dapat dilakukan secara langsung dari menu ‘Layout / Tata Letak’ (dalam hal ini adalah dengan cara mengeklik tautan ‘Edit’ untuk widget yang dimaksud).
Dan kemudian bila ternyata Anda mengalami kesulitan ketika mengimplementasikan teknik tersebut di atas,  maka silakan ajukan pertanyaan terkait dengan kesulitan yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.

Semoga berguna dan bermanfaat.
Salam.

Oh ya, tidak lupa saya mohon maaf pada Sobat Blogger yang telah mengeposkan komentar sebelum diterbitkannya artikel ini, karena saya belum dapat memberikan tanggapan atau jawaban atas pertanyaan yang Sobat ajukan. Hal ini tidak lain disebabkan karena adanya sesuatu dan lain hal yang tidak mungkin saya sampaikan di sini, sehingga akhirnya saya belum dapat melakukan moderasi terhadap komentar yang Sobat poskan. Harapan saya, semoga hal tersebut dapat dimaklumi.