Cara Memasang Widget Featured Post Blogger Responsive

Baca Juga

SEBELUMNYA CB sudah share featured post bawaan blogger hasil modifikasi versi 1 dan versi 2. Kali ini CB share lagi desain tampilan featured post terbaru yang lebih keren dan responsive, seperti gambar di bawah ini.

DEMO

Cara Memasang Widget Featured Post Blogger Responsive

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

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.FeaturedPost .post-summary {background:#f7f7f7;position:relative;padding:0;min-height:200px;max-height:330px;overflow:hidden;margin:15px 0;}
.FeaturedPost .post-summary h3{font:normal bold 20px Georgia,Utopia,&#39;Palatino Linotype&#39;,Palatino,serif;position:absolute;bottom:0;z-index:1;font-size:28px;margin:0;padding: 20px 15px;text-shadow: 1px 1px 0 #000;line-height: normal;background: -webkit-linear-gradient(rgba(0, 0, 0, 0.07), black)}
.FeaturedPost .post-summary h3:after{content:&quot;&quot;;position:absolute;top:-0.25em;right:100%;bottom:-0.25em;width:0.25em;}
.FeaturedPost .post-summary h3 a{color:#fff;padding:2px 8px;-webkit-box-decoration-break:clone;-o-box-decoration-break:clone;box-decoration-break:clone;padding: 20px 15px;}
.FeaturedPost .post-summary h3 a:hover{color:#328bdd;}
.FeaturedPost .post-summary p{position:absolute;background:#ffffff;color:#5a5a5a;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;}
.FeaturedPost h2.title {display:none}
@media only screen and (max-width:480px){
.FeaturedPost .post-summary h3{font-size:20px;margin:0 10px;}
.FeaturedPost .post-summary p{margin:0 10px;}
}
</style>
</b:if>

3. Simpan Template!
4. Klik Layout > Add a Gadget > Pilih Featured Post

5. Save!
6. Pindahkan/geser widget featured post tadi ke atas widget Blog Posts.

Selesai!

TAMBAHAN

Agar hanya muncul di halaman depan:

1. Tema > Edit  HTML

2. Temukan kode widget yang ditambahkan tadi.

3. Tambahkan kode tag kondisional blogger seperti ini. Perhatikan kode warna merah.

<b:widget id='FeaturedPost1' locked='true' title='Featured Post' type='FeaturedPost'>
    <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>  <!-- Only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
...................... ad kode lainnya di sini ..............
    </b:if></b:includable>
  </b:widget>

Demikian Cara Memasang Widget Featured Post Blogger Responsive hasil modifikasi. Good Luck & Happy Blogging! (www.contohblog.com).*