Membuat Live RSS Reader mengunakan Jquery

sebelum membuat tutorial saya akan perkenalkan tentang RSS, RSS adalah singkatan dari Really Simple Sindication, RSS itu sendiri berupa file beformat xml yang telah digunakan pada webblog, dengan mengunakan RSS kita dapat melihat update terbaru pada website favorit.

nah bagaimana cara menambahkan RSS website favorit kita pada web/blog kita?

1. file yang wajib di include pada script live RSS

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script> <script src="//dl.dropboxusercontent.com/u/4286417/jquery.rss.js"></script>

2. styling theme pada RSS

input[type='button']{
  background:#e74c3c;
  border:none;
  color:#fff;
  height:50px;
  position:relative;
  left:-10px;
  top:-3px;
  cursor:pointer;
}
#rss-wrap{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 60vw;
  margin: 0 auto;
}
.entry_link{
  text-decoration: none;
  color: #333333;
}
.entry_date{
  font-size: 0.85em;
  margin-bottom: 5px;
}
.entry_img > img{
  display: inline-block;
  width: 120px;
  float:left;
  margin: 0 15px 0 0;
}
.entry_title{
  display: inline;
  float: none;
}
.entry_by{
  display:none;
}
.entry_details{
  margin-top: 10px;
  font-size: 0.85em;
}
.entry_index{
  font-size: 0.75em;
  float:right;
  margin: 0 5px 0 0;
  background:#c0392b;
  color:#fff;
  padding:5px;
}
#rss-header{
  font-family: Open Sans, sans-seriff;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  padding: 0 0 0 10px;
  background-color: #eaeaea;
  color: #333333;
  overflow:hidden;
  hight:50px;
  margin-bottom:-3px;
}
#rss-title{
  display: inline-block;
  font-size: 30px;
}
#current-feed{
  display: inline-block;
  float: right;
  font-size: 12px;
  margin: 1em;
}
#rss-container{
  font-size: 16px;
}
#rss-container > ul{
  list-style-type: none;
  margin:  0;
  padding: 0;
  display: inline-block;
  width: 100%;
}
.entry, .entry2{
  background-color:#ecf0f1;
  font-family: 'Roboto', sans-serif;
  font-size: 0.8em;
  left: 0;
  padding: 5px 0 35px 5px;
  cursor: pointer;
  overflow:hidden;
  padding:15px;


}
.entry2{
  background-color: #ecf0f1;
}
.entry:hover,entry2:hover{
  background-color: #eaeaea;
  border-left:5px solid #e74c3c;
  -webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.entry:active{
  background-color:#bdc3c7;
}
/* CSS QUERIES*/
@media (max-width: 750px){
  #current-feed{
    display:none;
  }
}
@media (max-width:500px){
  #rss-title{
    font-size: 0.95em;
  }
  .entry_img > img {
    width: 40px;
  }
}
@media (max-width:400px){
  #rss-container{
    font-size: 12px;
  }
}

3. memasukkan custom script untuk meload data rss website lain

function load_rss(){  $("#rss-container").html("");  $("#rss-container").rss("http://rss.detik.com", {     limit: 6,     ssl: true,     effect: 'show',     dateFormat: 'MMMM DD, YYYY',     entryTemplate:     "<a class='entry_link' href='{url}' target='_blank'>\       <div class='entry animated fadeIn'>\         <div class='entry_date'>\           Submitted: {date}\           <span class='entry_by'>by: {author}</span>\           <span class='entry_index'>#{index}</span>\         </div>\         <div class='entry_img'>\           {teaserImage}\         </div>\         <div class='entry_title'>\           {title}\         </div>\         <div class='entry_details'>{shortBody}</div>\       </div>\     </a>",     error: function(error){       console.log(error);     },     onData: function(data){       $("#current-feed").text("Current feed: "+"detik.com"); // Change this later     }   },function(){     $(".entry").each(function(index){       if(index%2!=0) $(this).addClass("entry2"); // Fix this later with css     });   }); }
$(function(){   load_rss(); });



pada bagian yang ditandai berwarna merah merupakan file xml atau rss website detik.com, kita juga dapat menagtur jumlah artikel yang akan ditampilkan, untuk lebih jelasnya lihat demo dibawah ini

DEMO

See the Pen Live RSS Reader by Budi Setiawan (@bizanniusz) on CodePen.