Cara Membuat Kotak Catatan, Tisp dan Peringatan pada Postingan

Cara Membuat Kotak Catatan, Info dan Peringatan - Assalamualaikum, ok gan malam-malam begini sambil saya menunggu pembeli datang, saya akan luangkan waktu saya untuk berbagi tentang bagaimana Cara Membuat Kotak Catatan, Info dan Peringatan pada Postinagnan.

Box ini sangat berguna, terutama bagi sobat blogger yang suka membuat catatan, tips atau perinagatan yang khusus disimpan dalam kotak yang relevan dan enak dipandang.

Bagi sobat Blogger yang ingin membuat kotak catatan, kotak tips atau kotak warning pada postingan bisa mengikuti langkah-langkah yang akan saya berikan pada postingan ini, tentunya kotak catatan ini lebih stylish, responsive dan enak dipandang sehingga pengunjung akan betah main-main di blog sobat.

Baca juga: Cara menyembunyikan Widget di Home Page

Sebelum masuk langkah-langkahnya, sobat bisa melihat terlebih dahulu tampilan katak catatan, tips dan warning yang akan kita buat.

Ok langsung aja, untuk cara pembuatannya silahkan ikuti langkah-langkah berikut

Cara Membuat Kotak Catatan, Info dan Larangan

Pertama masuk Blogger >> Template >> Edit HTML kemudian letakan kode berikut tepat di atas ]]></b:skin> atau </style>

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhICCALaCXDH16bEEQI0iRImEjdFZdWtEx62S3NSNhQn0BIcIQifzaciDPLzHwqSUFqM76vm2WPg2Nz04vedH4VpE61jDeGxq_iNEJVhxW8gXTuPvMDdHfUthziZTB_4XiZoAwK8D1I8uc/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUBNobqHbhRvRrK50oWTZp-AkyJudoqPXX6rhJILV87B7SXVkpfNZb0_qpBBARUw2UE7LCyq4tCIi9EooGoJbFPUtCG9gsO0_ae2EfnS_8J1hNe-6IkPtLurx94cQ02BIGSPzVF9LJjz4/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOKWb3oDGRU7JAtXPO0k1jGaA1ELTKzbBQVqQAuK2JUqkSn00k6m2C3EVXH3B9-y-BS5i9abdPBDpeXmzDNeILGByM0YIswktxCIY-Hd4hzaON_ypSpEY4rGpt-v2fmqFZH75pasFzfuQ/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

Apabila sudah selesai simpan template

Kemudian bila sobat ingin membuat kotak tersebut dalam postingan sobat tinggal menyimpan tulisannya di antara kode berikut,

Untuk catatan atau info, kodenya sebagai berikut:

 <div class='info'>... Catatanya di sini ...</div> 

Untuk tips, kodenya sebagai berikut:

 <div class='tips'>... tipsnya di sini ...</div> 

Untuk peringatan atau warning, kodenya sebagai berikut:

 <div class='warning'>... peringatanya di sini ...</div>

Nah sampai sini untuk postingan kali ini apabila ada yang tidak dipahami atau ada kritik silahkan berkomentar di bawah. Terima kasih banyak untuk kunjungannya,

Waalaikumsalam.