Cara Mengedit Kode CSS Template Seluler Blogspot Untuk Bagian Kolom Kotak Komentar

Sobat, jika dalam artikel sebelumnya yang berjudul “Mempercantik Kolom Kotak Komentar Standar Pada Blogspot Dengan Bingkai Dan Warna Latar”, saya telah menguraikan cara yang digunakan untuk melakukan kustomisasi pada desain tampilan kolom kotak komentar standar Blogger untuk versi tampilan web, maka dalam artikel ini saya akan menguraikan teknik yang serupa untuk melakukan kustomisasi pada desain tampilan kolom kotak komentar namun untuk versi tampilan seluler.

Perlu diketahui bahwasanya Blogger memberikan desain atau model kolom kotak komentar yang sama untuk tampilan versi web maupun tampilan versi seluler. Dan perlu diketahui pula bahwa kita dapat melakukan teknik yang serupa dalam melakukan kustomisasi desain kotak komentar untuk tampilan versi seluler seperti halnya teknik yang digunakan dalam melakukan kustomisasi kotak komentar untuk tampilan blog versi web. Dalam hal ini adalah dengan cara menambahkan kode CSS tertentu untuk bagian tersebut ke dalam template, dengan tujuan untuk menggantikan kode CSS yang diberikan oleh Blogger.

Nah, tidak perlu saya uraikan panjang lebar dan kita langsung saja pada pokok pembahasan. Apabila Sobat ingin melakukan modifikasi pada desain kolom kotak komentar untuk tampilan versi seluler, maka dapat dilakukan dengan cara menyisipkan kode CSS berikut ini ke dalam template blog yang Sobat kelola. Dan seperti biasa ketika kita ingin menyisipkan kode tertentu ke dalam template dengan tujuan untuk melakukan kustomisasi pada tampilan blog versi seluler, maka setelan untuk tampilan versi seluler terlebih dulu harus kita ubah menjadi ‘Tersesuai’ (Custom). Dimana cara untuk mengubah setelan tersebut dapat Sobat lihat dalam artikel yang berjudul “Optimasi Blog Dengan Memanfaatkan Fitur Mobile”, dan jangan lupa pada langkah yang keempat pilih template seluler ‘Tersesuai’ (Custom). Kemudian apabila setelan tampilan seluler telah disesuaikan, maka kerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’

Kedua, cari kode ]]></b:skin> dan kemudian sisipkan kode berikut ini tepat di atasnya.

/*--------------------------------------------------------------

Kustomisasi Kolom Komentar Blogspot Versi Seluler

Oleh: Semar Bingung

Blog: http://eltelu.blogspot.com/

--------------------------------------------------------------*/

.mobile .comments {

  border: 1px solid rgb(204, 204, 204);

  background-color: rgb(236, 239, 245);

}

.mobile .comments .comments-content .comment {

  margin-bottom: 0px; padding-bottom: 0px;

}

.mobile .comments .comments-content .comment:first-child {

  padding-top: 0px;

}

.mobile .comments-content .comment-thread,

.mobile .comments .avatar-image-container {

  border: 1px solid rgb(204, 204, 204);

  background-color: #ffffff;

}

.mobile .comments .avatar-image-container {

  height: 36px;

}

.mobile .comments .comment-block {

  border: 1px solid rgb(204, 204, 204);

  background-color: #fafafa;

}

html .mobile .comment-form {

  max-width: 100%;

}

.mobile .comment-form {

  text-align: justify;

}

Ketiga, simpan template.

Kemudian apabila Sobat ingin melakukan penyesuaian pada warna garis dan background yang digunakan, maka Sobat dapat bereksperimen dengan melakukan perubahan kode warna yang digunakan pada kode border: dan background-color:. Sebagai contoh atas penggunaan serta penerapan teknik tersebut, dapat Sobat lihat dengan cara membuka blog ini dengan menggunakan perangkat seluler (misalnya memakai Opera Mini), dan kemudian buka salah satu artikel yang telah memiliki komentar di dalamnya.

Semoga berguna serta bermanfaat, dan selamat mencoba.

Salam.