Пишем наше тело:
Пишем стиль:
И простой jquery:
Смотрим наш результат:
HTML:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/4286417/jquery.rss.js"></script>
<div id='rss-wrap'>
<div id='rss-header'>
<div id='rss-title'>
<input type="button" onclick='load_rss()' value='Update'> Live RSS-Reader
</div>
<div id='current-feed'></div>
</div>
<div id='rss-container' class=''></div>
</div>
CSS:
body{
background-color: #D9D9D9;
}
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;
}
}
JavaScript:
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);
},
},function(){
$(".entry").each(function(index){
if(index%2!=0) $(this).addClass("entry2"); // Fix this later with css
});
});
}
$(function(){
load_rss();
});