Hallo teman-teman, Bertemu kembali dengan saya diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website.
Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Style Blockquotes dengan CSS. Dipembahasan sebelumnya saya sudah membahas tentang quotes dan cara penggunaannya juga, dan untuk sekarang saya akan membahas tentang Blockquotes tapi dengan tambahan sentuhan CSS biar lebih menarik dan bagus. Pada dasarnya fungsi dan tujuan dari blockquotes dan quotes tidak jauh berbeda yah teman-teman.
Oke langsung saja kita mulai Cara Membuat Style Blockquotes dengan CSS.
Pertama-tama silahkan teman-teman buka text-editor yang teman-teman gunakan, lalu kemudian ketikan script HTML dibawah ini :
<div class="container"> <blockquote class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</blockquote> <blockquote class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</blockquote> </div>
Jika sudah silahkan teman-teman simpan, dihtml code disana saya menggunakan container agar blockquotes nya menjadi ketengah atau tidak diujung pojok kiri ataupun kanan melainkan menjadi ketengah. Oke langkah selanjutnya teman-teman buka kembali text-editor yang ada html codenya lalu tambahkan style CSS dan masukan diantara tag head atau dibawah tag title pada html :
.container{
width:450px;
margin: auto;
}
blockquote.left{
background: #bdc3c7;
border-right: 10px solid lightblue;
width: 300px;
margin: 5px 10px;
padding: 8px;
float: left;
border-radius: 0 15px 15px 0;
}
blockquote.right{
background: #bdc3c7;
border-left: 10px solid lightblue;
width: 300px;
margin: 5px 10px;
padding: 8px;
float: right;
border-radius: 15px 0 0 15px;
}
Sekarang silahkan teman-teman simpan, dan langkah selanjutnya teman-teman bisa dapat langsung menjalankan/run dibrowser yang teman-teman gunakan dan jika berhasil maka hasilnya akan seperti pada gambar dibawah ini :
Bagaimana teman-teman ? hasilnya sudah seperti pada gambar diatas kan ? cukup mudahkan teman-teman. Jadi seperti itulah Cara Membuat Style Blockquotes dengan CSS. Dan silahkan teman-teman modif sesuai selera teman-teman.
Oke kalau begitu cukup sampai disini dulu pembahasan saya tentang Cara Membuat Style Blockquotes dengan CSS. Semoga dapat bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.
Terimakasih