› › › ›

Cara Membuat Allert Seperti Di Bootstrap Menggunakan CSS Di Blogger | nafasmedia

Update :

nafasmedia | Halo apa kabar semua? Kali ini saya akan memberikan tutorial membuat allert seperti di bootstrap menggunakan CSS di blogger. sebenarnya kita bisa langsung  menggukan komponent allert dari Bootstrap untuk membuat allert ini, namun sesuai yang saya jelaskan di Cara memasang Bootstrap Di Blogger bahwa saat saya memasang Bootstrap di blogger, saya mendapati tampilan diblog saya ini terdapat bagian yang error atau hilang. 

Maka dari itu saya mencoba mengakali nya membuat allert menggunakan CSS dan hasilnya pun sangat mirip dengan komponen allert dari Bootstrap. sebenarnya apa sih kegunaan dari allert ini? Fungsi Allert biasanya digunakan untuk menampilkan sebuah pesan peringatan atau informasi.Untuk melihat perbedaan dari allert yang akan kita buat ini dengan allert dari Botstrap kalian bisa melihatnya melalui link demo disamping ini DEMO.

Bagaimana perbedaannya sangat mirip bukan? tertarik untuk membuatnya? Cekidot

Langkah pertama masuk ke akun blogger kalian dan pergi ke bagian template lalu edit HTML,dan copy semua kode css dibawah lalu paste diatas kode </style> atau ]]><b:skin. 

.allert-primary,.allert-secondary,.allert-succes,.allert-warning,.allert-warning,.allert-danger{
     font-family: 'Segoe UI';
     padding:12px;
     padding-left:15px;
     border-radius: 6px;
}
.allert-primary{
     background: #cce5ff;
     color:#004085;
}
.allert-secondary{
     background: #e2e3e5;
     color:#878a8e;
}
.allert-succes{
     background: #cae3c1;
     color:#207f00;
}
.allert-warning{
     background: #fff3cd;
     color:#93751c;
}
.allert-danger{
     background: #f8d7da;
     color:#975057;
}

Disini kalian sudah memasang CSS nya dan allert sudah bisa untuk diterapkan. Cara menngunakannya kita perlu memanggil kode CSS diatas dan memasangnya diartikel blog kalian atau juga bisa diletakkan dibawah menu navigasi dan terserah kalian mau dipasang dimana. 

<div class="allert-primary">Ini adalah contoh allert menngunakan css - Primary</div>
<div class="allert-secondary">Ini adalah contoh allert menngunakan css -Secondary</div>
<div class="allert-succes">Ini adalah contoh allert menngunakan css - Succes</div>
<div class="allert-warning">Ini adalah contoh allert menngunakan css - Warning</div>
<div class="allert-danger">Ini adalah contoh allert menngunakan css - Danger</div>

Nah itu dia cara membuat Cara membuat Allert seperti di Bootstrap menggunakan CSS Di Blogger versi nafasmedia. selanjutnya kalian bisa mengoprek kode CSS diatas seperti merubah ukuran atau warna atau kalian juga bisa menambahkan font awesome pada allert yang kita buat ini.

Baiklah mungkin sudah cukup tutorial dari saya,Terimakasih sudah berkunjung, semoga bermanfaat dan sampai jumpa dinext Artikel. 

0 Comments