Cara Merubah Tampilan Status Message Pada Blog

Pada tutorial kali ini kita coba akan bermain lagi dalam mengotak-atik tampilan blog. Dan yang akan kita modifikasi pada blog kita ialah bagian Status Message.

Udah tahukan apa itu status message, Jika sobat belum tahu silahkan lihat gambar di bawah ini.

Tampilan Status Message Pada Blog

Nah yang ditunjuk oleh tanda panah yang berwarna merah itulah status message blog yang akan tampil ketika di halaman label/kategori.

Adapaun cara membuat tampilan seperti di atas ikuti langkah-langkah di bawah ini.

1. Login ke blogger atau klik disini»
2. Pilih Template » Edit Html » Lanjutkan.
3. Jangan lupa centang Expand Template Widget.
4. Cari code ]]></b:skin> kemudian copy paste code di bawah ini dan letakkan di atas code ]]></b:skin>

.status-msg-wrap {
  width: 90%;
  font-size: 110%;
  margin: 10px auto;
  padding: 3px;
  color: rgb(0, 0, 0) !important;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  border: 1px solid LimeGreen;
  box-shadow: 0px 1px 3px #CFCFCF;
  border-radius: 3px;
  background: greenYellow;
}

.mobile .status-msg-wrap {
  width: 90%;
  margin: 4px auto;
  padding: 3px;
  text-transform: capitalize;
  border: 1px solid #000000;
  background: inherit;
}

.status-msg-border {
  border: none;
  width: 100%;
  position: relative;
}

Catatan:

  • Untuk tulisan yang berwarna merah silahkan ganti dengan warna kesukaan sobat.
  • Lihat code warna disini»

Demikian tutorial kali ini semoga bermanfaat. Happy Blogging ^_^

Tidak ada komentar:

Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top