Copy this code and use in your website
<style>
.fetched-posts {
font-family: inherit;
font-size: 12px;
}
ul {
list-style: disc;
padding: 0px;
}
.fetched-posts li {
list-style: none;
background: #F7F7F7;
padding: 5px 0px;
margin-bottom: 0px;
border-bottom: 1px solid gainsboro;
}
.fetched-posts a {
color: #000;
font-weight: 500;
}
.fetched-posts p {
font-size: 12px;
display:none;
}
</style>
<!-- This element will be populated with the data. -->
<img style="text-align:center; margin: 0 auto;" src="https://www.londontimes.live/wp-content/uploads/2020/06/London-03.jpg"/>
<h5 style="text-align:center;font-family:sintony;">London Times News</h5>
<div id="anr-posts">
</div>
<p style="text-align:right;font-family:sintony;font-size:13px;"><a href="https://www.londontimes.live/">View all news</a></p>
<!-- Do not add jquery library if already included in the website. -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Code to fetch latest posts from AustralianNationalReview.com -->
<script>
;(function( $ ){
var $elem = $('#anr-posts');
// You can change number of posts to be pulled here.
var number = 5;
$.get('https://www.londontimes.live/wp-json/wp/v2/posts?per_page=' + number, function( data ) {
var html = anr_latest_posts( data );
$elem.html( html );
});
function anr_latest_posts( data ) {
var html = "<div class='fetched-posts'><ul>";
$.each( data, function( i, v ){
var title = v.title.rendered;
var link = v.link;
var excerpt = v.excerpt.rendered;
html += "<li>";
html += "<a href='"+link+"' rel='noopener noreferrer' target='_blank'>"+title+"</a>";
html += "<div>"+ excerpt +"</div>";
html += "</li>";
} );
html += "</ul></div>";
return html;
}
})(jQuery);
</script>