Cara Menampilkan Featured Post Keren Responsive di Blogger

Baca Juga

Cara Menampilkan Featured Post Keren Responsive di Blog. Modifikasi Widget Featured Post Bawaan Blogger. 

Featured Post adalah widget yang menampilkan posting unggulan atau artikel yang ditonjolkan di halaman depan blog. Blogger sudah menyediakannya dengan tampilan standar.

Jika ingin mengubahnya menjadi lebih keren, seperti gambar di atas, berikut ini tutorialnya.

Cara Menampilkan Featured Post Modifikasi 

1. Klik Tema > Edit HTML
2. Copas kode CSS Featured Post berikut ini di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.FeaturedPost .post-summary{background:#f7f7f7;margin-bottom: 25px;position:relative;padding:0;min-height:200px;max-height:300px;overflow:hidden}
.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}
.FeaturedPost .post-summary h3::after{content:&quot;&quot;;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);font-size: 27px;line-height: 1;}
.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}
.sidebar .FeaturedPost .post-summary h3{font-size:25px}
@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>

3. Copas kode berikut ini di bawah kode  <div class='main-wrapper'> atau di atas kode                     <b:section class='main' id='main' showaddelement='no'>

 <b:if cond='data:blog.homepageUrl == data:blog.url'>
  <b:section class='featured-post' id='Featured Post' maxwidgets='1' showaddelement='yes'/>
              </b:if>

Hasilnya akan seperti ini:

            <div class='main-wrapper'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'>
  <b:section class='featured-post' id='Featured Post' maxwidgets='1' showaddelement='yes'/>
              </b:if>
                    <b:section class='main' id='main' showaddelement='no'>

4. Save! Simpan template.
5. Klik Layout.

Akan muncul widget baru bernama Featured Post. Jika belum muncul, refresh (Tekan F5). Itulah widget Featured Post.

6. Klik "Edit" untuk memilih posting yang akan ditampilkan.

Demikian Cara Menampilkan Featured Post Keren Responsive di Blogger. Desain tampilan Featured Lainnya silakan cek Koleksi Featured Post Blogger.

Good Luck & Happy Blogging! (www.contohblog.com).*