Cara Memasang Widget Featured Post Blogger Responsive

Cara Memasang Widget Featured Post Blogger Responsive

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.

Featured Post Blogger Responsive

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

Layout > Add a Gadget > Pilih Featured Post


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

Pindahkan/geser widget featured post tadi ke atas widget Blog Post


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

Related Posts

0 Komentar untuk "Cara Memasang Widget Featured Post Blogger Responsive"

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *