Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

61
Tgl. 14 Desember 2012

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 ya...

Perubahan Yang Terjadi Pada Layout Atau Tata Letak Widget Blog
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.


Katagori: , ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 61 komentar pada artikel ini ▶
Anonim
14/12/12 11.50 O

pertamanya yaaaah, uda lama tidak kesini,
:) :D

saya mau tanya tapi diluar topik tapi juga tentang pengaturan widget..


Saya kan ganti template blog dengan penyedia downloadan,
setelah saya pakai, setiap saya post artikel judul yang keluar di encarian google tidak judul entry itu, tapi ketambahan nama blog saya..

contoh :
judul artikel : cara sms gratis
muncul di google : Andie Shinigami : cara sms gratis


bagaimana itu yaah??? tolong bantuan dari ayah mela yaa urusan HTML..

15/12/12 21.03 O

Terima kasih sob untuk sementara saya belum pernah mengalami hal tersebut, tetapi sangat penting sekali untuk saya apabila dikemudian hari terjadi hal tersebut pada blog yg saya kelola mungkin dapat terbantu dengan artikel yg sobat terbitkan, di bookmark dulu sob... salam

16/12/12 04.01 O

Wah mantap tutorialnya, saya sdg mengalami hal demikian. namun say tidak menemukan tag <div class="bilah-menu-atas" id="bilahmenuatas"> pada template saya. terus kira2 gmn ya gan??

16/12/12 07.47 O

@andieshinigamiSobat, menurut sepengetahuan saya hal yang seperti itu disebabkan oleh penggunaan tag meta tertentu.

Sehingga untuk mengetahui jawabannya secera lebih rinci maka cobalah membandingkan tag meta yang digunakan ada template sebelumnya dengan tag meta yang dipakai pada template yang sekarang ini.

CMIIW

16/12/12 07.51 O

@Kraeng FranciscoOke... Silakan Sob. :)

16/12/12 08.00 O

@Bang DadanSobat, uraian dalam artikel ini memang hanya digunakan untuk mengatasi kerusakan yang mungkin terjadi pada layout atau tata letak widget setelah mengimplementasikan teknik dalam kedua artikel di atas.

Sehingga bila Sobat tidak menemukan tag yang Sobat maksud tentu sangatlah wajar, karena bisa jadi penyebabnya lah yang berbeda.

Jadi untuk mengetahui penyebabnya secara pasti, menurut saya akan lebih baik jika Sobat melakukan analisa terlebih dulu pada template, sehingga dapat menentukan tidakan yang mesti dilakukan.

lebih kurang demikian dan semoga dapat membantu. :)

18/12/12 12.22 O

ayah
maaf sebelumnya, daftar link sahabat saya, saya pindahkan ke halaman linkx exchange, karena outbond link saya terlalu banyak

terima kasih

19/12/12 14.01 O

Untuk ane gx pake blogcepot jadi gx terlalu ribet ngatur page layout segala, btw lam kenal dari

http://kliverz.fixi.in

21/12/12 09.11 O

makasih infonya..

22/12/12 01.03 O

@Andie ShinigamiOke Sobat. Terimakasih atas pemberitahuan yang Sobat sampaikan. :)

22/12/12 01.05 O

@trikloverSalam kenal balik Sobat. Dan terimakasih pula atas komentar yang Sobat poskan dalam artikel ini. :)

22/12/12 01.06 O

@pasnemYap... sama-sama Sobat.

22/12/12 15.47 O

Mau komentr di artikel meta tag utk fb sdh ditutup, pdhl artikel gitu yg sy cari, share artikel di fb yg muncul kdg cm judul doank n deskripsi artikel ga muncul, kalo blh dibantu, meta tag utk blog sy bagusnya apa ya?, sy gaptek sgt masalah blog. Well, thank you for nice info..Selmt thn baru 2013

22/12/12 18.09 O

Mantep gan postingn'y.kunjungn perdana terima kasih telah singgah di blog ane.

Anonim
22/12/12 18.49 O

Alhamdulillah template saya belum pernah terjadi Seperti itu, Tapi ijin bookmark ya sob, jaga2 kalo suatu saat terjadi saya langsung ke TKP hehehe.. maksudnya ke blog agan ini...
Salam Kenal Gan
thanks

22/12/12 19.09 O

woww,. keren infonya gan.
follbek dund!

http://alif-unique.blogspot.com
Thanks Before

22/12/12 20.08 O

Nah Ini dulu sempat buat saya pusing tingkat dewa, tapi kerena sering minum kopi+ rokok dan sabar menyusun CSS dan HTMl-nya dan membaca Tutorial akhirnya beres juga..
Terima kasih sob, sudah berbagi jangan lupa mampir...

Anonim
23/12/12 16.08 O

ini yang saya cari-cari kawan. salah satu template blog saya mengalami kasus seperti ini dan alhamdulillah sudah bisa diatasi berkat tutorial ini. terimakasih banyak sudah berbagi ilmu yang bermanfaat dan terimakasih sudah berkunjung ke blog saya. jika sobat berkenan saya mengudang untuk bertukar link. link Eltelu sudah saya add dan bisa dicek dibagian footer blog saya. senang bisa berkenalan !

23/12/12 19.17 O

Saya pernah mengalami hal yang sam gan... dan fixed dengan baik..

Info yang sangat menarik kang..

salam kenal aja.
saya bookmark blog akang.

24/12/12 11.24 O

Info yang bagus...
Lalu ada yang mau ditanyakan, Maaf kalau OOT. Sebenarnya FB Comment itu tidak bisa dipasang ya untuk template yang bukan bawaan dari blogger?
Sebenarnya sekalian blogwalking, ditunggu ya Sob kunjungan baliknya...

24/12/12 12.50 O

@Meme MeliaDulu memang jika melakukan share ke facebook, hasilnya adalah seperti yang pernah saya uraikan dalam artikel yang Sobat maksud.

Namun seperti yang kita tahu bahwasanya facebook sendiri selalu melakukan upgrade, sehingga sepertinya meta tag tidak lagi berpengaruh terhadap tautan yang dishare.

Oh ya, tidak lupa saya sampaikan pula selamat tahun baru 2013 untuk Sobat. :)

24/12/12 12.51 O

@Musick GalleryTerimakasih balik Sobat. :)

24/12/12 12.56 O

@jawarabanten.comSilakan Sob. Dan syukurlah bila hal yang demikian belum pernah terjadi pada template blog yang Sobat kelola. :)

24/12/12 13.04 O

@Alif Irfan AnshoryOke, terimakasih Sobat.

24/12/12 13.09 O

@Mardianus SuwardiOke. Terimakasih balik atas kunjungan dan berkenannya mengeposkan komentar dalam artikel ini Sobat. :)

24/12/12 13.54 O

@dapur-tutorialOke, terimakasih atas kerjasama baiknya Sobat.

Link Sobat juga telah terpasang dan dapat Sobat cek secara langsung di kolom blog sahabat.

24/12/12 14.08 O

@Ary AnshorieSyukurlah bila demikian Sob. :)

24/12/12 14.12 O

@Ahmad Lukman NulhakimSilakan Sob. Dan terimakasih bila berkenan mem-bookmark blog ini.

24/12/12 14.14 O

@Indra KrisnadiKalau pada kustom template, jujur saja saya belum pernah mecobanya Sob.

Tapi dulu ketika saya mencoba menerapkannya pada template standar, teknik tersebut dapat diimplementasikan dengan baik. :)

25/12/12 11.09 O

Berikan saya backlink ya... nanti saya follow

www.boshi4u.blogspot.com

26/12/12 06.15 O

imformasi yang bagus teman, saling follow yuk

27/12/12 01.17 O

