Quantcast
Channel: How to get the blogger posts feed and to incorporate it to an HTML5 page? - Stack Overflow
Viewing all articles
Browse latest Browse all 2

How to get the blogger posts feed and to incorporate it to an HTML5 page?

$
0
0

I'm trying to get the data from the blogger and to put it on a HTML page.The code HTML code is the following:

<section class="colorlib-blog" data-section="blog"><div class="colorlib-narrow-content"><div class="row"><div class="col-md-6 col-md-offset-3 col-md-pull-3 animate-box" data-animate-effect="fadeInLeft"><span class="heading-meta">Read</span><h2 class="colorlib-heading">Recent Blog</h2></div></div><div class="row"><div class="col-md-4 col-sm-6 animate-box" data-animate-effect="fadeInLeft"><div class="blog-entry"><a href="blog.html" class="blog-img"><img src="images/blog-1.jpg" class="img-responsive" alt="HTML5 Bootstrap Template by colorlib.com"></a><div class="desc"><span><small>April 14, 2018 </small> | <small> Web Design </small> | <small> <i class="icon-bubble3"></i> 4</small></span><h3><a href="blog.html">Renovating National Gallery</a></h3><p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p></div></div></div><div class="col-md-4 col-sm-6 animate-box" data-animate-effect="fadeInRight"><div class="blog-entry"><a href="blog.html" class="blog-img"><img src="images/blog-2.jpg" class="img-responsive" alt="HTML5 Bootstrap Template by colorlib.com"></a><div class="desc"><span><small>April 14, 2018 </small> | <small> Web Design </small> | <small> <i class="icon-bubble3"></i> 4</small></span><h3><a href="blog.html">Wordpress for a Beginner</a></h3><p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p></div></div></div><div class="col-md-4 col-sm-6 animate-box" data-animate-effect="fadeInLeft"><div class="blog-entry"><a href="blog.html" class="blog-img"><img src="images/blog-3.jpg" class="img-responsive" alt="HTML5 Bootstrap Template by colorlib.com"></a><div class="desc"><span><small>April 14, 2018 </small> | <small> Inspiration </small> | <small> <i class="icon-bubble3"></i> 4</small></span><h3><a href="blog.html">Make website from scratch</a></h3><p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p></div></div></div></div><div class="row"><div class="col-md-12 animate-box"><p><a href="#" class="btn btn-primary btn-lg btn-load-more">Load more <i class="icon-reload"></i></a></p></div></div></div></section>

which generates the folloing part of the page:

enter image description here

I want to replace this data from this code with a blogger content ... so I'm getting the link for the blogger.

I have to get the images thumbnail of the post the name of the post the link of the posts and a description of the post to put on this html code.

The code to get the data from the blogger is the folloing:

<html><div id="demo"></div><script>function getPosts(json) {    var list = [];    var data = json.feed.entry;    for (var i = 0; i < data.length; i++) {        var img = data[i].media$thumbnail ? "<img src'"+ data[i].media$thumbnail.$t +"'>" : "";        list.push("<div><a href='"+ data[i].link.pop().href +"'>"+ img + data[i].title.$t +"</a></div>");    }    document.getElementById('demo').innerHTML = list.join('');}</script><script src="https://www.blogger.com/feeds/614640065733671379/posts/default?alt=json&max-results=3&callback=getPosts"></script></html>

But it gives just the links of the posts as this:

teste3teste 2Teste

Thanks very much


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images