Membuat Recent Artikel Thumbnail Mudah dengan Bootstrap

membuat recent artikel thumbnail dengan bootstrap

Jika Anda sedang slicing dan membuat recent post/artikel, maka data yang akan di tampilkan berupa judul, gambar thumbnail, content, tanggal dan lainnya. Berikut cara membuat recent post atau recent artikel mudah dan rapi dengan bootstrap.

membuat recent artikel thumbnail dengan bootstrap

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ... Penggalan isi konten ...
  </div>
</div>

Class media -left untuk meletakkan gambar thumbnail, sedangkan media-body untuk penggalan konten. Jika Anda akan meletakkan gambar sebelah kanan maka seperti ini:

<div class=”media”>
<div class=”media-body”>
<h4 class=”media-heading”>Media heading</h4>
…. Isi Konten …
</div>
<div class=”media-right”>
<a href=”#”>
<img alt=”64×64″ class=”media-object” src=”gambar.jpg” style=”width: 64px; height: 64px;”>
</a>
</div>
</div>

Oke sebelumnya jangan lupa untuk meletakkan bootstrap di header untuk menggunakannya. Berikut contoh peletakan bootstrap di header:

<link rel=”stylesheet” href=”assets/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”assets/css/animate.css”>
<link rel=”stylesheet” href=”assets/css/font-awesome-animation.css”>
<link rel=”stylesheet” href=”assets/font-awesome/css/font-awesome.min.css”>
<link rel=”stylesheet” href=”assets/css/style.css”>

Font Awesome digunakan untuk menampilkan simbol2 seperti medsos, icon2 agar lebih ringan dan lengkap. Oke, itu tadi cara menampilkan recent artikel thumbnail dengan bootstrap.

About Mr.Gng 249 Articles
Si Anak dari Orang Tua tersayang ingin berbagi ilmu dengan harapan bermanfaat bagi orang lain. Situs SeputarTI.Com ini sebagai salah satu media berbagi saya, khususnya dibidang TI. Salam Kenal dari saya... :-)

Be the first to comment

Leave a Reply

Your email address will not be published.


*