@Nagare boshiSaya agak kurang paham dengan yang Sobat maksud.

Apakah maksudnya Sobat ingin mengajak untuk tukar link dengan blog ini?

27/12/12 01.18 O

@Arluva StoryTerimakasih balik Sobat.

Anonim
27/12/12 10.23 O

disimpen dulu sob buat jaga-jaga nanti kalau ada yang error seperti diatas.
terimakasih sob tipsnya.

28/12/12 23.00 O

@nakusan.comSilakan Sob. Terimakasih balik atas berkenannya mengeposkan komentar dalam artikel ini. :)

30/12/12 09.34 O

Saya dulu pernah gitu akhirnya ganti template -_- Sekarang jadi tau dehh masalahnya.

Oiya mohon folback yaa bang, salam kenal.

01/01/13 14.45 O

@Dirga BscOke, salam kenal balik Sobat.

16/01/13 14.48 O

nanya juga dong mas... baru nemu hal sulit nih mas... dah browsing ga ada yg sesui. gimana cara mengatasi tata letak di blog tidak sama dengan di tampilan blog. semua laman di si samping postingan berubah di bawah positingan semua. padahal di pengaturan tata letak ada di sebelah postingan.

16/01/13 15.00 O

mohon bantuanya mas.. blog saya. tata letak dengan hasil tampilan blog kok beda. di tata letak semua laman saya taruh di samping kanan dan kiri posting. tapi setelah di buka hasilnya semua laman tampil di bawah postingan... sudah tak coba rubah tata letaknya hasilnya tampilanya tetep sama semua laman ada di bawah posting dan di sisi kanan kiri posting kosong... trims. mungkin bisa memberi pencerahan...

17/01/13 05.36 O

@Widodo Putra JayaSobat, untuk mengatasi hal tersebut maka perlu dilakukan pembenahan pada CSS yang digunakan.

Perlu diketahui bahwasanya CSS untuk tata letak dengan CSS untuk tampilan blog adalah terpisah. Sehingga walaupun CSS untuk tata letak telah sesuai dengan yang semestinya, maka belum tentu CSS untuk tampilan blog menghasilkan tampilan yang sesuai (dan demikian pula sebaliknya).

Jadi kesimpulannya adalah, perlu dilakukan analisa dan perbaikan pada CSS halaman agar menghasilkan tampilan sesuai dengan yang diharapkan.

17/01/13 05.40 O

@Widodo Putra JayaSobat, seperti uraian jawaban saya sebelumnya, bahwasanya hal tersebut disebabkan karena CSS yang digunakan untuk menata tampilan blog belum sesuai. Sehingga silakan periksa dan kemudian lakukan pembenahan pada CSS tampilan blog yang Sobat kelola. :)

26/01/13 20.25 O

thanks infonya....

27/01/13 05.24 O

@Rewin SatriaSama-sama.

03/02/13 05.38 O

Sob, setelah saya selesaikan semua langkah pada uraian diatas, namun apabila mengkilik menu template, terdapat menu tab mengapung seperti contoh gambar ini.

sebenarnya tidak dapat dilihat saat berada pada tampilan halaman blog, cuma saya yang kwatir saja, mungkin ada pengaruh lain.

Mohon maaf saya meninggalkan link pada kolom komentar. terima kasih

04/02/13 06.16 O

@Kraeng FranciscoHal yang seperti ini sebenarnya bisa saja disiasati dengan menyesuaikan CSS yang digunakan untuk layout, karena bsa jadi penyebabnya adalah hal tersebut.

Namun kalau menurut saya, selama hal tersebut tidak berdampak pada halaman blog yang dilihat oleh pengunjung sebenarnya tak jadi masalah Sob.

04/02/13 13.51 O

Benar sob, nanti akan saya coba menyesuaiakan CSS-nya. Terima kasih sobat sudah banyak membantu.

08/03/13 21.06 O

