Modifikasi List Label Menjadi 2 Kolom

Senin, 28 Mei 2018

Beberapa waktu lalu, sempat ada seorang sahabat meminta tutorial untuk membagi list label menjadi 2 kolom. Karena kesibukan aku di luar rumah, jadi gres hari ini dapat posting 1 tutorial modifikasi lagi.

Buat teman-teman yang masih belum berlangganan, silahkan berlangganan artikel kangwira dengan cara mendaftarkan alamat email teman-teman di kolom berlangganan gratis dibawah.


Baik, kita pribadi saja praktekkan yah teman-teman.

Langkah pertama yang harus teman-teman jalankan yakni menciptakan sebuah widget label pada hidangan tata letak. Sesuaikan Lokasi penyimpanannya terlebih dulu yah. Lalu ikuti configurasi labelnya ibarat gambar dibawah ini.

Perhatikan kotak merahnya pada gambar diatas yah teman-teman.

Setelah itu, teman-teman buka hidangan tema kemudian pilih Edit HTML.
Salin instruksi CSS dibawah ini, dan letakkan sebelum instruksi ]]></b:skin>.

.Label{display:block;width:100%;background:#fff;margin:0 auto;padding:10px 0} .Label .widget-content{padding:5px 0;margin:0} .Label ul{list-style-type:none;margin:0 0;padding:0} .Label ul li{float:left;width:42.5%;margin:0 7px 5px 0;color:#616060;text-decoration:none;padding:6px;display:block;text-align:left;text-indent:0;font-size:14px;background:#FFF;border:1px solid #EFEFEF;text-transform:capitalize;border-radius:1px;-moz-border-radius:1px;-webkit-border-radius:1px} .Label a:link,.Label a:visited{color:#2b2b2b}

Simpan template kemudian lihat hasilnya.

Setelah kau lihat hasilnya, teman-teman dapat coba mengubah bertahap instruksi CSS yang ada biar mendapat hasil yang sesuai cita-cita kamu.

Sekian dulu tutorial modifikasi List Labelnya yah teman-teman. Kalau ada yang belum paham, silahkan bertanya melalui kolom komentar dibawah ini yah.

Ohya.. jangan lupa untuk berlangganan dan share apabila artikel ini bermanfaat untuk teman-teman.

Share This :