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}

11 Komentar

  • alansinggih

    Mas taufik,, nich ak orng bru,, ak mnta pencerahannya ya,,, n qw masih pemula banget,,,,
    nanya mas tp dkit di luar masalah artikel nie,,
    caranya buat css external di code.google yang svn gmna ta,,, koq nyari"" gag da,, mohon ya mas

    • Taufik Nurrohman

      http://hompimpaalaihumgambreng.blogspot.com/2012/05/bantu-saya-menjawab-pertanyaan.html#comments

      • alansinggih

        yang saya maksud gambar ini mas,,,,

        yang saya zoom itu lo,,,ak cri di code.google koq gag ada

        • Taufik Nurrohman

          Baca komentar-komentar yang ada di sini (sudah ada pertanyaan sejenis) ⇒ /2012/05/bantu-saya-menjawab-pertanyaan.html#comments
          Atau cari di sini ⇒ /p/cari-artikel.html?q=google+svn
          Lalu tulis komentarmu di posting yang sesuai.
          Cari dulu jawabannya di sini... kalau tidak ketemu baru boleh nulis komentar keluar topik di posting terbaru.

        • IRIL SAGITA

          Yang Anda maksut seperti ini to :

          http://www.sagitasoft.com

        • Unknown

          mungkin dengan cara ini..
          saya sudah coba..

          lihat..
          http://mkr-site.blogspot.com/2013/01/simpan-file-google-code-tortoisesvn-subversion.html

  • IRIL SAGITA

    Terima kasih banyak kak, halaman hasil pencarian di blog aku menjadi lebih cantik and tampil dua kolom ?

    horeeee..... :yaya: :yaya: :yaya:

  • Unknown

    hompimpaalaihonggambreng blog favorit ane skarang udah jadi dte.web.id yaah bg.. heheh
    sukses selalu ya mas taufik.. :)

  • budkalon

    Aduh, pantesan agak susah nyarinya, domainnya ganti...

  • Sunandar

    gan saya mau nanya dong, ko di google webmaster saya adaa crawl error dengan link http://nandarious.blogspot.com/2013/06/jangan-takut-meraih-mimpi.htmlfeeds/posts/default?alt=rss ? yang saya tanyakan ko link saya jadi seperti itu ya ? padahal saya tidak membuat link sperti itu ? apakah ada script di di template saya yang membuat link blog saya seperti itu ? please help me...

  • Unknown

    gan ini hasil pelajaran yang ane petik dari sini.... ini web aplikasi yang udah ane buat dari blogspot http://www.grapid.net/
    makasi gan udah membantu

Komentar telah ditutup.