4+ Cara Menghilangkan Titik Hitam (Bullets) di Layout Blogger

Note: Blog ini sedang dalam masa pengembangan, baik dari segi SEO maupun artikel. Mohon maaf apabila gambar tidak tersedia untuk saat ini, - 10 Februari 2018.
Cara Menghilangkan Titik Hitam (Bullets) di Layout Blogger

Istilah ini dikenal dengan "bullets" (bahasa inggris), bulatan hitam, titik-titik atau bintik-bintik hitam pada layout blogger.

Penyebab adanya bullets di tata letak blogger karena sebuah template blogger baru saja melakukan validasi HTML5.

Bullets ini sering bermasalah dibagian Menu Horizontal pada kode "li" dan "ul" di Menu Drop-Down (Naik dan Turun).

Meski pun pada faktanya tidak mengganggu tampilan web blog diluar atau Home Page, tentu bagaimana pun juga itu sangat mengganggu ya. Namun kita bisa mengatasi dan menghilangkan titik-titik hitam di layout blogger dengan sangat mudah.

4+ Cara Menghilangkan Titik Hitam (Bullets) di Layout Blogger


1. Blogger > Edit HTML Template
2. Cari kode "list-style" atau "list-style-type"

Apabila sudah, maka akan menemukan kode seperti dibawah ini:

Bullets - {list-style: decimal outside}
Bullets - {list-style: square}
Bullets - {list-style: decimal outside}
Bullets - {list-style: square}

Ganti kode "decimal outside" dan "square"; atau kata-kata lainnya yang hampir mirip dengan kode tersebut, dengan kode "none". Nantinya kode akan berubah seperti ini:

Bullets - {list-style: none}
Bullets - {list-style: none}
Bullets - {list-style: none}
Bullets - {list-style: none}

Oh iya... pernah ada yang menanyakan ke saya apa pengaruh bullets di layout blogger bagi SEO ? Saya mohon maaf karena saya tidak tahu.

Namun karena penyebabnya validasi HTML5 apalagi validasi itu penting banget, ya sebaiknya sih di validasi-kan terus ke Valid HTML5 karena itu bagus buat SEO. Permasalahan bakal muncul bullets di layout blogger saya rasa bisa diatasi dengan menggunakan tutorial diatas.

4+ Cara Menghilangkan Titik Hitam (Bullets) di Layout Blogger

Cara diatas tidak berhasil? TERLALU...

1. Template > Cari kode <b:skin>
2. Copy kode dibawah ini, letakkan dibawah kode <b:skin>

body#layout ul {display: none}
#layout ul{display:none}

3. Simpan dan silahkan periksa

Nggak mau juga? Sungguh terlalu...

1. Cari kode body */]]></b:skin>
2. Copas kode dibawah ini, tepat diatas kode */]]></b:skin>

body#layout ul{display:none}

3. Simpan template dan silahkan periksa.

Dan... ternyata nggak mau juga? Keterlaluan banget yaaakkk... Coba tutorial dibawah ini, sudah pasti bisa!

1. Cari kode <b:skin><![CDATA[
2. Salin kode dibawah ini, tempatkan dibawah kode <b:skin><![CDATA[

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,.sidebar1-wrapper {width:300px;float:right}
body#layout #footer {width:970px}
.footer {width:215px;float:left}
body#layout ul {display: none}

Atau kode dibawah ini:

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

Atau kode ini:

body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
body#layout #outer-wrapper{overflow:visible;width:1000px}
body#layout #header{float:left;width:240px} body#layout #header2{float:right;width:240px} body#layout .add_widget{width:240px} body#layout div.widget{width:240px}
body#layout #sidebar-wrapper{overflow:visible;width:240px}
body#layout #lsidebar-wrapper{overflow:visible;float:left;width:240px;margin-right:50px;} body#layout #main-wrapper{overflow:visible;float:left;width:240px}
body#layout #rsidebar-wrapper{overflow:visible;float:right;width:240px}
body#layout #myGallery{display:none} body#layout .featuredposts{display:none}
body#layout .fp-slider{display:none} body#layout #navcontainer{display:none}
body#layout .menu-secondary-wrap{display:none}
body#layout .menu-secondary-container{display:none}
body#layout #skiplinks{display:none}
body#layout .feedtwitter{display:none}
body#layout div.section{font-family:sans-serif;margin:0 auto 2px;padding:0 0 10px 0;position:relative;overflow:visible}
body#layout .section-columns{margin:0} .section{width:100%}

Atau kode 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,.sidebar1-wrapper {width:300px;float:right}
body#layout #footer {width:970px}
.footer {width:215px;float:left}
body#layout ul {display: none}

Nah apabila semua cara diatas nggak bekerja dengan semestinya, dengan kata lain tutorial mengatasi atau menghilangkan titik hitam di Layout blogger, maka Anda harus mengganti template blog yang sudah ada dengan template blogger baru lainnya.

Kalau kamu punya tutorial menghilangkan atau menyembunyikan bullets di tata letak blogger, mungkin bisa dibagikan di kolom komentar. Syukron...

Labels: Desain Blogger

Thanks for reading 4+ Cara Menghilangkan Titik Hitam (Bullets) di Layout Blogger. Semoga berguna, Gan!

1 Komentar untuk "4+ Cara Menghilangkan Titik Hitam (Bullets) di Layout Blogger"

Saya akan mencobanya neh agan mengingat munculnya titik hitam sebab baru berganti template.

Gunakan anonymous kalau tidak punya Google+ Account.

Back To Top