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://evolusionz.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.
0 komentar:
Posting Komentar
-|Dilarang Commend Dngan Kata-Kata Kasar Karna Itu Di Anggap SPAM|- ;)