Kotak Pesan yang dimaksudkan dalam hal ini berisi 3 bab yakni Kotak Peringatan, Kotak Info, dan Kotak Tips. Sebenarnya dapat saja anda tambahkan bab lainnya dengan mengubah CSS yang nanti akan mamang sediakan di bawah.
Kotak ini ditambahkan pada blog biar para pengunjung artikel kita mengetahui bahwa ada beberapa konten yang harus di cermati dengan teliti sehingga pengunjung tidak luput dari "Pesan" Tersebut dengan menciptakan gaya yang berbeda dengan artikel dasar. Langsung saja lihat instruksi CSS dan Demo nya dibawah ini :
Style Kertas Lipat Untuk Kotak Pesan :
1. Pasanglah Kotak Pesan ini sesuai dengan Link Tutorial yang sudah aku sertakan pada paragraf awal tadi dan ganti CSS tersebut dengan CSS di bawah ini:
/* CSS Note by Mang Otep */ .warning, .info, .tips{ position:relative; width:90%; padding:1em; margin:0.5em auto; color:#000; background:#2ecc71; overflow:hidden} .warning{background:#f39c12} .info{background:#F2784B} .tips{background:#3498db} .warning:before, .info:before, .tips:before{ content:""; position:absolute; top:0;right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #27ae60 #27ae60; background:#27ae60; box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2); display:block; width:0} .warning:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22} .info:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45} .tips:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9} 2. Setelah anda final mengganti CSS tersebut maka tampilan "Kotak Peringatan" akan berubah (ini berlalu hanya jikalau anda mengikuti tutorial sebelumnya)
berisi Tips blogging, meningkatkan secara optimal SEO, Berita Teknologi Terbaru dan Lifestyle yang disajikan dengan gaya bahasa sendiri
berisi Tips blogging, meningkatkan secara optimal SEO, Berita Teknologi Terbaru dan Lifestyle yang disajikan dengan gaya bahasa sendiri
berisi Tips blogging, meningkatkan secara optimal SEO, Berita Teknologi Terbaru dan Lifestyle yang disajikan dengan gaya bahasa sendiri
Aturlah lebdar dan jarak antara ketiga elemen di atas sehingga cocok dengan template anda, dan juga jangan lupa atur warna yang ingin ditampilkan dengan mengganti #f39c12 , #F2784B , #3498db yang mana tumpuan warna HTML anda dapat lihat di HTML Color Picker
Demikian Info kali ini dari wacana artikel Style Kertas Lipat Untuk Kotak Pesan (Peringatan, Info, dan Tips), semoga bermanfaat untuk anda. Jika menyukai artikel ini silahkan anda klik like, share, and subscribe untuk mendapat postingan terbaru pribadi dari email anda.
Sumber https://www.mangotep.com/
Click to see the code!