Step 1. create a simple static content region with a static ID of your choice.
In my example this is region with ID set to Blog_region.
Step 2. Add this to your HTML page header
<script type="text/javascript" src="r/ls/files/static/v169/google_jspi.js"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var resultLimit = 5;
var blogURL = 'http://lschilde.blogspot.com/feeds/posts/full?max-results='+ resultLimit;
var feed = new google.feeds.Feed(blogURL);
feed.setNumEntries(resultLimit); //this restics how many rows to return
feed.load(function(result) {
if (!result.error) {
var HTML_content = '<div class="row"> <div id="leftcol">';
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var publishedDate = entry.publishedDate;
var title = entry.title;
if(title.length == 0){
var field = entry.content;
var title = field.substr(115, field.indexOf("</span></h2><h3 ")-115);
entry.content = entry.content.replace(title, "");
//alert(title);
}
HTML_content += '<article class="post"><div><h3 class="post_title"><a href="'
+ entry.link
+ '" target="_blank">'
+ title
+'</a></h3> <div><i class="fa-time"></i> '
+ entry.publishedDate
+' </div></div><div>'
+ entry.content
+ '<br><a href="'
+ entry.link
+ '" target="_blank" class="btn btn-primary">Read More</a> </div> </article> ';
}//end loop
HTML_content += '</div> </div>';
//add this feed html code to APEX REGION
$("#Blog_region").append(HTML_content);
}
});
}
google.setOnLoadCallback(initialize);
</script>
Together with this CSS:
article.post .post_title .btn {
margin-top: 30px;
}
.btn-primary {
background-color: #428bca;
border-color: #357ebd;
color: #ffffff;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: normal;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
a {
color: #428bca;
text-decoration: none;
}
BLOG READ STARTS HERE!