gan ane mau tanya nih, kalo di blog ane sih gambar tampilan headernya jadi kegeser ke kanan(tidak center) jadi hilang header yg ane buat sisa cuma garis pinggir kiri aja, apa sama cara ngatasinnya. mohon pencerahannya gan thx sebelumnya

11/03/13 16.44 O

salam kenal dari Blog Guru Biasa, Bagaimana sobat, cara masuk ke pengaturan template, jika di halaman luar tidak ada tombol atau tulisan dashboardnya?

13/03/13 01.10 O

@Souvenirku UnikUntuk kasus yang berbeda, tentu saja cara mengatasinya juga tidak sama, Sob. Hal ini disebabkan karena masing-masing bagian dalam halaman blog memiliki setelan CSS yang berbeda pula.

Dan sayangnya Sobat tidak mengaktifkan Blogger Profil, sehingga saya tidak dapat mengetahui alamat blog yang Sobat kelola. Dengan demikian saya pun akhirnya tidak dapat melakukan pengecekan secara langsung untuk melakukan analisa dan kemudian memberikan solusi jawaban atas permasalahan yang Sobat alami.

Jadi, untuk sementara saya mohon maaf bila belum dapat memberikan uraian jawaban lengkap atas pertanyaan Sobat. :)

13/03/13 02.41 O

@Ahlul HisabSobat, jujur saja saya kurang paham dengan maksud pertanyaan tersebut. Sehingga bagaimana bila Sobat perjelas terlebih dulu tentang 'pengaturan template' yang Sobat maksud dalam pertanyaan tersebut.

25/04/13 12.16 O

makasih bg

29/04/13 00.54 O

@iqbal hadySama-sama dan terimakasih balik Sobat.

30/05/13 09.19 O

Masbro, saya punya masalah di gadget header blog, gadgetnya malah tampil setengah, sehingga kalau saya hapus gadget nya tidak muncul di layout (tersembunyi), sudah saya cek di htmlnya untuk dihapus malah gak ada. mohon bantuannya:

http://bubongtireh.blogspot.com/

31/05/13 23.12 O

@akifa nailaCoba Sobat cek CSS-nya, terutama CSS untuk penataan layout. Karena menurut sepengetahuan saya layout halaman dapat ditata dengan mengatur CSS yang terdapat dalam template.

31/05/13 23.12 O

@akifa nailaCoba Sobat cek CSS-nya, terutama CSS untuk penataan layout. Karena menurut sepengetahuan saya layout halaman dapat ditata dengan mengatur CSS yang terdapat dalam template.

15/06/13 08.47 O

makasih bang infonya,,,belum pernah ngalami erorr yg seperti itu,,,tpi kalau isi artikel hilang pernah tpi lom bs benerin...
kalau ada waktu silahkan berkunjung dan minta saran dan kritikanya bang...makasih
http://prastypunya.blogspot.com

15/06/13 14.18 O

@Dwi PrasetyoOke, sama-sama dan terimakasih balik Sobat.

16/09/13 21.20 O

Selamat malam gan, mohon bantuannya ya...
begini gan, saya kan ganti template. tapi yang muncul masih saja template lama saya, sedangkan template yang baru saya pasang hanya tampak pada halaman pratinjau saja. terima kasih sebelumnya.

blog saya :wismakreatif[dot]blogspot[dot]com

17/09/13 04.52 O

@Kang UcupSudahkah Sobat melakukan perubahan yang dilakukan pada template? Apabila sudah, maka dapat dipastikan perubahan yang telah tersimpan akan berdampak pada tampilan yang baru dan tidak hanya tampak pada laman pratinjau saja.

Jadi ada baiknya bila Sobat pastikan dulu bahwa proses simpan yang dilakukan telah berjalan sukses.

13/09/16 00.51 O

Saya ijin coba ya gan.. makasih infonya

di tunggu kunbalnya ya . maksih

https://christianfridhobenz.blogspot. com

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog