Secara default, Komentar Blogger akan diurutkan mulai terlama sampai terbaru. Artinya, komentar terlama akan muncul paling atas dan komentar terbaru akan muncul paling bawah.
Hal ini tentunya ada kelebihan dan kekurangannya. Kelebihannya, pengunjung akan memburu komentar pertama karena akan muncul paling atas, apalagi blog/webnya sudah ramai pengunjung. Kalau dulu selalu ada komentar PERTAMAX mungkin ada yang mengalami. Sedangkan Kekurangannya adalah kesulitan melihat komentar terbaru, karena harus scroll sampai bawah, apalagi komentar sudah puluhan / ratusan.
Cara Mengurutkan Komentar Blogger dari Yang Terbaru
Teknisnya saya menggunakan CSS Flex-Direction untuk mengatasi urutan Komentar ini, untuk memahami Flex Direction silahkan kunjungi Membalik Urutan Objek Terakhir menjadi Awal dengan CSS Flex Direction.
Sebagai DEMO, blog ini mengurtkan komentar dari yang Terbaru. Jadi Komentar terbaru akan muncul paling atas.
Bagi kalian yang ingin merubah urutan komentar dari yang terbaru, silahkan simpan kode CSS ini, biasanya di atas ]]></b:skin>
#top-ra{display: flex; flex-direction: column-reverse;}
Selesai... simpan Template dan lihat hasilnya
Cara Merubah Posisi Kotak Komentar Menjadi di atas
Secara default juga, apabila postingan sudah ada komentarnya maka posisi Kotak Komentar (Comment Form) berada di bawah.
Supaya selaras dengan komentar terbaru yang ada di posisi paling atas, idelanya Kotak Komentar juga dipindah, tidak berada di bawah.
Untuk memindahkan Kotak komentar ke atas, silahkan tambahkan CSS ini:
.toplevel-thread{display: flex; flex-direction: column-reverse;}
atau bisa digabung dengan CSS sebelumnya, menjadi:
#top-ra, .toplevel-thread{display: flex; flex-direction: column-reverse;}
Silahkan diujicoba, atau silahkan berkomentar untuk melihat hasilnya.
/**
* Environment interface
*
* @typedef Env
* @property {string} my_var
*/
/**
* A helper function to get the device type from user agent
*
* @param {string | null} userAgent
*
* @returns {"mobile" | "tablet" | "desktop"}
*/
const getDeviceType = (userAgent) => {
const mobileRegexp = /(?:phone|windows\s+phone|ipod|blackberry|(?:android|bb\d+|meego|silk|googlebot) .+? mobile|palm|windows\s+ce|opera\ mini|avantgo|mobilesafari|docomo|KAIOS)/i;
const tabletRegexp = /(?:ipad|playbook|(?:android|bb\d+|meego|silk)(?! .+? mobile))/i;
if (typeof userAgent === "string") {
if (mobileRegexp.test(userAgent)) {
return "mobile";
}
if (tabletRegexp.test(userAgent)) {
return "tablet";
}
}
// Everything else not matched above will be considered as desktop
return "desktop";
}
/**
* An object with workers handlers
*
* @type {ExportedHandler<Env>}
*/
const worker = {
async fetch(request, env, context) {
// Get the device type from user-agent header
const deviceType = getDeviceType(request.headers.get("User-Agent"));
const proxyUrl = new URL(request.url);
// Set the search param 'm' according to the device type, i.e. '0' for desktop, '1' for others
proxyUrl.searchParams.set("m", String(deviceType === "desktop" ? 0 : 1));
const proxyResponse = await fetch(proxyUrl, request);
const response = new Response(proxyResponse.body, proxyResponse);
// TODO: You can modify the response here :)
return response;
}
}
// Export handlers
export default worker;
Pertamax kang hehe :D <3
BalasHapusmantap mas gercep :top
HapusJadi kelihatan lebih keren ya
BalasHapustak ada scrol lagi
lama tak saling bersua ya
semoga sehat terus dan terus semangat ngeblognya
simpan dulu ah kodenya.
jadi pengen mencobanya
iya mas, saya juga jarang update, banyak kegiatan offline, semoga bisa konsisten lagi... btw mantap saya sudah lihat terapliasikan di webnya
HapusAkhirnya, ada juga tutornya. Biasanya fitur ini bundle dari template premium ya Mas. Hehe.. betewe, mas Ismet kok pake blogspot?
BalasHapusSengaja saya buat, biar yang ga Premium ikut ngerasain :D :D Trus kenapa saya pake Blogspot? kehawatiran aja mas.. coba baca : https://corkismet.blogspot.com/2023/04/selamat-datang-di-corkismet-coretan.html
Hapuswahhh ternyata cuma akal akalan css, saya gak kepikiran. thanks. kayaknya saya akan terapkan di blog saya
BalasHapussiap mas.. custom domainnya dilepas? apa expired nih?
Hapusmaaf kang request lagi, menambahkan tombol copy pada tag pre kaya di atas :)
BalasHapussudah saya buat, maap telat... maklum puasa.. hehehe.. cekibrot di : https://www.kang-ismet.com/2024/03/membuat-tombol-copy-pada-tag-pre.html
Hapus