Menyesuaikan Warna Tampilan Blog Versi Seluler

Blogger sebenarnya telah menyediakan menu ‘Ubahsesuaikan’ yang dapat dimanfaatkan untuk mempermudah dalam melakukan kustomisasi tampilan blog, sehingga tema yang digunakan untuk sebuah blog dapat diubahsesuaikan dengan mudah sesuai selera dan kreatifitas masing-masing pengelola blog. Namun sayangnya fasilitas ini hanya berlaku dan dapat diterapkan pada tampilan blog versi web, sedangkan untuk tampilan blog versi seluler hanya dapat menggunakan pilihan tema yang telah disediakan oleh Blogger saja. Sehingga bila seorang pengelola blog ingin mengkreasikan tampilan blog versi selulernya, maka mereka terpaksa harus melakukannya dengan cara manual.

Namun demikian untungnya Blogger telah menyediakan menu ‘Tersesuai’ dalam pilihan tema untuk tampilan versi seluler, yang memberikan peluang dan kesempatan bagi pengelola blog ketika ingin melakukan kustomisasi untuk tampilan versi seluler pada tema blog yang mereka kelola. Akan tetapi dengan menggunakan cara ini tentunya tidaklah semudah yang kita bayangkan, seperti halnya ketika kita melakukan kustomisasi tema untuk tampilan blog versi web dengan memanfaatkan menu ‘Ubahsesuaikan’.

Untuk melakukan kustomisasi pada tema blog tampilan versi seluler, seorang pengelola blog minimal sudah harus memahami dasar-dasar bahasa pemrograman. Karena pekerjaan yang dilakukan adalah terkait dengan template blog, yang tentunya di dalamnya memakai script atau kode bahasa pemrograman tertentu. Sehingga sebelum memutuskan untuk melakukan kustomisasi template, seorang pengelola blog sangat disarankan agar terlebih dahulu membuat cadangan atas template yang digunakannya. Hal ini dimaksudkan untuk mengantisipasi resiko kegagalan ketika template telah dilakukan perubahan. Dimana bila nantinya terjadi hal yang demikian, maka tema blog dapat dikembalikan sesuai dengan tema sebelumnya yaitu dengan memanfaatkan template yang telah dicadangkan.

Oke, sekarang kita kembali pada pokok bahasan utama, yaitu tentang menyesuaikan warna tampilan blog untuk versi seluler. Di sini yang akan kita lakukan adalah melakukan kustomisasi tema template untuk masing-masing bagian blog bila ditampilkan dengan menggunakan perangkat seluler.

Langkah awal yang perlu dilakukan sebelum melakukan kustomisasi tema blog versi seluler adalah mengaktifkan fasilitas untuk tampilan seluler yang dapat dilakukan dengan cara: pilih menu ‘Template’ kemudian klik tombol ‘Ubahsesuaikan template seluler’ yang bergambar seperti gear. Selanjutnya klik lingkaran yang terdapat di sebelah kiri pilihan ‘Ya. Tampilkan template seluler di perangkat seluler.’, dan kemudian untuk bagian ‘Pilih template seluler’ gunakan pilihan ‘Tersesuai’ yang biasanya terletak pada bagian paling bawah, lalu klik tombol ‘Simpan’.

