Penulis: Moch Adnan dipublikasikan: 26 Juni 2023
Blog Moch Adnan - tulisan kali ini saya akan membawakan sebuah tutorial blogspot yang cocok sekali untuk sobat coba, di tutorial blogger kali ini saya akan berbagi pengalaman mengenai bagaimana cara membuat sebuah kotak pemberitahuan seperti, Info, catatan, dan warning. Yang mana kotak pemberitahuan ini bisa juga dimasukkan ke dalam tulisan artikel, saya sendiri beberapa kali mencobanya dan berhasil menghasilkan ketegasan dalam beberapa postingan saya.
Cara Membuat kotak Info, Notes, atau Warning di Blogger
Cara Membuat kotak Info, Notes, atau Warning di Blogger

Cara Membuat kotak Info, Notes, atau Warning di Blogger

Untuk membuat kotak pemberitahuan seperti: warning, info, dan notes/catatan, yang bisa dimasukkan ke dalam tulisan, maka pertama-tama saya akan membutuhkan sebuah kode CSS. Kode CSS ini biasanya harus di apit oleh tag pembuka<style>
penutupan </style>

Namun untuk mempermudah sobat, saya anjurkan untuk langsung saja menyimpannya ke dalam template/tema blog sobat. Dengan cara:
Masuk ke dasbord blog, kemudian pilih Tema, kemudian Edit HTML.
 
Silakan simpan kode CSS
di bawah ini tepat di atas kode ]]></b:skin>
  .info {background-color: rgb(239, 255, 255);border-left: 16px solid rgb(240, 248, 254); color:#999;font-size:17px;font-style:italic;line-height:24px;margin:30px 60px;display: inline-block;}
.note {display: inline-block;background-color: rgb(248, 248, 255);border-left: 16px solid rgb(220, 220, 220);color:#999;font-size:17px;font-style:italic;line-height:24px;margin:30px 60px;}
.warning {display: inline-block;background-color: rgb(240, 128, 128);border-left: 16px solid rgb(254, 228, 225);color:#fefefe;font-size:17px;font-style:italic;line-height:24px;margin:30px 60px;}

Tips ! gunakan pencarian cepat dengan cara menekan tombol ctrl+F

Pilih Simpan jika sudah selesai menyematkan kode CSS diatas ke dalam tema blog.


Baca juga : Cara Menambahkan Elemen Atau Kolom Baru Di Bawah Header Blog, dengan mengklik tautan link di bawah ini. Lebih lengkapnya

Masukkan kode HTML setiap kali memanggil kode CSS

Tahapan/langkah selanjutnya sobat hanya tinggal perlu menuliskan kode HTML seperti berikut, di setiap kali akan menggunakan/memanggil kode CSS tersebut. 

<div class="info"><p><strong>Info :</strong> Text disini</p></div>
<div class="notes"><p><strong>Info :</strong> Text disini</p></div>
<div class="warning"><p><strong>Info :</strong> Text disini</p></div>

Note: ubah pada tulisan yang bertanda merah dengan 'info' atau 'notes' 'warning' setiap kali ingin menggunakan salah satu dari kotak pemberitahuan tersebut.

Demikian saja Cara Membuat kotak Info, Notes, atau Warning di Blogger yang bisa saya publikasikan semoga bisa sampai dengan jelas kehadapan sobat semua. Tetap menulis, tetap berbagi. Sukses selalu buat sobat semua.
Bagikan ke: —
Moch Adnan
Moch Adnan

Seorang Blogger biasa yang hanya sekedar ingin menulis dan berbagi. Tidak soal berapa lama kita hidup, tetapi bagaimana kita hidup