Cara Mengatasi Layout Blogger Tumpang Tindih

DP BBM 23 - Cara Mengatasi Layout Blogger Tumpang Tindih - Selamat malam, selamat beristirahat dan selamat membaca di blog DP BBM 23, yang mungkin kebetulan sobat sedang online disini, setelah kemarin membahas dan berbagi mengenai Apa Itu http, https, www dan FTP, dikesempatan malam ini akan saya ulas sedikit mengenai blogger, yaitu tentang Cara Mengatasi Layout Blogger Tumpang Tindih, berikut ulasan selengkapnya!!!

Sebenarnya apa sih yang menyebabkan layout / tata letak blogspot menjadi tumpang tindih ?? mari kita bahas dalam postingan Cara Mengatasi Layout Blogger Tumpang Tindih, sebelumnya sobat pasti tau yang namanya kode <div class='clear'/> ataupun kode <div class='clear:both;'/> karena kode itu tentu selalu ada di dalam setiap template blogger/blogspot... apa sih efek dari kode <div class='clear'/> dan <div class='clear:both;'/> ini, pada tampilan blog kita ?? jadi sebenarnya fungsi kode tersebut untuk memberikan space antara dua element div, jika kode tersebut terhapus maka tampilannya akan menjadi tmpang tindih...


Perhatikan pada gambar diatas, saya berinama antara sebelum dan sesudah penyebab terjadinya element menjadi tumpang tindih, dikarenakan saya mengedit ulang templatenya, karena merasa kurang OK dengan tampilan Menu Navigasinya, akhirnya saya utak - atik sesuai dengan keinginan saya, dan dibawah ini adalah tampilan header ( bagian Navigasi ) bawaan dari templatenya, alias belum di edit...


Tampilan Navigasi seperti itu, emang tidak jelek sih, cuma sayang saja jika lewat smartphone terlihat kurang OK, dan sebagian menutupi iklan, akhirnya saya coba - coba merubahnya dengan tampilan seperti dibawah ini...


Seperti itulah hasil jadinya, lebih responsive dan terlihat lebih kece aja gitu hehe, dan merubah tampilan pun selesai, namun karena saya bosan dan terlihat kurang OK dengan logo yang sebelumnya saya gunakan, akhirnya saya berkeinginan untuk merubahnya, dan pada saat membuka layout / tata letak, ternyata bagian header tertindih dengan element lain, bisa sobat lihat pada gambar dibawah ini...


Dengan keadaan seperti itu, tentu saja tidak dapat merubah logo, karena bagian Edit tertutup, dan setelah saya cek ulang pada templatenya, ternyata ada bagian yang terhapus, yaitu pada bagian kode <div class='clear:both;'/> dan setelah diperbaiki, akhirnya tampilaannya kembali rapi dan logopun bisa di rubah...


Nah, jadi inti dan kesimpulannya kode <div class='clear:both;'/> dan <div class='clear'/> yaitu untuk mengatur jarak antara element satu dengan yang lainnya, dan untuk terlihat rapi pada layout dashboard blogger, labih jelasnya...

Fungsi DIV Clear dan Clear Both Pada Blogger


  1. Memberikan Space antara dua element div

    • kode <div class='clear:both;'/> dan <div class='clear'/> pada tampilan blog memiliki fungsi yaitu untuk memberikan ruang atau space antara element sebeleumnya dengan sesudahnya, jadi dengan menggunakan kode <div class='clear:both;'/> dan <div class='clear'/> ini, bisi juga mempercantik tampilan blog agar bentuknya tidak tumpang tindih atau saling bertumpukan...

  2. Mengatur tata letak ( lay out ) menu widget pada dasboard

    • Fungsi kedua yang sekaligus merupakan peranan penting dari kode kode <div class='clear:both;'/> dan <div class='clear'/> adalah mengatur tata letak menu widget pada tampilan menu utama layout di halaman dahsboard blogger, sehingga kita lebih mudah untuk mengedit / menambahkan gadget baru kedalam elemen yang kita inginkan...



Before you continue reading, it is necessary to underline that what is written is only a reference! so if there are errors in words and delivery methods, please understand! and below the recommendation article for you!

Content Disclaimer!

  • I as the owner of "BlogCaraOcha" thank you to all loyal readers, and those who accidentally stopped by here.

    And I apologize if there are many advertisements on the homepage or in the post.

    After "BlogCaraOcha" is accepted as a Google publisher, Google automatically places all advertisements.

  • If the content on "BlogCaraOcha" has similarities with other sites or blogs, it only provides a reference to each other by spreading the word in a simple article.

    With the aim, all internet visitors can easily and freely which if the article is easy to understand.

    In addition, so that readers can easily find what is on the search, with content that can provide content in surfing the internet!

  • All images posted in the article are not 100% owned by "BlogCaraOcha" but are taken from Google Search.

    So if there are similarities with the images on other sites, it is only for illustration only (to decorate the storyline as outlined in the article).

    For some of the images here, they are purely self-created, with the same purpose as illustration only.

    However, if there are inappropriate images and ask to be removed, please provide more detailed information via the contact at "BlogCaraOcha"

  • For content that discusses the product review or tutorial, if there are errors, please be advised that it may be an error in typing words or lacking in detail reviewing.

    So if there are typos and results that are not appropriate, can provide input where the location of the error or lack, so that the content is immediately deleted or corrected.

    But before submitting, try to see between the date / year the post was published with the current date / year.

    Because it could be other times what the written policy has changed.
  • Berlangganan via Email

    '