Customize tulisan Add comment Blogger.

Perasan tak masa jengah mana-mana blog, bila nak komen tu, ada sesetengah blog yang ada perkataan Add comment kat ruangan komen. Ada sesetengah blog (selalunya template baru), takde tulisan tu.

Kenapa jadi macam ni? Ikut firasat aku, perkataan Add comment tu hilang bila guna template yang bukan dari template rasmi Blogger. Macam template aku, tulisan Add comment tu pun takde sebab aku guna template bukan milik Blogger.

Kelebihan dan kekurangan

Aku yakin yang developer template baru buang perkataan Add comment tu sebab nak bagi blog nampak slick dan kemas. Tak beserabut dengan tulisan tu.

Tapi ada kekurangannya berdasarkan pengalaman aku masa blogwalking. Bila tulisan tu takde, akan bagi kesan masa nak komen entri. Situasinya macam ni. Bila aku bukak mana-mana entri, aku scroll ke komen dan nak komen, kotak komen (comment box) muncul macam biasa.

Kemudian aku tersalah klik tulisan Reply. Muncul kotak komen untuk reply komen. Tapi waktu ni, kotak komen awal-awal tadi dah hilang. Kalau nak munculkan semula, aku kena refresh page entri tu atau reply mana-mana komen. Jadi, benda ni macam menyusahkan jugak lah bila tulisan Add comment tu takde.

Misi mencari tulisan Add comment

Memandangkan blog aku ni template nya tak disertakan sekali dengan tulisan Add comment, aku terpaksa cari sendiri cara nak munculkan kembali tulisan tu.

Lama jugak aku cari. Tapi nasib baik jumpa jugak penyebab tulisan Add comment tak muncul. Rupa-rupanya, developer template aku ni sembunyikan tulisan Add comment tu.

Maka, aku pun munculkan lah kembali tulisan tu dengan buat perubahan kat code yang ada dalam template blog aku ni. Aku ubah code .comments .continue { display: none!important; } kepada .comments .continue { display: ; }.

Ada jugak sesetengah template yang ada code lebih kurang macam ni: .comments .continue a { display: none!important; }. Sama jugak macam tadi, kena edit jugak code ni.

Nak delete terus semua code tu pun boleh. Cuma aku tak nak delete sebab nanti masa akan datang kalau nak customize, boleh tahu apa yang aku dah ubah. Lepas dah edit code tu, muncul lah tulisan Add comment kat bawah petak komen.

Customize tulisan Add comment

Sekarang, tulisan tu dah muncul. Tapi nampak tak cantik. Nampak terlalu simple. Kalau boleh, aku nak ubah rupa tulisan tu biar ngam dengan template aku.

Ada beberapa code yang aku taruk. Ada 4 jenis CSS yang terlibat. Boleh tengok code yang aku dah edit kat bawah ni.

.comments .continue {

text-align: center;

color: ;

width: fit-content;

margin: auto;

padding-bottom: 20px;

}

.comments .continue a {

background: #93AAFF;

font-size: 13px;

font-weight: 500;

text-transform: capitalize;

margin: 15px 0 0;

height: 25px;

font-size: 12px;

color: #FFFFFF;

line-height: 25px;

padding: 2px 12px;

letter-spacing: 0.5px;

transition: all .17s ease;

border: solid 5px #93AAFF;

-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;

}

.comments .continue a:hover {

background-color: #8394d6;

color: #FFFFFF;

border: solid 5px #8394d6;

}

.comments .comment .continue a {

color: #E0E0E0;

background: ;

display: block;

padding: 0.5em;

font-weight: bold;

display: none;

}

Tadaa! Dah jadi. Muncul lah butang Add comment yang aku dah tacap sikit-sikit. Bagi serasi dengan tema blog aku ni. Takde lah nampak sepi tulisan tu.

Tulisan Add comment ni akan muncul bila kita klik mana-mana tulisan Reply. Bila dah ada tulisan Add comment, nanti boleh lah komen entri tanpa perlu refresh seandainya tersalah klik tulisan Reply.