Pusat Ilmu Secara Detil

Tutorial Bootstrap: Newsticker Bootstrap

Tutorial Bootstrap: Newsticker Bootstrap

Seringkali kita melihat sebuah website berita, selain penyajian berita secara sliding, ada juga penyajian berita secara newsticker. Penyajian breaking news dalam bentuk newsticker dapat berupa hanya judul saja ataupun konten yang lengkap dengan judul, gambar serta potongan beritanya.

Bagi yang memerlukan contoh implementasi web berita secara sliding, dapat anda lihat ulasannya pada :

Sekarang kita akan mencoba mengimplementasi Newsticker Bootstrap pada website kita, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
bootstrap newsticker
Gambar.1


Buatlah file yang diberinama index.html seperti script dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="tutorial-boostrap-merubaha-warna">
 <meta name="author" content="ilmu-detil.blogspot.com">
 <title>Tutorial Boostrap </title>
 <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 <link rel="stylesheet" href="assets/css/site.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <link rel="stylesheet" href="assets/css/font-awesome.min.css"> 
 <link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
    <script  src="assets/js/bootstrap.min.js"></script>
 <style type="text/css">
 .navbar-inverse {
  background-color: #3b5998;
  font-size:18px;
 }
 .navbar-brand{
  float: none !important;
 }

 .navbar-inverse .navbar-nav > li.c1 a:hover, .navbar-inverse .navbar-nav > li.c1.active a{
  color:#fff;
  background: #F55;
 }

 .navbar-inverse .navbar-nav > li.c2 a:hover, .navbar-inverse .navbar-nav > li.c2.active a{
  color: #fff;
  background:#973CB6;
 }
 .panel-default>.panel-heading {
    color: #333;
    background-color: #E91E63;
    
 }
 .panel-default {
    border-color: #E91E63;
}
 </style>
</head>
<body>
 
<nav class="navbar navbar-inverse">
 <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">
     <img src="assets/images/tk_logo5.png" alt="Techro HTML5 template"></a>
  </div>
  <div>
   <ul class="nav navbar-nav navbar-right">
    <li class="c1 active"><a href="index.html">Home</a></li>
    <li class="c2 dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown">Programming<span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li><a href="">Web Programming</a></li>
                        <li><a href="">Dekstop Programming</a></li>
                        <li><a href="">Android Programming</a></li>
     </ul>
    </li>
    <li><a href="">English</a></li>
    <li><a href="">Review</a></li>
    <li><a href="">Videos</a></li>
    <li><a href="">Gallery</a></li>
   </ul>
  </div>
 </div>
</nav>
<script>
   $(document).ready(function(){
   $(".dropdown").hover(            
   function() {
    $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
    $(this).toggleClass('open');        
   },
   function() {
    $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
    $(this).toggleClass('open');       
   }
   );
  });
  </script>
 
 <!-- /.navbar -->
 <br>
 <br>
<div class="container">
  <div class="row">
   <div class="col-md-6">
    <div class="panel panel-default" >
     <div class="panel-heading" style="color:#fff">
      <b>News</b>
     </div>
     <div class="panel-body">
      <div class="row">
       <div class="col-xs-12">
        <ul class="demo1">
         <li class="news-item">
          <table cellpadding="4">
           <tr>
            <td><img src="assets/images/kpl6.jpg" width='120' height='120'   style= "margin-right:4px">
            </td>
            <td><h5 style='color:#ffb60f;'><strong>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5></strong>
            <small style='font-size:8pt;color:#ea7048'>Senin, 7 Januari 2015</small>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</p>
            </td>
           </tr>
          </table>
         </li>
         <li class="news-item">
          <table cellpadding="4">
           <tr>
            <td><img src="assets/images/kpl7.jpg" width='120' height='120'   style= "margin-right:4px">
            </td>
            <td><h5 style='color:#ffb60f;'><strong>
            Simulasi latihan perang bersama yang dilakukan di kapal induk yang modern </h5></strong>
            <small style='font-size:8pt;color:#ea7048'>Senin, 7 Januari 2015</small>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</p>
            </td>
           </tr>
          </table>
         </li>
         <li class="news-item">
          <table cellpadding="4">
           <tr>
            <td><img src="assets/images/kpl8.jpg" width='120' height='120'   style= "margin-right:4px">
            </td>
            <td><h5 style='color:#ffb60f;'><strong>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5></strong>
            <small style='font-size:8pt;color:#ea7048'>Senin, 7 Januari 2015</small>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</p>
            </td>
           </tr>
          </table>
         </li>
         <li class="news-item">
          <table cellpadding="4">
           <tr>
            <td><img src="assets/images/kpl9.jpg" width='120' height='120'   style= "margin-right:4px">
            </td>
            <td><h5 style='color:#ffb60f;'><strong>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5></strong>
            <small style='font-size:8pt;color:#ea7048'>Senin, 7 Januari 2015</small>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</p>
            </td>
           </tr>
          </table>
         </li>
         <li class="news-item">
          <table cellpadding="4">
           <tr>
            <td><img src="assets/images/kpl5.jpg" width='120' height='120'   style= "margin-right:4px">
            </td>
            <td><h5 style='color:#ffb60f;'><strong>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5></strong>
            <small style='font-size:8pt;color:#ea7048'>Senin, 7 Januari 2015</small>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</p>
            </td>
           </tr>
          </table>
         </li>
        </ul>
       </div>
      </div>
     </div>
     <div class="panel-footer" style="background-color:#E91E63">

     </div>
    </div>
   </div>
  </div> 
</div> 
<script type="text/javascript">
    $(function () {
        $(".demo1").bootstrapNews({
            newsPerPage: 3,
            autoplay: true,
   pauseOnHover:true,
            direction: 'up',
   navigation: false,
            newsTickerInterval: 4000,
            onToDo: function () {
                //console.log(this);
            }
        });
    });
</script>
<script src="assets/js/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>    
</body>
</html>



Share this:

Related Posts
Disqus Comments