Cara align icon BlogList menjadi sebaris dengan tajuk blog.


Tanggal 19 Disember 2021, aku tukar baju baru. Tiada lagi template lama yang aku guna. Puas hati dapat tukar. Terasa laju yang amat berbanding template lama. Lagi best, bila responsive. Yang lama tak elok ke? Elok je. Cumanya ada beberapa part yang problem sikit bila view guna phone (mobile view).

Masa tengah gigih duk touch up apa yang patut, aku perasan widget BlogList tak kemas. Aku tak tahu developer terlepas pandang atau mungkin code CSS tak disertakan sekali. Jadi, mula lah pencarian aku buat trial and error sendiri. Terasa macam software engineer pulak. 🤓


Boleh tengok perbezaan sebelum dan selepas aku apply code CSS untuk menyerikan lagi widget BlogList ni. Aku cari serata website memang takde pun tutorial untuk customize widget ni. Jadi sila lah guna sekiranya perlu.

.BlogList1 li {
    margin-bottom: 15px; /* JARAK ANTARA BARISAN BLOG */
}

.BlogList1 .blog-icon {
    float: left; /* ICON DI SEBELAH KIRI */
}

.BlogList1 .blog-title {
    display: block; /* TAJUK BLOG SEBARIS */
    margin-left: 25px;
}

.BlogList1 .item-title {
    display: block; /* TAJUK ENTRI SEBARIS */
    margin-left: 25px;
}

.BlogList1 .item-time {
    display: block; /* MASA ENTRI SEBARIS */
    margin-left: 25px;
    font-style: italic; /* STYLE DAN SAIZ FONT BAGI MASA */
    font-size: 12px;
}

.BlogList1 .show-option {
    display: block; /* OPTION JUMLAH BLOG */
    float: right;
    font-size: 12px;
}

.BlogList1 .widget-content {
    height: 250px; /* TAMBAH SCROLL PADA WIDGET */
    overflow: auto;
}

.BlogList1 a:hover {
    text-decoration: none; /* BUANG UNDERLINE PADA BLOGLIST */
}

 P.S. Nama code BlogList tu mungkin ada yang BlogList2, BlogList3 dan seterusnya. Cuba search dalam template kalau nama code yang diberi tak sama. Cari code ]]></b:skin> dan paste code yang diberi atas code ni.

Post a Comment

9 Comments