Cara Menampilkan Featured Post Keren Responsive di Blogger

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

 Featured Post Keren Responsive

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).*

Thanks for reading Cara Menampilkan Featured Post Keren Responsive di Blogger | Labels: Desain Blog edit this post
Author Image

About CB Blogger
Contoh Blog --sebut saja CB -- Panduan Blogging untuk Pemula - Tips SEO, Desain, Template SEO Friendly, Cara Membuat Blogger Keren, Google Adsense, dll. Subscribe! to get update via email.

0 Komentar untuk "Cara Menampilkan Featured Post Keren Responsive di Blogger"

Contact Form

Name

Email *

Message *

Back To Top