Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

2
Tgl. 17 Juli 2012

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 Lata...

Desain Kolom Kotak Komentar Blogger
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.


Katagori: , ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 2 komentar pada artikel ini ▶
05/12/12 02.04 O

masih bingung makloem newbie,gan..hehehe...

05/12/12 10.57 O

@pitulimoSebenarnya apabila Sobat mengerjakan sesuai dengan urutan langkah-langkah di atas, Sobat tidak akan mengalami kesulitan. Dan hasilnya pun akan menjadi sesuai dengan yang diharapkan. :)

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog