Kode Featured Post

Kode Featured Post atau entri yang diunggulkan dengan desain tampilan seperti gambar di atas.

CSS:

<b:if cond='data:view.isHomepage'>
<style>
.FeaturedPost .post-summary{background:#f7f7f7;position:relative;padding:0;min-height:200px;max-height:300px;overflow:hidden;margin: 10px 0 20px;}
.FeaturedPost h2{display:none}
.FeaturedPost .post-summary h3{position:absolute;bottom:-10px;left:0;overflow:hidden;width:100%;background-image:linear-gradient(to bottom,transparent,rgba(0,0,0,0.5));z-index:10;box-sizing:border-box;padding:15px;font-size:22px;line-height:normal}
.FeaturedPost .post-summary h3::after{content:"";position:absolute;top:-.25em;right:100%;bottom:-.25em;width:.25em}
.FeaturedPost .post-summary h3 a{color:#fff;padding:3px 8px;-webkit-box-decoration-break:clone;-o-box-decoration-break:clone;box-decoration-break:clone;text-shadow:0 1px 2px rgba(0,0,0,0.5)}
.FeaturedPost .post-summary h3 a:hover{color:#ff6;text-decoration:none}
.FeaturedPost .post-summary p{position:absolute;background:#fff;color:#595959;padding:3px 8px;bottom:15px;margin:0 15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:90%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:none}
.FeaturedPost .image{display:block}
@media only screen and (max-width:480px) {
.FeaturedPost .post-summary,.bellow-header-widget{width:calc(100% + 30px);margin:0 0 15px -15px}
.FeaturedPost .post-summary,.FeaturedPost .image{border-radius:unset}
.FeaturedPost .post-summary h3{font-size:20px;margin:0 10px}
.FeaturedPost .post-summary p{margin:0 10px}
}
</style>
  </b:if>

HTML

<b:if cond='data:view.isHomepage'>
  <b:section class='featuredpost' id='FeaturedPost' showaddelement='yes'/>
</b:if>