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, ibarat gambar di bawah ini.

 Kali ini CB share lagi desain tampilan featured post terbaru yang lebih keren dan respons Cara Memasang Widget Featured Post Blogger Responsive

Cara Memasang Widget Featured Post Blogger Responsive

1. Tema > Edit HTML
2. Copas isyarat berikut ini di atas isyarat </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

 Kali ini CB share lagi desain tampilan featured post terbaru yang lebih keren dan respons Cara Memasang Widget Featured Post Blogger Responsive


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

 Kali ini CB share lagi desain tampilan featured post terbaru yang lebih keren dan respons Cara Memasang Widget Featured Post Blogger Responsive


Selesai!

TAMBAHAN
Agar hanya muncul di halaman depan:

1. Tema > Edit  HTML
2. Temukan isyarat widget yang ditambahkan tadi.
3. Tambahkan isyarat tag kondisional blogger ibarat ini. Perhatikan isyarat 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 isyarat lainnya di sini ..............
    </b:if></b:includable>
  </b:widget>

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

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours