Ketika sebaris kode tak berhenti menatap dan tampak naksir kepada Anda.

Home » Blogger » Desain » Modifikasi Tampilan dan Teks pada Status Message

Modifikasi Tampilan dan Teks pada Status Message

Custom Status Message for Blogger
Contoh tampilan ‘status message’ yang sudah dimodifikasi.

Status Message adalah sebuah pesan yang akan muncul di atas posting ketika kita sedang berada di halaman hasil pencarian atau halaman label. Memodifikasi tampilannya mungkin mudah, yaitu dengan cara menimpa CSS bawaan Blogger dengan kode CSS baru yang mengandung pengaturan tampilan yang berbeda seperti ini:

.status-msg-wrap {
font-size:110%;
width:90%;
margin:10px auto;
position:relative;
}

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

.status-msg-bg {
background-color:#ccc;
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;
}

Tapi bagaimana jika kita ingin memodifikasi tulisan di dalamnya?

Untuk melakukan itu, kita mau tidak mau harus menghapus elemen tersebut dan menggantinya dengan markup yang baru seperti ini:

<!-- b:include data='top' name='status-message'/ -->
<b:if cond='data:blog.searchQuery'>
<b:if cond='data:numPosts != 0'>
<p class='custom-status-message'>Menampilkan semua entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong></p>
<b:else/>
<p class='custom-status-message-error'>Pencarian entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong> tidak ditemukan.</p>
</b:if>
</b:if>
<b:if cond='data:blog.searchLabel'>
<p class='custom-status-message'>Menampilkan semua entri dengan kategori <strong>&amp;#8220;<data:blog.searchLabel/>&amp;#8221;</strong></p>
</b:if>

Salin kode di atas, kemudian gunakan untuk menggantikan kode yang tampak seperti ini di dalam template (biasanya ada dua):

<b:include data='top' name='status-message'/>

Kemudian tambahkan kode CSS ini di atas ]]></b:skin> atau </style>:

.custom-status-message,
.custom-status-message-error {
font:normal normal 13px/normal Segoe,"Segoe UI",Calibri,"Helvatica Neue",Arial,Sans-Serif;
color:white;
text-shadow:0 -1px 0 rgba(0,0,0,.4);
padding:7px 14px;
margin:5px 5px 1.7em;
background-color:#5A6777;
background-image:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));
background-image:-moz-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));
background-image:-ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));
background-image:-o-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));
background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));
border:2px solid #404B55;
border-bottom-color:#212729;
border-top-color:#8E97A2;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
}

.custom-status-message-error {
background-color:#600;
border-color:#700 #500 #300;
}

.custom-status-message strong {color:#AADD99}
.custom-status-message-error strong {color:#ff0}

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

Posting Komentar

Nama Saya ShannenPio . Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias . Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Kontak Sosial

Lain-lain

Dan Tidak lupa, Saya Ucapkan terimakasih atas kunjungan anda di blog yang sederhana ini.

Salam Mas Harris

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?

Tutup
Ke atas!