Langkah berikutnya, klik menu ‘Edit HTML’, ‘Lanjutkan’, dan kemudian centang kotak kecil yang terdapat di depan pilihan ‘Expand Template Widget’. Nah selanjutnya cari kode /* Mobile dan kemudian perhatikan bahwa kode yang terletak diantara /* Mobile sampai dengan ]]></b:skin> adalah rangkaian kode CSS yang berguna dalam pengaturan tema blog untuk tampilan versi seluler. Diantara rangkaian kode tersebut, beberapa kode yang nantinya berpengaruh terhadap tema tampilan blog versi seluler adalah 1) .mobile .header-outer, 2) .mobile .content-outer, 3) .mobile .date-outer, 4) .mobile .post-outer, 5) .mobile .main-outer, 6) .mobile-link-button, 7) html .mobile .blog-pager, 8) .mobile .footer-outer, dan 9) .mobile .body-fauxcolumn-outer. Lebih jelasnya mengenai bagian-bagian yang dinyatakan oleh kode tersebut, perhatikan gambar di bawah ini.

Nah, lantas bagaimana caranya melakukan kustomisasi tampilan warna seperti halnya yang dilakukan pada gambar tersebut? Ketika kita akan melakukan perubahan warna pada bagian tertentu, maka terlebih dulu kita harus mengetahui kode yang menyatakan bagian yang dimaksud. Sebagai contoh misalnya kita akan melakukan perubahan pada warna latar bidang tanggal posting dalam hal ini adalah yang ditandai dengan nomor tiga (3), maka yang kita lakukan nanti adalah mencari kode .mobile .date-outer yang di dalamnya mengandung kode background:, dimana secara default rangkaian kode untuk bagian tersebut adalah seperti di bawah ini.

.mobile .date-outer {
  background: $(main.background);
}

Perhatikan kode yang berwarna merah. Bagian inilah yang nantinya menentukan warna latar untuk bidang tanggal posting. Sehingga bila kita ingin mengubahnya dengan warna lain, maka bagian ini tinggal kita ganti dengan kode warna yang sesuai dengan keinginan kita, misalnya #00ff00 yang akan menghasilkan warna hijau, atau dengan menggunakan kode warna yang lainnya.

Tapi bagaimana bila kebetulan kode yang dimaksud serangkai dengan kode yang lainnya? Sebagai contoh misalnya kita akan mengubah warna latar untuk bidang posting artikel. Kode untuk melakukan perubahan warna pada bidang posting artikel adalah .mobile .post-outer, akan tetapi ternyata dalam template kode tersebut serangkai dengan kode lain seperti yang tampak di bawah ini.

.mobile .content-outer,
.mobile .main-outer,
.mobile .post-outer {
  background: inherit;
  border: none;
}

Bila terjadi kasus yang seperti ini, maka solusinya adalah memisah kode tersebut dan kemudian membuat kode CSS baru untuk bagian yang dimaksud. Sehingga akhirnya .mobile .post-outer terpisah dari rangkaian kode yang sebelumnya karena telah dibuatkan rangkaian kode CSS baru seperti yang tampak pada contoh di bawah ini.

.mobile .content-outer,
.mobile .main-outer {
background: inherit;
border: none;
}

.mobile .post-outer {
background: #ff00ff;
border: none;
}

Sehingga dengan demikian maka warna latar yang terbentuk untuk bidang posting artikel adalah #ff00ff yang akan mengasilkan warna pink. Sedangkan warna untuk bagian .mobile .content-outer dan .mobile .main-outer tetap inherit atau menyesuaikan dengan warna yang terdapat di belakangnya.

Kemudian bagaimana bila pada pada bagian yang ingin diubah warnanya tidak mengandung kode background: untuk melakukan perubahan warna? Sebagai contoh misalnya adalah kita ingin melakukan perubahan pada warna latar header. Sementara itu rangkaian kode untuk bagian yang dimaksud, didalamnya tidak mengandung kode yang dapat digunakan untuk mengubah warna seperti yang tampak di bawah ini.

.mobile .header-outer, .mobile .main-outer,
.mobile .post-outer, .mobile .footer-outer {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -goog-ms-border-radius: 0;
  border-radius: 0;
}

Pada dasarnya untuk kasus yang demikian solusinya adalah serupa dengan yang sebelumnya, yaitu dengan cara membuatkan kode CSS baru untuk bagian yang dimaksud. Sehingga bila yang akan dilakukan perubahan di sini adalah warna latar header yang memiliki kode .mobile .header-outer, maka kita dapat membuat kode CSS baru seperti yang tampak di bawah ini.

.mobile .header-outer, .mobile .main-outer,
.mobile .post-outer, .mobile .footer-outer {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -goog-ms-border-radius: 0;
  border-radius: 0;
}

.mobile .header-outer {
background: #00ffff;
}

Sehingga penambahan kode CSS baru yang menggunakan kode warna #00ffff tersebut nantinya akan menghasilkan warna biru laut untuk header blog tampilan versi seluler.

Akhirnya dengan menggunakan beberapa teknik di atas, nantinya kita dapat ‘mempercantik’ tampilan blog versi seluler yang kita kelola sesuai dengan kreatifitas kita masing-masing. Dan dengan demikian tema untuk blog tampilan versi seluler yang kita kelola pun akan menjadi tampak lebih menarik.

Semoga berguna dan bermanfaat.

Salam.