Lewati ke konten

Mudahnya Membuat Info Box

Anda tentu sering menemukan info box atau kotak informasi dalam artikel. Umumnya berbentuk sebuah kotak yang berisi kalimat-kalimat dan disampingnya ada icon sesuai kalimat. Misalnya, kalimat peringatan akan disandingkan dengan icon tanda seru (!). Info box dibuat untuk meminta perhatian, mempertegas maksud, atau memberi informasi tambahan, atau maksud-maksud lain sesuai keinginan pengelola situs.

Contoh.

Contoh info box...


Ini juga contoh info box...


Kalau yang ini info box juga dengan icon download...


Bagaimana cara membuat info box?

Mudah, Anda hanya butuh CSS, HTML, dan Icon. Itu saja.

CSS
/*Atur posisi tulisan dalam box*/
.warning_box {
    padding:20px 15px 20px 15px;
    margin-bottom:20px;
    font-size:14px;
    letter-spacing:.3px;
}
/*Tambahkan border, warna latar belakang, dan gambar latar belakang (icon)*/
.warning_box {
    background:#ffcccc url(http://2.bp.blogspot.com/-nUYrO9XUJe0/V21u2kllC8I/AAAAAAAAFfU/3T1MEWrtD7s/s1600/stop-ll.png) no-repeat 10px 15px;
    border:1px solid #ff9999;
}


HTML
<div class="warning_box">
Anda boleh menyalin artikel dalam blog ini, dengan cara bagaimanapun,
untuk tujuan apapun selama tidak melanggar hukum. Jangan cuma disimpan,
sebar luaskan apa yang telah Anda salin. Jika hendak menerbitkan atas nama
Anda sendiri, gantilah redaksinya. Jika malas, sertakan tautan ke sini
agar Anda bisa melempar tanggungjawab bila terjadi sesuatu nanti. Simple :)
</div>


Hasil

Anda boleh menyalin artikel dalam blog ini, dengan cara bagaimanapun, untuk tujuan apapun selama tidak melanggar hukum. Jangan cuma disimpan, sebar luaskan apa yang telah Anda salin. Jika hendak menerbitkan atas nama Anda sendiri, gantilah redaksinya. Jika malas, sertakan tautan ke sini agar Anda bisa melempar tanggungjawab bila terjadi sesuatu nanti. Simple :)


Mudah bukan?

Cobalah yang ini...
.warning_box {
    padding:20px 15px 20px 55px;
    margin-bottom:20px;
    font-size:14px;
    letter-spacing:.3px;
}

.warning_box a {
    text-decoration:underline !important;
}

.warning_box {
    background:#ffcccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ef2ZRunA7vyvLs-TtYVh2pvPymUIoQ8h8C_0i_9u_RV6b07DnOqyJWUIg_Wbw4su3ttARnFdjt29QZyb6Vjjw1nU6ybI2HHEVoZr6ZyPvvNdvg9K5mZCEMkHegB1aJM-VjTFMLYjfMQ/s1600/stop-ll.png) no-repeat 10px 15px;
    border:1px solid #ff9999;
}

.warning_box, .warning_box a {
    color:#c31b00;
}



Selamat belajar :)

3 komentar

Tulis komentar

Memuat komentar…

Tentang

Halo! Saya asisten Jelas in Blog.

Mode warna

Komentar terbaru

  • Memuat…
↑ ↓ pilih   Enter buka   Esc tutupCari di web

Kirim pesan

Pesan dikirim ke email pemilik blog.

Konversi kode

Tempel kode di bawah. Hasilnya aman ditulis di komentar dan langsung disalin, tinggal tempel di kolom komentar.

Halo dan Selamat datang di Jelasinblog, situs yang memuat informasi dan tutorial Blogger dan WordPress gratis untuk pemula. Tujuan utama kami adalah untuk menyediakan tutorial Blogger dan WordPress mutakhir yang mudah dipahami untuk blogger, dan pemilik situs WordPress.

Daftar Tautan