Pusat Ilmu Secara Detil

Create News Ticker with Jquery and Bootsrap

Create News Ticker with Jquery and Bootsrap

In the news website, the constantly update news is important thing to attract more visitor to such website. You can see,many news websites provide much news with various topics. The primary concern of each visitor is different. But all of visitor of course want to know what's is the new news?.  Usually, they apply newsticker both vertically or horinzontally in their website.

In this tutorial, we implemented a newsticker with jquery and bootstrap vertically . You can download the whole source code at the most link bottom. You can even try our demo earlier in link "Live Preview" before downloading.


Step 1

Firstly, we design main layout with navigation bar. You can create your own layout. The file is named newsbreaking.html which contain source as follow :
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Bootstrap vertical newsticker </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> 
</body>
</html>

Step 2 

In this step, we add news content on the layout that will be set as a news ticker. In this example the source code place after navbar :
<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>


Step 3 

We implement the animation of newsticker with a function jquery as well as its library. The source code as follow :
<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>

Share this:

You Might Also Like:

Disqus Comments