--> Skip to main content
Home Bootstrap Pemrograman Web Web Programming Membuat Daftar Artikel Berita Dengan Bootstrap

Membuat Daftar Artikel Berita Dengan Bootstrap

.
Dalam tutorial pemrograman web kali ini, kita akan membahas bagaimana membuat template untuk menampilkan daftar berita dengan menggunakan Bootstrap.

 Secara keseluruhan, desain dari daftar berita  yang akan kita buat menggunakan Bootstrap. Disamping itu kita juga menggunakan FontAwesome untuk mempercantik bagian yang kita perlukan : seperti icon untuk date, icon untuk view, icon untuk like, icon untuk author serta icon untuk button social media sharing.

Berikut ini adalah ouput dari rancangan Daftar Berita yang akan kita buat, seperti ditunjukkan oleh Gambar.1 dibawah ini :
Gambar.1

 Dan jika diklik pada salah satu artikel postingan, maka akan keluar informasi detil seperti yang ditunjukkan oleh Gambar.2 dibawah ini :
Gambar.2

Langkah-langkah membuat daftar artikel berita

1. Create file ilmudetil.css
Dalam file ini, kita akan merumuskan kode css untuk tampilan navbar (background color untuk navbar default, warna untuk item menu serta kondisi sedang dihover pada item menu). 

 Kita juga mendifinisikan bagaimana tampilan social-media serta background color untuk footer dan posisinya terhadap area list artikel.
.navbar-default .navbar-nav > li.clr1 a{
        color:#ffffff;
}
.navbar-default .navbar-nav > li.clr2 a{
    color: #FFEB3B;;
}
.navbar-default .navbar-nav > li.clr3 a{
    color: #5EC64D;
}
.navbar-default .navbar-nav > li.clr4 a{
    color: #29AAE2;
}
.navbar-default .navbar-nav > li.clr5 a{
    color: #CEE229;
}

.navbar-default .navbar-nav > li.clr1.active a{
    color:#fff;
    background: #F55;
}
.navbar-default .navbar-nav > li.clr1 a:hover{
    background: rgba(255, 85, 85, 0.75);
} 
.navbar-default .navbar-nav > li.clr2.active a{
    color: #fff;
    background:#973CB6;
}
.navbar-default .navbar-nav > li.clr2 a:hover{
 background: rgba(151, 60, 182, 0.66)
}


.navbar-default .navbar-nav > li.clr3.active a{
    color: #fff;
    background:#5EC64D;
}
.navbar-default .navbar-nav > li.clr3 a:hover
{
  background: rgba(94, 198, 77, 0.78);
}
.navbar-default .navbar-nav > li.clr4.active a{
    color: #fff;
    background: #29AAE2;
}
.navbar-default .navbar-nav > li.clr4 a:hover{
    background: rgba(41, 170, 226, 0.62);
}

.navbar-default .navbar-nav > li.clr5.active a{
    color: #fff;
    background: #CEE229;
}
.navbar-default .navbar-nav > li.clr5 a:hover{
    background: rgba(206, 226, 41, 0.63);
}
.navbar-default{
    background-color: #3b5998;
    font-size:18px;
    border-color:none;
}
.navbar-default .navbar-brand {
    color: #ffffff;
    font-weight:bold;
}
.navbar-default .navbar-text {
    color:#ffffff;
}

.pemisah-btnnav{
    margin-left: 20px;
    margin-right: 20px;
}

.recent{
    padding-top:20px;
    
}
.info-meta{
    padding-top: 10px;
    color:#9999;
}
a:focus, 
a:hover {
text-decoration: none;
outline: none;
color: #9c9c9c;
}
.footer-bottom {
background-color:#3b5998;
color:#fff;
padding-top:10px;
padding-bottom:10px;
}

 2. Create file index.html
Pada file ini, kita akan memanggil kode css dari ilmudetil.css, librari Bootstrap (boostrap.min.css), librari css untuk font-awesome.

 Kemudian dilanjutkan dengan membuat navigasi bar beserta item menunya seperti yang terlihat pada Gambar.1. Disini kita menggunakan navbar standar dengan menggunakan navbar-default yang telah kita rubah background colornya. Dan kita juga menetapkan navbarnya dengan kondisi fix melalui class navbar-fixed-top. Jika menginginkan variasi navbar yang berbeda, dapat dilihat pada tutorial : 

 Membuat top fix navbar dengan menggunakan Bootstrap

 Setelah itu, kita lanjutkan dengan pembuatan untuk List Berita serta sisi kiri dengan Latest News. Penempatan konten untuk List Berita dan Latest News berada dalam satu row, namun kita pecah menjadi dua kolom, dimana lebar untuk List Berita kita gunakan col-md-9 dan Latest News menggunakan col-md-3. Sedangkan untuk footer kita menggunakan class .footer-bottom yang telah kita definisikan pada file ilmudetil.css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="ilmu-detil.blogspot.com">
    <title>Membuat Daftar Artikel Berita</title>
    <!-- Bagian css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">  
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
            Pusat Ilmu Secara Detil</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="clr1 active"><a href="index.html">Home</a></li>
                <li class="clr2"><a href="">Programming</a></li>
                <li class="clr3"><a href="">English</a></li>
            </ul>
        </div>
    </div>
</nav>
</br></br></br></br>
    
<div class="container" style="margin-top:40px">
    <div class="row">
        <div class="col-md-9">
              <div class="panel panel-default">
               <div class="panel-body">
                  <h3>Latih Balita Anda Dalam Merangsang Saraf Motorik</h3>
                    <div class="info-meta">
                        <ul class="list-inline">
                            <li><i class="fa fa-clock-o"></i> Jan 5, 2016 </li>
                            <li><i class="fa fa-eye"></i>21k</li>
                            <li><i class="fa fa-heart-o"></i>372</li>
                            <li><i class="fa fa-user"></i> Posting by Ilmu Detil</li>
                            <li class="pull-right">Category : Education</li>
                        </ul>
                    </div>
                  <hr>
                  
                    <div class = "media">
                       <a class = "pull-left" href = "#">
                          <img class = "media-object " src = "images/education.jpg" width="100%" height="200px" >
                       </a>
                       <div class = "media-body">
                          <p>A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                          A simple shell for an h1 to appropriately space out and segment sections of content on a page.
                          </p> 
                          <p>It can utilize the h1's default small element, as well as most other components (with additional styles).
                            A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles). A simple shell for an h1 to appropriately space out and segment sections of content on a page.
                         </p>
                       </div>
                        <p style="text-align:right;">
                            <a href="artikel_edukasi.html">
                                <button class="btn btn-primary">Read More</button>
                            </a>
                        </p>
                    </div>
                    <hr>
                    <h3>Tip dan Trik dalam memilih laptop untuk penyuka game</h3>
                    <div class="info-meta">
                        <ul class="list-inline">
                            <li><i class="fa fa-clock-o"></i> Jan 5, 2016 </li>
                            <li><i class="fa fa-eye"></i>21k</li>
                            <li><i class="fa fa-heart-o"></i>372</li>
                            <li><i class="fa fa-user"></i> Posting by Ilmu Detil</li>
                            <li class="pull-right">Category : Technology</li>
                        </ul>
                    </div>
                  <hr>
                  
                    <div class = "media">
                       <a class = "pull-left" href = "#">
                          <img class = "media-object" src = "images/technology.jpg" width="300px" height="200px">
                       </a>
                       
                       <div class = "media-body">
                          <p>A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                          A simple shell for an h1 to appropriately space out and segment sections of content on a page.
                          </p> 
                          <p>It can utilize the h1's default small element, as well as most other components (with additional styles).
                            A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles). A simple shell for an h1 to appropriately space out and segment sections of content on a page.
                         </p>  
                       </div>
                        <p style="text-align:right;">
                            <button class="btn btn-primary">Read More</button>
                        </p>
                    </div>
               </div>
            </div>
         </div>  
        <div class="col-md-3">
            <div class="panel panel-default">
               <div class="panel-heading"><h4 class="text-center">Latest News</h4></div>
               <div class="panel-body">
                    <div class="recent">
                        <a href="#"><img class="img-responsive" src="images/sport.jpg" alt="" /></a>                
                        <div class="info-meta">
                            <ul class="list-inline">
                                <li><i class="fa fa-clock-o"></i> Jan 5, 2016 </a></li>
                                <li><i class="fa fa-eye"></i>21k</li>
                                <li><i class="fa fa-heart-o"></i>372</li>
                            </ul>
                        </div>
                        <h4>
                            <a href="">Pertandingan Basket NBA berlangsung sangat sengit</a>
                        </h4>
                    </div>
                    
                    <div class="recent">
                        <a href="#"><img class="img-responsive" src="images/technology.jpg" alt="" /></a>                           
                        <div class="info-meta">
                            <ul class="list-inline">
                                <li><i class="fa fa-clock-o"></i> Jan 5, 2016</li>
                                <li><i class="fa fa-eye"></i>21k</li>
                                <li><i class="fa fa-heart-o"></i>372</li>
                            </ul>
                        </div>
                        <h4 class="entry-title">
                            <a href="">Tip dan Trik dalam memilih laptop untuk penyuka game</a>
                        </h4>
                    </div><!--recent-->
                </div>
            </div>      
        </div>          
    </div>          
</div>
<!--FOOTER-->
    <div class="footer-bottom">
        <div class="container-fluid text-center">
            <p>Copyright &copy; 2016,  DTC. Developed by <a href="https://ilmu-detil.blogspot.com/">Pusat Ilmu</a></p>
        </div>
    </div>              
    <script src='assets/js/jquery.js'></script>
    <script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
3. Create file artikel_edukasi.html dan artikel_technology
Apabila diklik pada bagian Read More dari salah satu artikel, maka akan ditampilkan informasi detilnya seperti pada Gambar.2 untuk file artikel_edukasi.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="ilmu-detil.blogspot.com">
    <title>Latih Balita Anda Dalam Merangsang Saraf Motorik</title>
    <!-- Bagian css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    <link rel="stylesheet" href="assets/css/social-button.css">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
            Pusat Ilmu Secara Detil</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="clr1 active"><a href="index.html">Home</a></li>
                <li class="clr2"><a href="">Programming</a></li>
                <li class="clr3"><a href="">English</a></li>
            </ul>
        </div>
    </div>
</nav>
</br></br></br></br>
    
<div class="container" style="margin-top:40px">
    <div class="row">
        <div class="col-md-9">
              <div class="panel panel-default">
               <div class="panel-body">
                <div class="post-detail">
                  <h3>Latih Balita Anda Dalam Merangsang Saraf Motorik</h3>
                  
                    <div class="info-meta">
                        <ul class="list-inline">
                            <li><i class="fa fa-clock-o"></i> Jan 5, 2016 </li>
                            <li><i class="fa fa-eye"></i>21k</li>
                            <li><i class="fa fa-heart-o"></i>372</li>
                            <li><i class="fa fa-user"></i> Posting by Ilmu Detil</li>
                            <li class="pull-right">Category : Education</li>
                        </ul>
                    </div>
                  <hr>
                  <p>
                  <img src="images/education.jpg" width="300px" alt="..." style="float:left;padding:5px 10px 5px 10px;">A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. <p>It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page.</p> <p>It can utilize the h1's default small element, as well as most other components (with additional styles). A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).</p>
                  
                  <p>It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page.</p>
                  
                  <p>It can utilize the h1's default small element, as well as most other components (with additional styles). A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).
                  A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).</p>
                 
                  </p>
                
                  </div>
                <div class="frame-tombol" >
                    <a href="" class="btn tombol-twitter"><i class="fa fa-twitter"></i> Twitter</a>
                    <a href="" title="Share on Facebook" target="_blank" class="btn tombol-facebook"><i class="fa fa-facebook"></i> Facebook</a>
                    <a href="" title="Share on Google+" target="_blank" class="btn tombol-googleplus"><i class="fa fa-google-plus"></i> Google+</a>
                    <a href="" class="btn tombol-pinterest"><i class="fa fa-pinterest"></i> Pinterest</a>
                    <a href="" class="btn tombol-linkedin"><i class="fa fa-linkedin"></i> LinkedIn</a>
                </div>                
                  
               </div>
               
            </div>
         </div>
        <div class="col-sm-3">
            <div class="panel panel-default">
               <div class="panel-heading"><h4 class="text-center">Latest News</h4></div>
               <div class="panel-body">
                    <div class="recent">
                        <a href="#"><img class="img-responsive" src="images/sport.jpg" alt="" /></a>                
                        <div class="info-meta">
                            <ul class="list-inline">
                                <li><i class="fa fa-clock-o"></i> Jan 5, 2016 </a></li>
                                <li><i class="fa fa-eye"></i>21k</li>
                                <li><i class="fa fa-heart-o"></i>372</li>
                            </ul>
                        </div>
                        <h4>
                            <a href="">Pertandingan Basket NBA berlangsung sangat sengit</a>
                        </h4>
                    </div>
                    
                    <div class="recent">
                        <a href="#"><img class="img-responsive" src="images/technology.jpg" alt="" /></a>                           
                        <div class="info-meta">
                            <ul class="list-inline">
                                <li><i class="fa fa-clock-o"></i> Jan 5, 2016</li>
                                <li><i class="fa fa-eye"></i>21k</li>
                                <li><i class="fa fa-heart-o"></i>372</li>
                            </ul>
                        </div>
                        <h4 class="entry-title">
                            <a href="">Tip dan Trik dalam memilih laptop untuk penyuka game</a>
                        </h4>
                    </div><!--recent-->
                </div>
            </div>      
        </div>          
    </div>          
</div>
<!--FOOTER-->
<div class="footer-bottom">
    <div class="container-fluid text-center">
        <p>Copyright &copy; 2016,  DTC. Developed by <a href="https://ilmu-detil.blogspot.com/">Pusat Ilmu</a></p>
    </div>
</div>  
</div>   
</body>
</html>
Untuk pembuatan tombol sosial media sharing, silahkan lihat tutorial : Membuat tombol share pada Artikel Web.

 Untuk pembuatan file artikel_technology.html, kita tinggal rubah judul, gambar pada file artikel_edukasi.html
  • DEMO
    •                          
  • DOWNLOAD

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar