Customize Show All button Blog List widget.

Semalam gigih aku duk tacap blog. Bukan kering idea nak taip entri baru. Tapi malas punya pasal. Maka, aku bermanja lah dengan coding malam tu.

Kalau sesiapa ada letak widget Blog List, bila scroll, pasti perasan ada perkataan 'Show All' kat bahagian bawah widget tu.

Bagi aku, tulisan tu nampak sendu. Tak bermaya. Aku nak ubah tulisan tu jadi dalam bentuk button. Bagi sesuai sikit dengan tema blog aku.

Dalam masa sama, tak pulak aku jumpa mana-mana web atau blog yang buat tutorial pasal ni. Disebabkan tu, aku buat lah satu entri khas untuk customize tulisan 'Show All' dalam widget Blog List tu.

Caranya senang je. Pergi ke Theme > klik anak panah tepi CUSTOMIZE > Edit HTML. Dalam code banyak-banyak tu, cari lah code ]]></b:skin>. Copy dan paste code bawah ni kat atas code ]]></b:skin> tu.

.BlogList .show-option {text-align: center; width: fit-content; margin: auto; font-size: 12px; line-height: 18px; padding: 2px 6px; letter-spacing: 0.5px; transition:all .17s ease;}

.BlogList1 .show-option {text-align: center; width: fit-content; margin: auto; font-size: 12px; line-height: 18px; padding: 2px 6px; letter-spacing: 0.5px; transition:all .17s ease;}

.BlogList .show-option {

background: #e5e5ea;

border: solid 5px #e5e5ea;

-moz-border-radius-topleft: 50px;

-moz-border-radius-bottomleft: 50px;

-goog-ms-border-radius-topleft: 50px;

-goog-ms-border-radius-bottomleft: 50px;

border-radius-topleft: 50px;

border-radius-bottomleft: 50px;

-webkit-border-top-left-radius: 50px;

-webkit-border-bottom-left-radius: 50px;

-moz-border-radius-topright: 50px;

-moz-border-radius-bottomright: 50px;

-goog-ms-border-radius-topright: 50px;

-goog-ms-border-radius-bottomright: 50px;

border-radius-topright: 50px;

border-radius-bottomright: 50px;

-webkit-border-top-right-radius: 50px;

-webkit-border-bottom-right-radius: 50px;

}

.BlogList1 .show-option {

background: #e5e5ea;

border: solid 5px #e5e5ea;

-moz-border-radius-topleft: 50px;

-moz-border-radius-bottomleft: 50px;

-goog-ms-border-radius-topleft: 50px;

-goog-ms-border-radius-bottomleft: 50px;

border-radius-topleft: 50px;

border-radius-bottomleft: 50px;

-webkit-border-top-left-radius: 50px;

-webkit-border-bottom-left-radius: 50px;

-moz-border-radius-topright: 50px;

-moz-border-radius-bottomright: 50px;

-goog-ms-border-radius-topright: 50px;

-goog-ms-border-radius-bottomright: 50px;

border-radius-topright: 50px;

border-radius-bottomright: 50px;

-webkit-border-top-right-radius: 50px;

-webkit-border-bottom-right-radius: 50px;

}

.BlogList .show-option:hover {

background: #d0d0d0;

border: solid 5px #d0d0d0;

-moz-border-radius-topleft: 50px;

-moz-border-radius-bottomleft: 50px;

-goog-ms-border-radius-topleft: 50px;

-goog-ms-border-radius-bottomleft: 50px;

border-radius-topleft: 50px;

border-radius-bottomleft: 50px;

-webkit-border-top-left-radius: 50px;

-webkit-border-bottom-left-radius: 50px;

-moz-border-radius-topright: 50px;

-moz-border-radius-bottomright: 50px;

-goog-ms-border-radius-topright: 50px;

-goog-ms-border-radius-bottomright: 50px;

border-radius-topright: 50px;

border-radius-bottomright: 50px;

-webkit-border-top-right-radius: 50px;

-webkit-border-bottom-right-radius: 50px;

}

.BlogList1 .show-option:hover {

background: #d0d0d0;

border: solid 5px #d0d0d0;

-moz-border-radius-topleft: 50px;

-moz-border-radius-bottomleft: 50px;

-goog-ms-border-radius-topleft: 50px;

-goog-ms-border-radius-bottomleft: 50px;

border-radius-topleft: 50px;

border-radius-bottomleft: 50px;

-webkit-border-top-left-radius: 50px;

-webkit-border-bottom-left-radius: 50px;

-moz-border-radius-topright: 50px;

-moz-border-radius-bottomright: 50px;

-goog-ms-border-radius-topright: 50px;

-goog-ms-border-radius-bottomright: 50px;

border-radius-topright: 50px;

border-radius-bottomright: 50px;

-webkit-border-top-right-radius: 50px;

-webkit-border-bottom-right-radius: 50px;

}

Klik Save. Tengok blog. Ada perubahan ke tak dengan perkataan 'Show All' tu. Kalau ada, berjaya lah tu. Kalau takde, sila komen. Boleh aku tolong apa yang perlu.

Background yang aku buat tu warna kelabu. Kalau nak tukar warna lain, boleh je. Gantikan je semua code #e5e5ea ni dengan code warna pilihan hati. Code warna boleh cari dalam web HTML Color Codes ni.