Cara Membuat Kotak Pesan Menggunakan Shortcode

Tutorial kali ini merupakan lanjutan dari tutorial kemarin yang membahas tentang plugin blogger shortcode. Sebelumnya telah kita pelajari cara membuat tombol CSS3 menggunakan shortcode. Pada ksempatan kali ini kita akan belajar bersama membuat kotak notifikasi CSS3 menggunakan shortcode.

Kotak pemberitahuan atau kotak peringatan atau pesan kotak merupakan wadah untuk memberikan pesan/informasi kepada pembaca, seperti: warning, update, pengumuman, error, success dll dan info umum.

Sedikit info sekarang kita tidak perlu ribet karena hanya dengan menuliskan shortcode kotak pesan akan muncul dengan sendirinya, tidak hanya itu kita bisa menggunakan shortcode dimanapun kita inginkan, misalkan di dalam postingan, di kotak komentar maupun di widget. Kotak pesan ini juga sudah didukung dengan fontAwesome, sehingga tampilan yang dihasilkan akan lebih elegan. Kotak pesan ini bermacam - macam warna, namun jika dirasa warnanya nanti kurang cocok anda bisa menyesuaikan warna kotak pesan sesuai selera anda. Karena sekarang jamannya mobile friendly, anda tidak perlu khawatir karena kotak notifikasi ini sudah responsive. Penasaran bagaimana bentuknya? silakan lihat demo dibawah ini.

Dalam tutorial kali ini yang akan kita buat yaitu kotak pesan :

a. Warning or Error Box

b. Success Box

c. Information Box

d. Alert Box

e. Update box or Announcement box



Oke langsung saja untuk tutorialnya silakan ikuti panduan berikut :

1. Instal Pluggin Blogger Shortcode

Agar kotak pesan menggunakan shortcode berjalan, anda harus menginstal terlebih dahulu plugin blogger shortcode. Untuk menginstal pluginnya silakan ikuti panduan berikut : Cara Menambahkan Plugin Blogger Shortcode

2. Menambahkan Style Kotak Informasi

Agar kotak notifikasi memiliki tampilan yang elegan seperti pada demo, kita harus menambahkan style CSSnya terlebih dahulu. Ikuti langkah dibawah ini untuk menambahkan style :

a. Silakan anda masuk ke dashboard > Template > Backup template

b. Pilih edit HTML

c. Cari code ]]></b:skin>

d. Pastekan CSS berikut diatasnya

.sc-notification {
  color:#fff;
  line-height:1.4em;
  margin:10px 0 1em;
  padding:.7em 1.2em;
  background-color:#ffffe0;
  border:1px solid #e1db8b;
  font-size:15px;
  font-family:helvetica;
  text-shadow:1px 0 6px #333;
  box-shadow:2px 3px 6px #D7D7D7;
}

.sc-notification .headline {
  font-size:17px;
  font-family:oswald,arial;
  padding-bottom:10px;
}

.sc-notification.sc-warning {
  background-color:#fc402c;
  border:1px solid #C91704;
}

.sc-notification.sc-alert {
  background-color:#FF8377;
  border:1px solid #F15C4C;
}

.sc-success.sc-notification {
  background-color:#2ec23e;
  border:1px solid #039D14;
}

.sc-info.sc-notification {
  background-color:#fdce09;
  border:1px solid #DFB400;
}

.sc-update.sc-notification {
  background-color:#29b7ff;
  border:1px solid #069DE9;
}

.sc-info.sc-notification div.headline::before {
  font-family:FontAwesome;
  position:relative;
  content:'\f05a';
  font-size:20px;
  padding-right:10px;
}

.sc-update.sc-notification div.headline::before {
  font-family:FontAwesome;
  position:relative;
  content:'\f0a1';
  font-size:20px;
  padding-right:10px;
}

.sc-alert.sc-notification div.headline::before {
  font-family:FontAwesome;
  position:relative;
  content:'\f06a';
  font-size:20px;
  padding-right:10px;
}

.sc-success.sc-notification div.headline::before {
  font-family:FontAwesome;
  position:relative;
  content:'\f058';
  font-size:20px;
  padding-right:10px;
}

.sc-warning.sc-notification div.headline::before {
  font-family:FontAwesome;
  position:relative;
  content:'\f071';
  font-size:20px;
  padding-right:10px;
}

e. Simpan template

Sekarang style sudah ditambahkan pada template anda. Sekarang kita lanjut pada penggunaan shortcodenya.

3. Cara Penggunaan

Saya informasikan kembali, kotak pesan ini bisa kita tambahkan dimana saja. Bisa di halaman statis, dalam postingan, dalam komentar maupun dalam widget. Misalkan anda ingin membuat kotak pesan seperti dibawah ini.

Untuk membuat kotak pesan update seperti diatas anda cukup menambahkan shortcode dibawah ini

[update headline="Update"]Pesan Anda Disini[/update]



Keterangan :

Headline : untuk menampilkan judul disamping icon

Ganti Pesan Anda Disini dengan pesan yang anda inginkan. Untuk shortcode kotak notifikasi yang lain silakan ikuti panduan dibawah ini :)

Shortcode : [alert headline="Alert!"]Pesan Anda Disini.[/alert]

Shortcode : [warning headline="Warning!"]Pesan Anda Disini.[/warning]

Shortcode : [info headline="Info"]Pesan Anda Disini.[/info]

Shortcode : [success headline="Success"]Pesan Anda Disini.[/success]

Silakan ganti warna dan model dengan mengedit CSSnya. Mungkin cukup sekian share tutorial cara menambahkan kotak pesan menggunakan shortcode. Semoga bermanfaat :)