Rss Reader With JQuery

Plugin 1 by FeedEK http://jquery-plugins.net/FeedEk/FeedEk.html Plugin 2 by Desandro http://masonry.desandro.com/

by Bagus Ahmad Setiawan

HTML

<script src="https://googledrive.com/host/0BxlJMO68thzAOXFzM3BSRUgyakk/FeedEk.js"></script>
<script src="http://momentjs.com/downloads/moment-with-langs.min.js"></script>
<div id="feed-masonry"></div>

CSS

#feed-masonry {
    width: auto;
    height: 100%;
    background: #e2e2e2;
    padding: 10px;
    align-content: center;
}

#feed {
    max-width: 660px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 15px 15px;
    -webkit-transition-duration: 300ms;
    -moz-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    transition-duration: 300ms;
    -webkit-transition-property: box-shadow;
    -moz-transition-property: box-shadow;
    -o-transition-property: box-shadow;
    transition-property: box-shadow;
    border-bottom: 2px #c39 solid;
    background-color: #FFFFFF;
    margin-left: 23%;
}
#feed:hover, .feedEkList li:hover {
    -webkit-box-shadow: 0 0 3px 1px rgba(72,46,102,.3);
    -moz-box-shadow: 0 0 3px 1px rgba(72,46,102,.3);
    box-shadow: 0 0 3px 1px rgba(72,46,102,.3);
}

.feedEkList li:hover {
    -webkit-transition-duration: 300ms;
    -moz-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    transition-duration: 300ms;
    -webkit-transition-property: box-shadow;
    -moz-transition-property: box-shadow;
    -o-transition-property: box-shadow;
    transition-property: box-shadow;
}

.feedEkList {
    max-width: 660px;
    list-style: none outside none;
    background-color: #FFFFFF;
    border: 1px solid transparent;
    padding: 4px 6px;
    color: #3E3E3E;
}

.feedEkList li {
    border-bottom: 1px solid #D3CAD7;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.feedEkList li:last-child {
    border-bottom: none;
}

.itemTitle a {
    font-weight: bold;
    color: #4EBAFF !important;
    text-decoration: none;
}

.itemTitle a:hover {
    text-decoration: underline;
}

.itemDate {
    font-size: 11px;
    color: #AAAAAA;
}

JavaScript

$(document).ready(function() {
    $("#feed-masonry").append("<div id='feed'></div>").ready(function () {
    $('#feed').FeedEk({
       FeedUrl:'https://www.youtube.com/rss/user/TheTeramatSangat/feed',
       MaxCount : 10,
       ShowDesc : true,
       ShowPubDate:true,
       TitleLinkTarget:'_blank',
       DateFormat: 'LLLL',
       DateFormatLang:'id'
    });
    });
});