Modifikasi Tampilan "Status Message" Blogger

Pada postingan saya sebelumnya tentang cara menghilangkan status message pada Blogger™ saya menyatakan bahwa alasan klasik para blogger (termasuk saya) menghilangkan atau menonaktifkan fitur status message adalah karena tampilannya yang kurang menarik, atau lebih tepatnya membosankan. Coba Anda perhatikan screenshoot di bawah ini.

Modifkasi Tampilan "Status Message" Blogger


Tampak bahwa tampilan status message Blogger™ terkesan simple dan kurang menarik. Dan ujung-ujungnya para blogger menghilangkan fitur ini, selain karena mereka sudah menggantinya dengan Breadcrumb navigation.

Pada postingan kali ini yang saya beri judul Modifkasi Tampilan "Status Message" Blogger™, kita akan sama-sama belajar memodifikasi tampilan status message tersebut supaya lebih menarik dari tampilan defaultnya. Langkah-langkahnya sederhana, hanya menggunakan kode CSS dan tanpa perlu mengedit kode-kode template. Akan tetapi sebagai langkah pencegahan alangkah baiknya sebelum melakukan modifikasi backup dahulu kode templatenya. Membiasakan hal yang baik untuk mencegah sesuatu yang buruk saya rasa bukanlah hal yang percuma.

Salin potongan kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin> kemudian simpan pengaturan template dan preview hasilnya.

?
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* Modifikasi Status Message Blogger
----------------------------------------------- */
.status-msg-wrap {
  font-size:100%;
  width:99%;
  margin:-10px 0 15px;
  position:relative;
  background:#E0FFFF;
}

.status-msg-border {
  border:2px solid #0723f9;
  filter:alpha(opacity=40);
  -moz-opacity:.4;
  opacity:.4;
  width:100%;
  position:relative;
}

.status-msg-bg {
  background-color:#aed8f8;
  opacity:.8;
  filter:alpha(opacity=30);
  -moz-opacity:.8;
  width:100%;
  position:relative;
  z-index:1;
}

.status-msg-body {
  text-align:center;
  padding:.3em 0;
  width:100%;
  position:absolute;
  z-index:4;
}

.status-msg-hidden {
  visibility:hidden;
  padding:.3em 0;
}

.status-msg-wrap a {
  padding-left:.4em;
  text-decoration:underline;
}

Kode CSS di atas hanyalah sebagai contoh dan Anda bisa memodifikasinya sesuka hati agar nantinya tampilan status message tersebut selaras dengan tampilan blog Anda.

Hasil dari penambahan kode CSS tadi kurang lebih seperti pada screenshoot di bawah ini. Sedikit lebih baik jika dibandingkan dengan bawaan Blogger™.

Modifkasi Tampilan "Status Message" Blogger™


Semoga berhasil.
Share artikel ke: Facebook Google+ Twitter Digg
Label:

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)