Cara Menjadikan Status Message Pada Blog Memiliki Desain Tampilan Yang Berbeda

Sobat Blogger, bila dalam posting sebelumnya dengan judul “Cara Mengubah Desain Tampilan Warna Garis Dan Background Status Message Blog” telah saya uraikan cara yang digunakan dalam melakukan modifikasi tampilan status message, maka uraian pembahasan dalam artikel ini masih terkait dengan hal tersebut, yaitu status message pada sebuah blog. Jadi begini, perlu diketahui bahwasanya pesan yang ditampilkan dalam status message adalah terdiri dari 2 (dua) macam pesan. Pesan yang pertama ditampilkan ketika sebuah label artikel diklik, sedangkan pesan yang kedua ditampilkan ketika halaman yang dibuka tidak ditemukan (error page).

Nah, apabila kita telah melakukan modifikasi tampilan status message, maka secara otomatis antara tampilan status message ketika sebuah label diklik dengan tampilan status message yang dimunculkan pada error page menjadi sama. Hal ini disebabkan karena kode CSS yang digunakan untuk menata kedua bagian tersebut adalah sama, sehingga desain tampilan yang dihasilkan pun juga sama.

Lantas apakah keduanya bisa dibuat agar memiliki desain tampilan yang berbeda? Jawabannya tentu saja adalah bisa. Agar keduanya memiliki desain yang berbeda, maka dapat ditambahkan kode CSS khusus untuk salah salah satu diantara keduanya, yaitu dengan cara menggabungkan fungsi logika error page dengan kode CSS yang akan digunakan. Dimana sebenarnya teknik yang digunakan mengerjakannya adalah serupa dengan teknik yang dipakai untuk mengganti isi pesan yang ditampilkan dalam status message maupun teknik untuk menyembunyikan widget dari halaman yang tidak ditemukan.

Oke, sebelum mengejakan teknik ini, maka ada baiknya jika Anda terlebih dulu mengerjakan teknik yang saya uraikan dalam artikel sebelumnya, agar hasil yang didapatkan sesuai dengan yang diharapkan. Dan apabila telah menerapkan teknik yang diuraikan dalam artikel tersebut, maka proses berikutnya adalah mengerjakan langkah-langkah berikut ini secara berurutan.

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

Kedua, cari kode </head> dan kemudian sisipkan rangkaian kode dengan format seperti berikut ini tepat di atasnya.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  <style type="text/css">
    .status-msg-wrap {
      text-transform: capitalize;
      border: 1px solid #00CCA3;
      background: #00FFCC;
    }
  </style>
</b:if>

Keterangan:

Apabila warna garis dan background yang dihasilkan dari kode CSS tersebut belum sesuai dengan desain tampilan halaman blog Anda, maka silakan dilakukan kustomisasi seperlunya.

Ketiga, simpan template.

Keempat, tutup editor template dan kemudian buka menu ‘Setelan’ > ‘Preferensi penelusuran’ > ‘Pesan Khusus untuk Laman Tidak Ditemukan’ > ‘Edit’. Setelah diklik menu ‘Edit’, masukkan pesan yang akan ditampilkan pada error page. Sebagai contoh misalnya seperti rangkaian pesan berikut ini.

<br/>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtz6J6fAeCikK3PhIRJmOcLm5ntM4gU-5AhLQmpC-aKBrqZptWe58AGLOAVHfRCFRTIq47r41_j8M3h4VRnRjFaB6gGi1ZAk6JE3IyJ1VuT6ZAifbBYhCMbbneIE4bN0G_4JBmjMzZuY/s800/ELTELU.png' style='width: 120px; height: 120px;'/><br/>
<br/>
<h1>Ooops...!</h1><br/>
Halaman tidak ditemukan. <a href="http://eltelu.blogspot.com/p/sitemap.html">Klik di sini</a> guna menampilkan <a href="http://eltelu.blogspot.com/p/sitemap.html">daftar isi</a> atau <a href="http://eltelu.blogspot.com">klik di sini</a> untuk membuka halaman <a href="http://eltelu.blogspot.com">beranda</a>.<br/>
<br/>

Keterangan:

Rangkaian script pesan di atas hanyalah sekedar contoh. Sehingga dalam penerapannya lakukan perubahan terlebih dulu pada URL gambar serta URL halaman yang digunakan.

Kelima, klik tombol ‘Simpan perubahan’.

Sebagai demo dari penerapan teknik tersebut, silakan buka http:**eltelu.blogspot.com*error-page-demo untuk membuka error page (ganti tanda * dengan tanda / atau slash) dan kemudian silakan klik di sini untuk membuka halaman daftar artikel dengan label ‘Tutorial’. Sehingga dengan demikian Anda akan dapat membandingkan perbedaan antara desain tampilan status message yang terdapat pada error page dengan desain tampilan status message yang dimunculkan setelah sebuah label diklik.

Semoga berguna serta bermanfaat, dan apabila mengalami kesulitan dalam menerapkan teknik tersebut, maka silakan sampaikan pertanyaan mengenai kesulitan yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.

Salam.