How To Make This Tutorial :D

Lumayan sudah agak lama tidak login ke account blogger, padahal online tiap hari :D eh sekalinya log-in ada beberapa pemberitahuan!Apakah ada di antara sobat yang memposting dan menerangkan tentang hal tersebut :-?? Gue menemukan satu tutorial CSS mengenai Hover Effect Macam begini saja bumbunya

.lifted {
width: 25%;
height: 50px;
display: block;
min-width: 250px;
border-radius: 5px;
position: relative;
margin-bottom: 11px;
color: darkslategray;
box-sizing: border-box;
padding: 14px 25px 0 45px;
box-shadow: 1px 2px 1px -1px #777;
transition: background 200ms ease-in-out;
background: linear-gradient(to right, #abbd73 35%, #d6e2ad 100%);
}
.shadow {
position: relative;
}
.shadow:before {
z-index: -1;
content: "";
bottom: 13px;
right: 7px;
width: 75%;
top: 0;
position: absolute;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
transition: all 150ms ease-in-out;
}
.lifted:hover {
background: linear-gradient(to right, #abbd73 0%, #abbd73 100%);
}
.shadow:hover::before {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
bottom: 20px;
z-index: -10;
}
.circle {
position: absolute;
top: 14px;
left: 15px;
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-block;
box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 25px #FFF;
}

<div class="lifted shadow">
<div class="circle"></div>
BLAH BLEH BLOH
</div>

<div class="lifted shadow">
<div class="circle"></div>
BLAH BLEH BLOH
</div>

DEMO: codepen.io/BastianAndre/pen/eBBvVz

AA akan berikan style blockquote kepunyaan princess Lea Verou :D Ramuannya seperti ini

blockquote {
margin: 15px 0 0 10px;
padding: .3em 1em .3em 2em;
background: #ffecd0;
border-left: .7em double rgba(255, 255, 255, .3);
font-family: 'Palatino Linotype', Palatino, Georgia, serif;
}
blockquote:before {
content: '\275D';
float: left;
display: block;
margin-left: -.52em;
margin-top: -.23em;
color: #f72;
font-size: 700%;
line-height: 1;
}
blockquote cite {
margin: 5px 0 0;
display: block;
}
.entry-content li {
list-style: none;
padding-left: 1em;
}
.entry-content ol {
counter-reset: counter;
}
.entry-content ul > li {
text-indent: -1.5em;
}
.entry-content li ul {
padding-left: 1em;
}
.entry-content li:before {
font-size: 1.6em;
line-height: .8;
padding-right: .1em;
}
.entry-content li:before {
content: 'âž›';
color: rgba(0, 0, 0, .2);
}
.entry-content ol > li {
list-style: none;
text-indent: -1.5em;
margin: 1em 0 0 1em;
}
.entry-content ol > li:before {
counter-increment: counter;
content: counter(counter);
font-size: 4em;
line-height: .2em;
padding: .05em 0 .05em;
display: inline-block;
vertical-align: middle;
font-family: Raleway, 'Helvetica Neue', Helvetica, sans-serif;
}
.entry-content ol > li:nth-child(even) {
padding-left: 3em;
padding-right: 0;
}
.entry-content ol > li:nth-child(even) > ul {
padding-left: 4em;
}
.entry-content ol ol > li:before {
font-size: 3em;
color: #ccc;
}
.entry-content ol ol > li:nth-child(even) {
padding-left: 0;
}
.entry-content ol ol ol > li:before {
font-size: 2em;
color: #bbb;
}
.entry-content ul.omitted li:before {
content: '\2718';
color: #b00;
}

<div class="entry-content">
<blockquote>
<ol>
<li>Blah Bleh BlohH bLeh</li>
<li>Blah Bleh BlohH bLeh</li>
<li>Blah Bleh BlohH bLeh</li>
<li>Blah Bleh BlohH bLeh</li>
<li>Blah Bleh BlohH bLeh</li>
</ol>
</blockquote>
</div>

DEMO: lea.verou.me/2018/04/quicker-storify-export

Bagi sobat yang kepengen memasang serangga di blog, bisa coba dengan memakai Auz/Bug.
BONUS:

@keyframers 1.4.0 | Expanding Environments - Sidebar Menu Concept - Accordion Image Gallery - Gallery hover effect + Gallery expanded - WebGL Hover Effect - Blend modes selective desaturation effect - keyframes.app