Encontré en la web "Breaking News" una demostración o ejemplo que se ve muy interesante, pero existen unas dudas que desearía que me puedan explicar:
- ¿Como funciona este sistema?
- ¿Como lo puedo integrar para mi propio dominio para que en el se muestre mis noticias como se muestra en el script?
Tengo datos de las noticias registrada en la base de datos o este, solo funciona para blogspot.
¿Me pueden explicar como puedo usarlo?.
Este es el código completo, también esta aquí en https://jsfiddle.net/a8bz26eh/
$(document).ready(function() {
var e = "https://lunafy.blogspot.com",
t = 20;
$.ajax({
url: "" + e + "/feeds/posts/default?alt=json-in-script&max-results=" + t,
type: "get",
dataType: "jsonp",
success: function(e) {
function t() {
$("#adbreakingnews li:first").slideUp(function() {
$(this).appendTo($("#adbreakingnews ul")).slideDown()
})
}
var n, r, s = "",
a = e.feed.entry;
if (void 0 !== a) {
s = "<ul>";
for (var l = 0; l < a.length; l++) {
for (var o = 0; o < a[l].link.length; o++)
if ("alternate" == a[l].link[o].rel) {
n = a[l].link[o].href;
break
}
r = a[l].title.$t, s += '<li><a href="' + n + '" target="_blank">' + r + "</a></li>"
}
s += "</ul>", $("#adbreakingnews").html(s), setInterval(function() {
t()
}, 5e3)
} else $("#adbreakingnews").html("<span>No result!</span>")
},
error: function() {
$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")
}
})
});
/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
* {
margin: 0px;
padding: 0px;
}
body {
background: #e6e6e6;
width: 100%;
height: 100%;
font: 12px "Open Sans", sans-serif;
}
#wrapper {
width: 50%;
height: 560px;
overflow: hidden;
margin: 20px auto;
background: #fff;
border: 1px solid #c6c6c6;
}
div.screen {
height: 560px;
overflow: hidden;
background: transparent;
margin: 15px;
}
.list {
margin-top: 36px;
text-align: left;
}
.item {
height: 115px;
margin-left: 115px;
clear: both;
}
.item .img, .item span {
background: #f0f0f0;
}
.item .img {
float: left;
width: 96px;
height: 81px;
margin-left: -113px;
}
.item span {
height: 11px;
width: 320px;
margin-bottom: 19px;
float: left;
}
.item span:nth-of-type(3) {
width: 95px;
margin-bottom: 0;
}
a:link {
color: #e76e66;
text-decoration: none;
outline: none;
transition: all 0.25s;
}
a:visited {
color: #666;
text-decoration: none;
}
a:link:hover {
color: #666;
text-decoration: none;
}
a:visited:hover {
color: #e76e66;
text-decoration: none;
}
/* CSS Breaking News */
#breakingnews {
margin: 15px;
height: 38px;
line-height: 26px;
overflow: hidden;
background: #fff;
border: 1px solid #e6e6e6;
}
#breakingnews .breakhead {
position: absolute;
background: none repeat scroll 0 0 #444;
color: #fff;
display: block;
float: left;
font-family: inherit;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
padding: 6px 12px;
}
#adbreakingnews li a {
font-family: inherit;
font-weight: 400;
color: #666;
margin-top: 10px;
transition: all 0.5s ease-in-out;
}
#adbreakingnews li a:hover {
color: #359bed;
}
#adbreakingnews {
float: left;
margin-left: 50px;
margin-top: 6px;
}
#adbreakingnews ul,#adbreakingnews li {
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width:768px) {
#wrapper {
width: 80%;
};
}
<div id="wrapper">
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'></i></span>
<div id='adbreakingnews'>Loading...</div>
</div>
<div class="screen">
<div class="list">
<div class="item">
<div class="img"></div>
<span></span>
<span></span>
<span></span>
</div>
<div class="item">
<div class="img"></div>
<span></span>
<span></span>
<span></span>
</div>
<div class="item">
<div class="img"></div>
<span></span>
<span></span>
<span></span>
</div>
<div class="item">
<div class="img"></div>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' />
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>