Cara Mudah Membuat Pesan Pemberitahuan Warna Warni Singkat di Artikel Postingan Keren

Kita semua tahu bahwa posting atau konten adalah raja dari blog apa pun. Jika sobat memiliki konten yang lebih berkualitas maka ada peluang untuk membuat pembaca terlibat dengan blog sobat. Tetapi kebanyakan dari kita menulis konten yang lebih besar dengan desain yang monoton. Untuk membuat konten yang ideal, sobat harus menggunakan grafik, kutipan, uji stabilo, dan yang lebih penting, memecah artikel besar menjadi paragraf kecil. Ini memberi artikel sobat lebih bagus dan pembaca tidak merasa terganggu untuk membaca artikel besar.

Saat menulis posting blog maka kita sering menggunakan pesan yang berbeda seperti pembaruan, peringatan, pemberitahuan, informasi, peringatan, kesalahan dll. Tapi aku tidak menggunakan penyorot pesan apa pun, akibatnya pembaca tidak memperhatikan atau memberikan perhatian khusus pada pesan pesan yang aku buat tadi. Jadi kita perlu memberikan perhatian khusus untuk mengembangkan penyorot pesan tersebut.

Untuk artikel ini aku akan membagikan set pesan pemberitahuan stabilo untuk meningkatkan konten sobat dan sobat akan dapat meningkatkan keterlibatan posting sebesar 30% lebih banyak. Percayalah kepadaku hehehe. Nah, untuk panduan pembuatannya silahkan ikuti langkah-langkahnya dibawah ini.

#1. Masuk ke blogger.

#2. Pilih menu tema > pilih edit html.

#3. Copy dan pastekan kode dibawah sebelum/atas   ]]></b:skin> 

/* Notification Message Highlighter by http://www.koridoo.com */
.bstext{color:#FFF;margin-bottom:15px;border-radius:3px;padding:10px}
.bssuccess{background-color:#AA5CB8}
.bsalert{background-color:#5BA5DE}
.bswarning{background-color:#C619CC}
.bsupdate{background-color:#1D89E5}
.bsinfo{background-color:#18A8AA}
.bserror{background-color:#d9534f}
.headertext{font-size:16px;background-color:rgba(0,0,0,0.30);padding:8px 10px;margin:-10px;margin-bottom:10px}
.headertext > .fa{margin-right:5px}
.bloggerspice {overflow: hidden;} 

#4. Copy dan pastekan kode dibawah sebelum/atas </head> 

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

#5. Dan pilih simpan template.

Mewarnai Kotak Pesan Pemberitahuan

Setelah mengimplementasikan skrip CSS diatas, sekarang kita harus menambahkan skrip HTML untuk mengimplementasikan kode diatas. Kemudian, silahkan pilih jenis pesan pemberitahuan apa yang ingin sobat gunakan. Untuk caranya, silahkan ikuti panduannya dibawah ini.

#1. Masuk ke blogger.

#2. Pilih postingan > pilih entri baru.

#3. Maka tampil jendela postingan > ganti tab COMPOSE ke tab HTML.

#4. Lalu copy dan pastekan kode dibawah ini didalamnya. 

1. Pesan Biru Dengan Simbol Toak

<div class="bloggerspice bsupdate bstext" icon="info-circle" title="Update message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-bullhorn"></i>Update message</div>
This is a Sample Message for Update Box.</div>
</div>

2. Pesan Biru Muda Dengan Simbol Gunting

<div class="bloggerspice bsalert bstext" icon="info-circle" title="Alert message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-cut"></i>Alert message</div>
This is a Sample Message for Alert Box. </div>
</div>

3. Pesan Ungu Muda Dengan Simbol Ceklis

<div class="bloggerspice bssuccess bstext" icon="check-circle" title="Success message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-check-circle"></i>Success message</div>
This is a Sample Message for Success Box. </div>
</div>

4. Pesan Ungu Tua Dengan Simbol Bahaya

<div class="bloggerspice bswarning bstext" icon="exclamation-triangle" title="Warning message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-exclamation-triangle"></i>Warning message</div>
This is a Sample Message for Warning Box. </div>
</div>

5. Pesan Hijau Muda Dengan Simbol Info

<div class="bloggerspice bsinfo bstext" icon="info-circle" title="Info message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-info-circle"></i>Info message</div>
This is a Sample Message for Info Box. </div>
</div>

6. Pesan Merah Dengan Simbol Info

<div class="bloggerspice bserror bstext" icon="exclamation-circle" title="Error message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-exclamation-circle"></i>Error message</div>
This is a Sample Message for Error Box. </div>
</div>

#5. Jika sudah memasukkan isi artikel dan kode pesan pemberitahuannya, silahkan pilih publikasikan untuk menampilkannya di blog sobat

#6. Selesai.

Demo

Keterangan : silahkan ganti pesan pemberitahuan, dengan selera sobat.

Buka dan lihatlah tampilan pesan pemberitahuannya, sungguh keren bukan hehehe. Aku yakin blog sobat akan bertambah menyenangkan saat pembaca melihat ini. Sungguh luar biasa untuk artikel kali ini hehehe. Terima kasih

Share this post