Mudahnya Membuat Info Box

Anda tentu sering menemukan info box atau kotak informasi dalam artikel. Umumnya berbentuk sebuah kotak yang berisi kalimat-kalimat dan di...

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 :)

COMMENTS

BLOGGER: 3
  1. wahh keren juga nih.. izin comot y gan.. :D

    ReplyDelete
  2. masih enggak ngerti sama tutor yang paling bawah tuh :(

    ReplyDelete
    Replies
    1. Yang paling bawah itu contoh CSS untuk gaya yang lain, dicoba aja :)

      Delete

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Mudahnya Membuat Info Box
Mudahnya Membuat Info Box
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh84NxcSpxiDy_2Aes5V8YzVXSqt5LTYcQdEsZhNCpCSDjDxxZJTOkd0-uXqUzgn6kf0hyphenhyphenkrqBAqemqRK-Eq39tu7-eGPSQfeRPd1vU1VqlJvN9Z0go8hzFQyOzBUmz7m6OdiWrjnCCD0w/s1600/cara+buat+info+box+css.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh84NxcSpxiDy_2Aes5V8YzVXSqt5LTYcQdEsZhNCpCSDjDxxZJTOkd0-uXqUzgn6kf0hyphenhyphenkrqBAqemqRK-Eq39tu7-eGPSQfeRPd1vU1VqlJvN9Z0go8hzFQyOzBUmz7m6OdiWrjnCCD0w/s72-c/cara+buat+info+box+css.jpg
Jelas in Blog
https://jelasinblog.blogspot.com/2014/05/mudahnya-membuat-info-box.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/05/mudahnya-membuat-info-box.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content