Cara Mengatasi Layout Blogger Awut-Awutan 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, karena alasannya ialah 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 alasannya ialah validasi HTML5 yang pernah kau lakukan.

Pic: Blogger Spice

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

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

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

Jawabannya ialah tidak kuat 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 kau 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 aba-aba ini: ]]></b:skin> atau </b:skin>. Copy (Salin) aba-aba yang ada di bawah ini:

body#layout ul {    display: none; } 

...atau:

#layout ul {    display: none; } 

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

2. Mengatasi & Memperbaiki Tata Letak Blogger yang Berantakan

Cari aba-aba ini: body#layout. Kamu akan melihat beberapa aba-aba CSS yang bekerjasama pribadi dengan atribut HTML. Hapus aba-aba yang sudah ada, kemudian ganti dengan salah satu aba-aba 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, kau juga dapat memakai aba-aba 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 menyerupai widget layout di Blogger yang saling menindih antara satu dengan lainnya, kau juga dapat memakai (menambahkan) aba-aba atribut HTML <div class='clear'/> ini.

Kode atribut HTML tersebut digunakan, dipasangkan, dan/atau ditempatkan di elemen-elemen yang saling berpisah. Contohnya menyerupai 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, kau harus memperhatikan beberapa aba-aba yang sudah ditandai dengan warna merah.

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

Untuk problem ini, kau dapat konsultasi pribadi di kolom komentar yang sudah disediakan. Sertakan juga alamat blog kamu, dan jangan menyertakan URL aktif. Terima kasih.

Source:

candysweet-aina.blogspot.com/search?q=mengatasi-layout-blog-acak-acakan
candysweet-aina.blogspot.com/search?q=mengatasi-layout-blog-acak-acakan
candysweet-aina.blogspot.com/search?q=mengatasi-layout-blog-acak-acakan
Sumber http://addbloggerthemes.blogspot.com

Share this post