Latest Posts Widget

Developer
Andres
Size
3,059 Kb
Views
24,288
  1. Latest Posts Widget Previews
  2. Latest Posts Widget HTML Codes
  3. Latest Posts Widget CSS Codes

How do I make an latest posts widget?

Responsive "Latest Posts" widget with HTML5 semantics and transition on hover states.. What is a latest posts widget? How do you make a latest posts widget? This script and codes were developed by Andres on 26 August 2022, Friday.

Latest Posts Widget Previews
IQ Test

Latest Posts Widget - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Latest Posts Widget</title> <meta name="viewport" content="width=device-width, initial-scale =1.0, user-scalable= no" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900,400italic);
/*------------------------------------
Baseline Grid: 1.5rem
Modular Scale: 1:1.33 Perfect Fourth
--------------------------------------*/
body {	background: #f7f7f7;	color: #353535;
}
h1 {	font: 900 1.77rem/3rem 'Source Sans Pro';
}
h2 {	font: 900 1.33rem/1.5rem 'Source Sans Pro';
}
h2 a {	color: inherit;	text-decoration: none;
}
p {	font: 400 1rem/1.5rem 'Source Sans Pro';
}
p a {	color: #3b89c9;	font-style: italic;	text-decoration: none;
}
time {	font-size: 0.75rem;
}
hr {	border: none;
}
.recent_posts {	background: #fff;	margin: 0 auto;	padding: 1rem;	position: relative;	top: 1.5rem;	width: 80%;
}
.recent_posts article {	background: none;	border-radius: 5px;	padding: 0.5rem;
}
.recent_posts header h2, .recent_posts p a {	color: #3b89c9;
}
.recent_posts hr {	background: #dfe2e7;	height: 1px;	width: 100%;
}
.recent_posts time {	display: block;
}
.recent_posts header h2 a:active, .recent_posts p a:active {	color: #ffde16;
}
@media all and (min-width: 400px) {	.recent_posts {	min-width: 20rem;	width: 66%;	}	.recent_posts time {	display: inline;	}	.recent_posts article {	transition: all .3s ease-in-out;	z-index: 1;	}	.recent_posts header h2 a, .recent_posts p a {	transition: all .3s ease-in-out;	}	.recent_posts time:before {	content: "|";	font-size: 1rem;	margin: 0 3px;	}	.recent_posts article:hover {	color: #fff;	background: #0e3144;	}	.recent_posts article:hover > header h2, .recent_posts article:hover > p a {	color: #ee4035;	}	.recent_posts header h2 a:hover, .recent_posts article p a:hover {	color: #ffde16;	z-index: 2;	}
}
@media all and (min-width: 600px) {	.recent_posts {	max-width: 40rem;	min-width: 24.75rem;	width: 33%;	}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="recent_posts">	<header>	<h1>Latest Posts</h1>	</header>	<hr />	<article>	<header>	<h2><a href="#">Post 1</a></h2>	</header>	<p>	<span>by</span>	<a href="#" class="author">Author</a>	<time datetime="" pubdate>Day Month Year, Time</time>	</p>	</article>	<hr />	<article>	<header>	<h2><a href="#">Post 2</a></h2>	</header>	<p>	<span>by</span>	<a href="#" class="author">Author</a>	<time datetime="" pubdate>Day Month Year, Time</time>	</p>	</article>	<hr />	<article>	<header>	<h2><a href="#">Post 3</a></h2>	</header>	<p>	<span>by</span>	<a href="#" class="author">Author</a>	<time datetime="" pubdate>Day Month Year, Time</time>	</p>	</article>	<hr />	<article>	<header>	<h2><a href="#">Post 4</a></h2>	</header>	<p>	<span>by</span>	<a href="#" class="author">Author</a>	<time datetime="" pubdate>Day Month Year, Time</time>	</p>	</article>	</section>
</body>
</html>

Latest Posts Widget - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900,400italic);
/*------------------------------------
Baseline Grid: 1.5rem
Modular Scale: 1:1.33 Perfect Fourth
--------------------------------------*/
body {	background: #f7f7f7;	color: #353535;
}
h1 {	font: 900 1.77rem/3rem 'Source Sans Pro';
}
h2 {	font: 900 1.33rem/1.5rem 'Source Sans Pro';
}
h2 a {	color: inherit;	text-decoration: none;
}
p {	font: 400 1rem/1.5rem 'Source Sans Pro';
}
p a {	color: #3b89c9;	font-style: italic;	text-decoration: none;
}
time {	font-size: 0.75rem;
}
hr {	border: none;
}
.recent_posts {	background: #fff;	margin: 0 auto;	padding: 1rem;	position: relative;	top: 1.5rem;	width: 80%;
}
.recent_posts article {	background: none;	border-radius: 5px;	padding: 0.5rem;
}
.recent_posts header h2, .recent_posts p a {	color: #3b89c9;
}
.recent_posts hr {	background: #dfe2e7;	height: 1px;	width: 100%;
}
.recent_posts time {	display: block;
}
.recent_posts header h2 a:active, .recent_posts p a:active {	color: #ffde16;
}
@media all and (min-width: 400px) {	.recent_posts {	min-width: 20rem;	width: 66%;	}	.recent_posts time {	display: inline;	}	.recent_posts article {	transition: all .3s ease-in-out;	z-index: 1;	}	.recent_posts header h2 a, .recent_posts p a {	transition: all .3s ease-in-out;	}	.recent_posts time:before {	content: "|";	font-size: 1rem;	margin: 0 3px;	}	.recent_posts article:hover {	color: #fff;	background: #0e3144;	}	.recent_posts article:hover > header h2, .recent_posts article:hover > p a {	color: #ee4035;	}	.recent_posts header h2 a:hover, .recent_posts article p a:hover {	color: #ffde16;	z-index: 2;	}
}
@media all and (min-width: 600px) {	.recent_posts {	max-width: 40rem;	min-width: 24.75rem;	width: 33%;	}
}
Latest Posts Widget - Script Codes
Latest Posts Widget - Script Codes
Home Page Home
Developer Andres
Username Angelfire
Uploaded August 26, 2022
Rating 3
Size 3,059 Kb
Views 24,288
Do you need developer help for Latest Posts Widget?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andres (Angelfire) Script Codes
Name
CSS3 animated Pricing tables
Social Media Button
Array vs object
Calendar Widget
Collection CSS3 buttons
Threaded Chat
JQuery Payment
Food Widget by Andreea Nicolaescu
Flexbox Admin Template
Angular responsive comment system
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!