Cara Mengubah Desain Tampilan Warna Garis Dan Background Status Message Blog

Apabila melihat bagian yang ditunjukkan dengan tanda anak panah pada gambar di atas, tentunya Anda sudah tidak asing lagi kan dengan bagian tersebut? Ya, bagian tersebut merupakan pesan status yang akan ditampilkan pada sebuah blog ketika artikel dengan kategori atau label tertentu ditampilkan. Jadi, ketika sebuah label diklik maka di atas daftar artikel yang ditampilkan akan dimunculkan pula sebuah kotak berisikan pesan yang menyatakan bahwa artikel yang saat itu ditampilkan merupakan artikel yang termasuk dalam kategori atau label yang sebelumnya telah diklik. Sebagai contoh misalnya adalah seperti yang tampak pada gambar di atas, dapat dilihat bahwa dalam kotak pesan tersebut terdapat tulisan ‘Showing posts with label Themes. Show all posts’, yang berarti bahwa daftar artikel yang ditampilkan di bawahnya merupakan artikel yang memiliki label ‘Themes’.

Jika berbicara mengenai status message yang ditampilkan ketika sebuah label yang menyatakan kategori artikel diklik, maka secara default bagian tersebut akan ditampilkan dengan model kotak bergaris abu-abu dan warna background abu-abu muda, serta teks berwarna hitam. Nah, perlu diketahui bahwasanya kita juga dapat melakukan modifikasi untuk bagian tersebut seperti halnya kustomisasi yang dapat dilakukan pada bagian atau elemen halaman yang lain, sehingga model tampilannya dapat disesuaikan dengan desain tampilan blog yang kita kelola. Dan dengan demikian akhirnya tampilannya pun menjadi terkesan lebih bagus dan menarik jika dibandingkan dengan tampilan standar atau tampilan sebelumnya.

Lantas apa dan bagaimana cara yang digunakan untuk keperluan tersebut? Untuk keperluan modifikasi tampilan status message pada sebuah blog, maka yang perlu dilakukan adalah dengan menambahkan kode CSS tertentu yang berhubungan dengan bagian tersebut ke dalam template. Dimana kode CSS ini nantinya secara otomatis akan menggantikan fungsi kode CSS eksternal yang disediakan oleh Blogger, sehingga akhirnya tampilan akhir yang dihasilkan adalah sesuai dengan rangkaian kode CSS yang kita sisipkan ke dalam template. Dan selanjutnya sebagai contoh penerapan teknik ini, maka Anda dapat mengerjakan 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.

.status-msg-wrap {
  width: 90%;
  font-size: 110%;
  margin: 10px auto;
  padding: 3px;
  color: rgb(0, 0, 0) !important;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  border: 1px solid LimeGreen;
  box-shadow: 0px 1px 3px #CFCFCF;
  border-radius: 3px;
  background: greenYellow;
}

.mobile .status-msg-wrap {
  width: 90%;
  margin: 4px auto;
  padding: 3px;
  text-transform: capitalize;
  border: 1px solid #000000;
  background: inherit;
}

.status-msg-border {
  border: none;
  width: 100%;
  position: relative;
}

Keterangan:

Dapat dilihat bahwasanya dalam rangkaian kode CSS di atas terdapat 3 (tiga) bagian, yaitu .status-msg-wrap, .mobile .status-msg-wrap, dan .status-msg-border, yang fungsinya masing-masing adalah sebagai berikut:

Rangkaian kode dalam .status-msg-wrap digunakan untuk menata desain tampilan status message pada tampilan halaman versi web, rangkaian kode dalam .mobile .status-msg-wrap digunakan untuk menata desain tampilan status message pada tampilan halaman versi seluler jika setelan tampilan halaman versi seluler yang digunakan adalah ‘Tersesuai (Custom)’, dan rangkaian kode yang terdapat dalam .status-msg-border digunakan untuk menata serta menghilangkah garis abu-abu yang dimunculkan pada setelan default status message.

Ketiga, simpan template.

Sebagai contoh hasil atas penerapan teknik tersebut adalah seperti yang tampak pada gambar di bawah ini.

Selanjutnya apabila warna garis maupun background yang dihasilkan atas penggunaan kode CSS di atas belum sesuai dengan desain tampilan halaman blog yang Anda kelola, maka silakan dilakukan kustomisasi seperlunya sesuai dengan keinginan Anda. Dan apabila mengalami kesulitan dalam mengimplementasikan teknik yang diuraikan dalam artikel ini, maka Anda dapat mengajukan pertanyaan mengenai kesulitan yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.

Semoga berguna dan bermanfaat.

Salam.