Post List Item

Developer
Michael Goldspinner
Size
5,280 Kb
Views
44,528
  1. Post List Item Previews
  2. Post List Item HTML Codes
  3. Post List Item CSS Codes
  4. Post List Item JS Codes

How do I make an post list item?

This is a mirrored code from my website for my post list itemsI am redesigning the 'post items' that appear in my blog list. The first one is my last design, the second one is what I am working toward.. What is a post list item? How do you make a post list item? This script and codes were developed by Michael Goldspinner on 07 July 2022, Thursday.

Post List Item Previews
IQ Test

Post List Item - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Post List Item</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <li class="emgo2015 old-post-item">	<a name="WP-reset">	<time class="old-pli-date">	<div class="old-pli-date-month">Jun</div>	<div class="old-pli-date-day">14th</div>	</time>	<div class="old-pli-text">	<h4 class="old-pli-text-title">Easy WordPress Re-install</h4>	<p class="old-pli-text-content">If you've done something wrong during your installation of Wordpress, or have some overlapping mistakes which add up to too much frustration and want a clean wipe, here is how you do it....</p>	</div>	</a>	<a class="old-pli-goto-full" title="Go to Full Post" target="_top" href="http://www.michaelgoldspinner.website/Emgo/me/posts/web/full/wp-reset.php"></a>
</li>
<hr class="item-break">
<li class="post-item">	<time class="pli-date">	<h2 class="pli-date-month">Nov</h2>	<h4 class="pli-date-day">16th</h4>	</time>	<div class="pli-text">	<div class="pli-text-title">	<h4>Making of a Media Slider</h4>	</div>	<div class="pli-text-content">	<p>So several weeks ago I was working on the website for OTW (I'll refer to it as that from now on) and after searching around the internet for research, I came across one of their biographies.....</p>	</div>	</div>	<div class="pli-actions">	<a></a>	<a></a>	</div>
</li> <script src="js/index.js"></script>
</body>
</html>

Post List Item - Script Codes CSS Codes

body { padding: 10% 20%;
}
.item-break { float: none; border: solid 5px #aaa; margin: 4em auto; width: 20%; min-width: 100px;
}
.item-break::before { content: "Old"; position: relative; display: block; font-weight: bold; color: #666; transform: translate(40%, -125%);
}
.item-break::after { content: "New"; position: relative; display: block; font-weight: bold; color: #666; transform: translate(40%, -60%);
}
.emgo2015.old-post-item { cursor: pointer; transition: background-color 1.5s, border 0.5s; display: inline-block; list-style: none; overflow: visible; border-top: solid 1px transparent; border-right: solid 1px transparent; border-bottom: solid 1px transparent; min-width: 600px; width: 100%; width: 70%; height: auto; margin: 15px 0 30px 0; margin: -5px 5px;
}
.old-post-item:hover { border-right: solid 1px black;
}
.old-post-item:hover .old-pli-date { background-color: black; background-color: #F3B66D; color: white;
}
.old-post-item a { cursor: pointer; display: block; overflow: auto;
}
.old-post-item time.old-pli-date { transition: background-color 0.25s, color 0.25s; float: left; clear: right; text-align: center; border-right: solid 1px black; width: 80px; min-height: 100px; padding: 0.5em;
}
.old-post-item time.old-pli-date .old-pli-date-month { font-size: 35px;
}
.old-post-item .old-pli-text { float: left; width: 80%; margin-left: 5px; padding: 0.5em;
}
.old-post-item h4.old-pli-text-title { font-family: Giorgio; font-size: 20pt; font-weight: bold; width: 80%; margin: 0;
}
.old-post-item p.old-pli-text-content { overflow: hidden; font-family: Caviar Dreams; font-size: 10pt; margin: 5px 0;
}
@-webkit-keyframes goto { 0% { transform: translateX(0px); } 50% { transform: translateX(10px); } 100% { transform: translateX(0px); }
}
@-moz-keyframes goto { 0% { transform: translateX(0px); } 50% { transform: translateX(10px); } 100% { transform: translateX(0px); }
}
@keyframes goto { 0% { transform: translateX(0px); } 50% { transform: translateX(10px); } 100% { transform: translateX(0px); }
}
.old-pli-goto-full { transition: opacity 0.5s; transition-delay: 0.2s; position: relative; display: block; opacity: 0; background-repeat: none; background-image: url(http://www.michaelgoldspinner.website/images/icons/goto.png); background-size: cover; background-position-x: 0px; width: 50px; height: 50px; margin-bottom: -50px; left: 105%; top: -90px; -webkit-animation: goto 0.5s ease infinite; -moz-animation: goto 0.5s ease infinite; animation: goto 0.5s ease infinite;
}
.old-post-item:hover .old-pli-goto-full { opacity: 1;
}
.post-item { list-style: none; display: block; overflow: hidden; /* border: solid 3px #666 */ width: 100%; min-width: 700px; height: 100px;
}
.post-item > * { float: left; display: inherit; /* border-right: solid 3px #666 */ height: inherit; /* padding: 0 1em */
}
.pli-date { background-color: #eee; background-color: #333; text-align: center; color: white; width: 20%; min-width: 135px; max-width: 200px; padding-left: 0; padding-right: 0;
}
.pli-date > * { float: left; clear: left; display: block; width: 80%; padding: 0.5em 10%; margin: 0;
}
.pli-date > *:nth-child(1) { border-bottom: solid 4px #fff;
}
.pli-date .pli-date-month { font: normal 2.5em Giorgio; padding-top: 0.5em; padding-bottom: 0em;
}
.pli-date .pli-date-day { font: normal 1.25em Giorgio;
}
.pli-text { cursor: pointer; width: 400px; width: 70%;
}
.pli-text .pli-text-title { transition: -webkit-filter 0.5s, opacity 0.5s; text-align: center; height: inherit;
}
.pli-text .pli-text-title h4 { font: normal 2.5em Giorgio; padding: 0.5em 0.5em 0 0.5em; margin: 0;
}
.pli-text-content { transition: top 0.2s, border 0.2s; position: relative; float: left; background-color: rgba(225, 225, 225, 0.5); background-color: rgba(245, 180, 110, 0.6); border: solid 0px transparent; border-left: solid 1px transparent; width: 100%; height: 100px; top: 0px;
}
.pli-text-content p { /* text-shadow: 0px 0px 10px #fff */ color: black; font: normal 1em/1.5 sans-serif; max-width: 700px; padding: 0.5em 1em; margin: 0;
}
.pli-text:hover .pli-text-content { border-top: solid 10px #444; top: -10px;
}
.pli-text-contentPreview .pli-text-title, .pli-text-contentPreview.pli-text:hover .pli-text-title { -webkit-filter: blur(3px); opacity: 0.8;
}
.pli-text-contentPreview .pli-text-content, .pli-text-contentPreview.pli-text:hover .pli-text-content { transition: top 0.5s, border 0.5s; border-top: solid 10px #444; border-left: solid 1px grey; top: -100px;
}
.pli-actions { float: right; background-color: #333; width: 70px; height: inherit; /* border: solid .25em black */
}
.pli-actions > * { float: left; background-size: auto 100%; background-position: 50%; background-repeat: no-repeat; width: 70px; height: 45px;
}
.pli-actions > *:nth-child(1) { background-image: url(http://localhost/Emgo/media/icons/r_arrowt.png); border-bottom: solid 4px black;
}
.pli-actions > *:nth-child(2) { background-image: url(http://localhost/Emgo/media/icons/full_post.png); background-size: auto 100%;
}

Post List Item - Script Codes JS Codes

document.getElementsByClassName('pli-text')[0].addEventListener('click', function() {	var defVal = 'pli-text';	var curVal = this.getAttribute('class');	var setVal = 'pli-text-contentPreview';	if (this.getAttribute('class') !== setVal+' '+defVal) {	this.setAttribute('class', setVal+' '+curVal); }	else {	this.setAttribute('class', defVal) }
});
// alert(document.getElementsByClassName('pli-text-content')[0].children[0].innerHTML.length);
Post List Item - Script Codes
Post List Item - Script Codes
Home Page Home
Developer Michael Goldspinner
Username emgo
Uploaded July 07, 2022
Rating 3
Size 5,280 Kb
Views 44,528
Do you need developer help for Post List Item?

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!

Michael Goldspinner (emgo) Script Codes
Name
Single Page Layout Concept
Scrolling Sidebar
Fundamental Flex-Box Menu
Resolving div Overflow
CSS Website Container
W3Schools Forms Example
Styled Radio inputs
Interactive Birthday Card
JQuery Effects
WebOS style navigation WIP
Create amazing video scripts 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!