Mecha versi 2.6.4 sudah dirilis!

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

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.