customBlogFeed.html

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
	#customBlogFeed {
		display: flex;
		flex-flow: column-reverse;
	}
	.dim {
	font-size: 8pt;
	margin-left: 20px;
   
	}
	.continueReading, .blog-category {
		display: block;
		margin-top: 12px;
		text-align: right;
		
	}
	.loading {
		max-height: 300px;
		overflow: hidden;
	}
	
#blogSpin {
	display: none;
	}	
.loading #blogSpin {
	display: block;
	background-color:  white;
	font-size: 6rem;
	text-align: center;
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 99;
}
</style> 
<link href="/741144823.css" rel="stylesheet" type="text/css">
<!--load latest post each from specific blogs-->
<section id="customBlogFeed" class="loading">
<div id="blogSpin"><i class="fa fa-spin fa-spinner"></i></div>
	<article id="SWS" class="blogCat">
		<a class="blog-category" href="/Blog.aspx?CID=7">Statewide Online Services News</a>
	<div class="content"></div>
	</article>


	<article id="KGI" class="blogCat">
		<a class="blog-category" href="/Blog.aspx?CID=9">KGI Online Library</a>
	<div class="content"></div>
	</article>
		<article id="RefDesk" class="blogCat">
		<a class="blog-category" href="/Blog.aspx?CID=6">From The Reference Desk</a> 
	<div class="content" class="blogCat"></div>
	</article>
	<article id="TBT" class="blogCat">
	<a class="blog-category" href="/Blog.aspx?CID=10">Talking Books Talk</a>
	<div class="content" ></div>
	</article>
	<article id="LN" class="blogCat">
		<a class="blog-category" href="/Blog.aspx?CID=8">Librarian News</a>
	<div class="content" ></div>
	</article>

<p class="dim"><a href="/Blog.aspx" title="blog page" alt="blog page">View All Blogs</a></p>
</section>
<script type="text/javascript">
(function() {
	document.addEventListener('DOMContentLoaded', function() {
	//load each latest entry into its respective container

		$('#RefDesk .content').load('/Blog.aspx?CID=6 .entry:first');
		$('#KGI .content').load('/Blog.aspx?CID=9 .entry:first');
		$('#TBT .content').load('/Blog.aspx?CID=10 .entry:first');
		$('#LN .content').load('/Blog.aspx?CID=8 .entry:first');
		$('#SWS .content').load('/Blog.aspx?CID=7 .entry:first');
		
		//do a little sleight-of-hand to get these sorted by date published, newest to oldest		
		$( document ).ajaxComplete(function() { $('.blogCat .date').each(function() { var pubDate = this.textContent + "2018"; pubDate = (Date.parse(pubDate) / 100000); $(this).closest('article').css('order', pubDate.toString());  }); })
		});
	$( document ).ajaxStop(function() {  $('#customBlogFeed').removeClass('loading'); } );
	})();

</script> <!--end current format-->