Sabtu, 19 Mei 2018

Style Kertas Lipat Kotak Pesan (Warning, Info, dan Tips)

Style Kertas Lipat Kotak Pesan (Warning, Info, dan Tips)

Style Kertas Lipat Kotak Pesan (Warning, Info, dan Tips)
Blog Mang Otep | Pada artikel sebelumnya sempat di bahas bagaimana Cara Membuat Kotak Peringatan, Tips dan Info di Blogspot dan pada kesempatan kali ini mamang akan memberikan alternatif desain lain untuk Kotak Pesan tersebut.

Kotak Pesan yang dimaksudkan dalam hal ini berisi 3 bagian yaitu Kotak Peringatan, Kotak Info, dan Kotak Tips. Sebenarnya bisa saja anda tambahkan bagian lainnya dengan mengubah CSS yang nanti akan mamang sediakan di bawah.

Kotak ini ditambahkan pada blog agar para pengunjung artikel kita mengetahui bahwa ada beberapa konten yang harus di cermati dengan teliti sehingga pengunjung tidak luput dari "Pesan" Tersebut dengan membuat gaya yang berbeda dengan artikel dasar. Langsung saja lihat kode CSS dan Demo nya dibawah ini :

Style Kertas Lipat Untuk Kotak Pesan :

1. Pasanglah Kotak Pesan ini sesuai dengan Link Tutorial yang sudah saya 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 selesai mengganti CSS tersebut maka tampilan "Kotak Peringatan" akan berubah (ini berlalu hanya jika anda mengikuti tutorial sebelumnya)

Blog Mang Otep berisi Tips blogging, optimasi SEO, Berita Teknologi Terbaru dan Lifestyle yang disajikan dengan gaya bahasa sendiri
Blog Mang Otep berisi Tips blogging, optimasi SEO, Berita Teknologi Terbaru dan Lifestyle yang disajikan dengan gaya bahasa sendiri
Blog Mang Otep berisi Tips blogging, optimasi 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 contoh warna HTML anda bisa lihat di HTML Color Picker

Demikian Info kali ini dari Blog Mang Otep tentang 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 mendapatkan postingan terbaru langsung dari email anda.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments