Cara Mengatasi Layout Blogger Berantakan dalam 3 Langkah Mudah

Tutorial: Cara Mengatasi, Memperbaiki & Merapikan Layout (Tata Letak) di Blogger yang Berantakan - Titik Hitam (Bullets) di Tata Letak (Layout) Blogger/Blogspot

Salah satu penyebab kenapa tata letak (Layout) di Blogger menjadi berantakan, lantaran karena adanya aktifitas validasi HTML5 di dalam template blogger.

Pernah melihat titik-titik hitam di Layout Blogger, bahasa lainnya Bullets? Nah adanya titik hitam (bullets) di tata letak blogger ini, itu juga karena validasi HTML5 yang pernah kamu lakukan.

Pic: Blogger Spice

Pada artikel ini, kamu akan dijelaskan (1.) cara menghilangkan/menghapus titik hitam di layout blogger, dan (2.) cara mengatur layout blog agar menjadi rapi.

Pengaruh Titik Hitam (Bullets) di Tata Letak (Layout) Blogger

Pertanyaan pertama; apa dampak, efek, dan pengaruh dari titik hitam yang muncul di tata letak (layout) blogger ini? Apakah template blog akan rusak?

Jawabannya adalah tidak berpengaruh sama sekali; baik dari sisi tampilan di Home Page, maupun Single Posts (BlogPosting). Apalagi dari segi SEO, tidak ada pengaruhnya sama sekali.

Sebenarnya, adanya titik hitam (Bullets) maupun tata letak yang TIDAK beraturan; tidak ada kaitannya dengan tampilan di situs web, terlebih-lebih dari sisi SEO. Tidak ada kaitannya.

Cara Mengatasi Layout Blogger Berantakan dalam 3 Langkah Mudah

Seperti yang sudah dikatakan di atas; baik tata letak yang berantakan dan/atau titik hitam di layout blog, tidak ada pengaruhnya sama sekali.

Tutorial ini sengaja kami buat untuk kamu yang merasa tidak nyaman dengan tampilan Layout Blogger yang berantakan; tertimpa, edit widget tertutup, atau saling tolak menolak.

1. Mengatasi & Memperbaiki Titik Hitam (Bullets) di Tata Letak Blogger

Pertama sekali, cari kode ini: ]]></b:skin> atau </b:skin>. Copy (Salin) kode yang ada di bawah ini:

body#layout ul {
   display: none;
}

...atau:

#layout ul {
   display: none;
}

...dan Paste (Tempel) di atas kode ]]></b:skin> atau </b:skin> kemudian simpan template blogger.

2. Mengatasi & Memperbaiki Tata Letak Blogger yang Berantakan

Cari kode ini: body#layout. Kamu akan melihat beberapa kode CSS yang berhubungan langsung dengan atribut HTML. Hapus kode yang sudah ada, lalu ganti dengan salah satu kode yang ada di bawah ini:

#header-wrapper, #outer-wrapper, #footer-wrapper {width:970px}
#header-left {width:200px;float:left}
#header-right {width:730px;float:right}
#main-wrapper {width:650px;float:left}
#sidebar-wrapper {width:300px;float:right}
.footer {width:315px;float:left}

Tutorial di atas juga berlaku apabila edit widget di layout blog menurun (berjejer) ke bawah. Selain itu, kamu juga bisa menggunakan kode yang ada di bawah ini:

body#layout .outer-wrapper {width:970px}
body#layout .content-wrapper {width:970px}
body#layout #header {width:300px;float:left;margin-top:30px}
body#layout #header2 {width:500px;float:right}
body#layout .main-wrapper {width:550px}
body#layout .sidebar-wrapper {width:300px;float:right}
body#layout #footer {width:970px}
.footer {width:200px;float:left}
body#layout ul {display: none}

3. Mengatasi & Memperbaiki Tata Letak Blogger yang Saling Bertumpuk (Menindih)

Jika kasusnya seperti widget layout di Blogger yang saling menindih antara satu dengan lainnya, kamu juga bisa menggunakan (menambahkan) kode atribut HTML <div class='clear'/> ini.

Kode atribut HTML tersebut digunakan, dipasangkan, dan/atau ditempatkan di elemen-elemen yang saling berpisah. Contohnya seperti ini, antara atribut Navigasi Menu dengan Content Wrapper:

<div class='clear'/>
<nav id='menu'>
<ul>
  <li><a href='/'>Home</a></li>
     <li><a href='https://example.blogspot.com/p/tentang-saya.html'>Tentang Saya</a></li>
     <li><a href='https://example.blogspot.com/p/disclaimer.html'>Dislcaimer</a></li>
     <li><a href='https://example.blogspot.com/p/layanan-kontak.html'>Layanan Kontak</a></li>
     <li><a href='https://example.blogspot.com/p/sitemap.html'>Sitemap</a></li>
</ul>
</nav>
<div class='clear'/>
    <div class='content-wrapper'>
Kumpulan atribut HTML untuk menampilkan konten, artikel, atau postingan -- tepatnya di BlogPosting.
<div class='clear'/>
    <div class='sidebar-wrapper'>
Kumpulan atribut HTML untuk menampilkan Recent Post, Popular Posts, Labels, Blogroll, dan sebagainya.
<div class='clear'/>

Catatan Penting Bagi yang Menggunakan Tutorial Kami

Untuk tutorial di atas, kamu harus memperhatikan beberapa kode yang sudah ditandai dengan warna merah.

Kamu harus mengecek lagi apakah HTML dan CSS yang dibangun di template blog tersebut menggunakan kode .content-wrapper atau .main-wrapper; apakah kodenya berupa sidebar-wrapper atau sidebar saja; dan seterusnya.

Untuk masalah ini, kamu bisa konsultasi langsung di kolom komentar yang sudah disediakan. Sertakan juga alamat blog kamu, dan jangan menyertakan URL aktif. Terima kasih.

Source:

https://tipsseokiller.blogspot.com/2018/01/mengatasi-layout-blog-acak-acakan.html
http://tipsseokiller.blogspot.co.id/2015/08/cara-menghilangkan-titik-bullets-layout-blog.html
http://www.contohblog.com/2016/09/memperbaiki-layout-tata-letak-acak-acakan-dashboard-blogger.html

Labels: Tutorial Blogger

Thanks for reading Cara Mengatasi Layout Blogger Berantakan dalam 3 Langkah Mudah. Please share this article.

Share this post