Untitled

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

<!--Created By Wafa Rifki Anafin-->
<!--Developed By Faceindo, Inc-->
<!--Copyright This File To Faceindo, Inc-->
<!--Copyright Content To All Radio Providers-->

  </head>

<script
  src="https://code.jquery.com/jquery-2.1.3.min.js"
  integrity="sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM="
  crossorigin="anonymous"></script>


  <style>
    * {
      box-sizing: border-box;
    }

    video {
      width: 100%;
      height: 40px;
    }

ul,li { list-style-type: none;
        list-style-position:inside;
        margin-bottom:5px;
        padding:0; }

    .card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  padding: 10px;
  text-align: left;
  background-color: #e74c3c;
  border-radius: 10px

}


h4 {
  font-family: "Arial", Helvetica, sans-serif;
  color: #f5f5f5;
}

.list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list li {
    position: relative;;
}

button {
border-radius: 8px;
padding: 10px 24px;
background-color: #f44336;
text-align: center;
  text-decoration: none;
  outline: none;
  color: #f5f5f5;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

button:hover {
border-radius: 8px;
padding: 10px 24px;
background-color: #f5f5f5 ;
text-align: center;
  text-decoration: none;
  outline: none;
  color: #f44336;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}


    </style>


<body>

<div class="wrapper">

<ul class="list">
    <li><div class="card">
        <h4>
            1. Radio Rodja FM
                                             </h4>
          <video controls="" name="media"><source

src="http://live.radiorodja.com:80/;stream.mp3" type="audio/mpeg"></video>
      </div>
</li>


    <li><div class="card">
        <h4>
            2. Elshinta FM
                                             </h4>
          <video controls="" name="media"><source src="http://202.137.4.147:8000/;"

type="audio/mpeg"></video>
      </div></li>


 <li> <div class="card">
        <h4>
            3. Nagaswara FM Bogor
                                             </h4>
          <video controls="" name="media"><source

src="http://bogor.nagaswarafm.com:8088/stream" type="audio/mpeg"></video>
      </div></li>

    <li> <div class="card">
        <h4>
            4. Radio Muslim FM
                                             </h4>
          <video controls="" name="media"><source

src="http://live.radiomuslim.com/;stream/1/" type="audio/mpeg"></video>
      </div></li>


    <li> <div class="card">
        <h4>
            5. Prambors Jakarta FM
                                             </h4>
          <video controls="" name="media"><source src="http://masima.rastream.com/masima-

pramborsjakarta?" type="audio/mpeg"></video>
      </div>
</li>


    <li> <div class="card">
        <h4>
            6. PAS FM Pati
                                             </h4>
          <video controls="" name="media"><source src="http://45.64.97.82:8886/aac?

type=http&nocache=1" type="audio/mpeg"></video>
      </div></li>


    <li> <div class="card">
        <h4>
            7. Cosmopolitan FM
                                             </h4>
          <video controls="" name="media"><source src="http://ample-

09.radiojar.com/u7d8heq3bnzuv?rj-ttl=5&rj-tok=AAABcDVVLwsAnQGndC_j-9VgUQ"

type="audio/mpeg"></video>
      </div></li>

<li><div class="card">
                <h4>
                   8. Kpop Radio Live
                                 </h4>
                  <video controls="" name="media"><source

src="https://streamer.radio.co/s06b196587/listen" type="audio/mpeg"></video>
              </div></li>

<li><div class="card">
                <h4>
                   9. Radio Pemuda FM
                                 </h4>
                  <video controls="" name="media"><source

src="http://199.167.134.163:7014/;" type="audio/mpeg"></video>
              </div></li>


      <li><div class="card">
        <h4>
           10. iRadio FM Makassar
                                             </h4>
          <video controls="" name="media"><source

src="http://cloudstreaming.mramedia.com:8008/live" type="audio/mpeg"></video>
      </div></li>


<li><div class="card">
        <h4>
           11. Radio Berita Klasik FM
                                             </h4>
          <video controls="" name="media"><source src="http://i.klikhost.com:9030/;"

type="audio/mpeg"></video>
      </div></li>


<li><div class="card">
        <h4>
            12. Geronimo Jogja FM
                                             </h4>
          <video controls="" name="media"><source

src="http://live2.indostreamserver.com:8018/;" type="audio/mpeg"></video>
      </div></li>


<li><div class="card">
        <h4>
            13. Denger Musik Indonesia FM
                                             </h4>
          <video controls="" name="media"><source src="http://stream.denger.in:8888/dmi"

type="audio/mpeg"></video>
      </div></li>


<li><div class="card">
        <h4>
            14. Female Radio FM                                             </h4>
          <video controls="" name="media"><source src="http://masima.rastream.com/masima-

femaleradio" type="audio/mpeg"></video>
      </div></li>


<li><div class="card">
        <h4>
            15. Delta FM </h4>
          <video controls="" name="media"><source src="http://live.deltafm.net:9002/;"

type="audio/mpeg"></video>
      </div></li>


<li><div class="card">
        <h4>
          16. Radio Dahlia FM Bandung                                        </h4>
          <video controls="" name="media"><source src="http://dahlia-

fm.simaya.net.id:1060/;" type="audio/mpeg"></video>
      </div></li>


<li><div class="card">
        <h4>
           17. Radio Dangdut FM                                             </h4>
          <video controls="" name="media"><source src="http://202.147.199.99:8000/;"

type="audio/mpeg"></video>
      </div></li>


<li><div class="card">
        <h4>
           18. RRI Pro 3 Jakarta FM                                             </h4>
          <video controls="" name="media"><source

src="http://streaming.rri.co.id:9014/web-kbrn.mp3" type="audio/mpeg"></video>
      </div></li>


<li><div class="card">
            <h4>
              19.  Bahana FM
            </h4>
              <video controls="" name="media"><source src="http://103.16.199.177:8102/;"

type="audio/mpeg"></video>
          </div></li>


<li><div class="card">
              <h4>
                20.  TraxFM
              </h4>
                <video controls="" name="media"><source

src="http://n08.radiojar.com/rrqf78p3bnzuv?rj-ttl=5&rj-tok=AAABcDVonNkAv3mWqaJGm1KD2g"

type="audio/mpeg"></video>
            </div></li>


<li><div class="card">
                <h4>
                   21. Sindo Trijaya FM
                                 </h4>
                  <video controls="" name="media"><source

src="http://202.147.199.101:8000/;stream.nsv" type="audio/mpeg"></video>
              </div></li>


<li><div class="card">
                <h4>
                   22. Kompas Sonora Jakarta FM
                                 </h4>
                  <video controls="" name="media"><source

src="http://103.226.246.245/kompas-sonorajakarta" type="audio/mpeg"></video>
              </div></li>


<li><div class="card">
                <h4>
                   23. Kiss FM Semarang
                                                   </h4>
                  <video controls="" name="media"><source

src="http://103.28.148.18:8070/;stream.nsv" type="audio/mpeg"></video>
              </div></li>


<li><div class="card">
                  <h4>
                     24. Urban Radio Bandung FM
                  </h4>
                    <video controls="" name="media"><source

src="http://radio.melsa.net.id:8050/urban" type="audio/mpeg"></video>
                </div></li>


<li><div class="card">
                <h4>
                   25. Elgangga FM Bekasi
                                 </h4>
                  <video controls="" name="media"><source

src="http://103.28.148.18:8174/;" type="audio/mpeg"></video>
              </div></li>


<li><div class="card">
                <h4>
                   26. Matrix FM Ponorogo
                                 </h4>
                  <video controls="" name="media"><source

src="http://live.radiomatrixfm.com:8000/;" type="audio/mpeg"></video>
              </div></li>

<li><div class="card">
        <h4>
           27. iRadio FM Jakarta
                                             </h4>
          <video controls="" name="media"><source

src="http://stream.radiojar.com:80/4ywdgup3bnzuv" type="audio/mpeg"></video>
      </div></li>


      <li><div class="card">
        <h4>
           28. OZ Radio Jakarta
                                             </h4>
          <video controls="" name="media"><source src="http://45.64.97.211:9080/;stream/1"

type="audio/mpeg"></video>
      </div></li>


         </ul>
<center>
  <button id="next">Tampilkan Saluran Lain</button>
</center>
</div>

</body>
<script>$(document).ready(function(){

      var list = $(".list li");
      var numToShow = 3;
      var button = $("#next");
      var numInList = list.length;
      list.hide();
      if (numInList > numToShow) {
        button.show();
      }
      list.slice(0, numToShow).show();

      button.click(function(){
          var showing = list.filter(':visible').length;
          list.slice(showing - 1, showing + numToShow).fadeIn();
          var nowShowing = list.filter(':visible').length;
          if (nowShowing >= numInList) {
            button.hide();
          }
      });

});</script>
</html>