Cara Membuat Alert di Blog dengan Style Bootstrap Tanpa Javascript

Cara Membuat Alert di Blog - Halo sahabat blogger dimanapun kalian berada, kali ini cara-mei.blogspot.com akan berbagi cara membuat sistem alert di blog. Cara ini nantinya bisa kalian terapkan dimanapun, baik wordpress,blogspot dan cms lainnya yang mendukung html dan css. Cara membuat alert ini sebenarnya terinspirasi dari sebuah tutorial di www.w3schools.com, hanya saja di sana diharuskan memasang script bootstrap terlebih dahulu, dan seperti yang kalian ketahui bahwa script bootstrap itu berbentuk javascript dan didalamnya terdapat banyak sekali kode javascript,html,css, tentunya hal ini akan memberatkan loading blog kita.

Nah pada tutorial ini, saya akan mencoba membuat alert dengan style bootstrap tersebut tanpa menggunakan script apapun, hanya menggunakan css saja, karena yang kita buat hanya alert, maka kita tidak memerlukan script-script bootstrap lainnya.

Style alert ini juga sudah banyak dipakai website-website ternama seperti lk21 lho, website tersebut menggunakan sistem alert sebagai pemberitauan kepada seluruh pengunjung website. Kalian nanti juga bisa menggunakan style alert ini untuk membuat pengumuman di blog kalian.

Oke tanpa panjang lebar, langsung saja kita menuju ke tutorial pembuatan alert dengan style bootstrap.

Cara Membuat Alert di Blog

1. Silahkan buka blog kalian, dan masuk ke edit template.

2. Copy kode dibawah ini dan paste kedalam template kalian. Paste tepat diatas kode ]]></b:skin>

#sukses{background-color:#dff0d8;border:1px solid #d6e9c6;border-radius:5px;padding:15px}
#info{background-color:#d9edf7;border:1px solid #bce8f1;border-radius:5px;padding:15px}
#warning{background-color:#fcf8e3;border:1px solid #faebcc;border-radius:5px;padding:15px}
#danger{background-color:#f2dede;border:1px solid #ebccd1;border-radius:5px;padding:15px} 

3. Save template.

Nah dengan 3 cara diatas kalian sudah mendapatkan kode css untuk membuat notifikasi alert di blog, sekarang tinggal bagaimana penerapannya kedalam tampilan blog. Kalian bisa menampilkannya didalam postingan seperti contoh dibawah, dan kalian juga bisa menempatkkannya didalam widget blog kalian.

Cara Membuat Alert di Blog dengan Style Bootstrap Tanpa Javascript

Untuk cara menempatkan alert didalam widget kalian cukup copy kode html dibawah ini dan tempelkan ke widget blog kalian.

<div id="info">cara-mei.blogspot.com kini berganti domain menjadi cara-mei.org</div>

Keterangan : kalian bisa mengganti kode info dengan kode lain di css, seperti sukses,warning dan danger, kalian juga bisa edit sesuka hati, seperti mengganti warna background warna border dan menambahkan elemen css lainnya.

Jika kalian ingin menempatkan alert didalam postingan caranya sama, kalian cukup copy kode html diatas dan kalian paste di dalam artikel kalian (paste dalam mode html, bukan compose).
Dengan memasang alert di blog pasti akan membuat blog kalian terlihat lebih elegan dan keren, pemasangan alert di blog ini sebenarnya bertujuan untuk menginformasikan kepada para pengunjung website, jika pemilik website mempunyai suatu informasi yang harus ditujukan kepada pengunjung website.

Nah sekian dulu tutorial kali ini tentang Cara Membuat Alert di Blog dengan Style Bootstrap Tanpa Javascript. Semoga menjadikan blog kalian lebih elegan dan profesional.