Modifikasi Tampilan dan Teks pada Status Message
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>&#8220;<data:blog.searchQuery/>&#8221;</strong></p>
<b:else/>
<p class='custom-status-message-error'>Pencarian entri dengan kata kunci <strong>&#8220;<data:blog.searchQuery/>&#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>&#8220;<data:blog.searchLabel/>&#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