Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi

Baca Juga

Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi & Responsive.

SETELAH berbagi Cara Memasang Featured Post Slider di Halaman Depan Blog, kali ini saya share cara memasang Featured Post Widget Bawaan Blogger yang sudah dimodifikasi.

Desain tampilannya seperti ini:

Featured Post yaitu widget Blogger untuk menampilkan posting, artikel, atau konten unggulan. Widget ini dirilis Blogger 10 December 2015: Highlight the posts that matter the most.

Cara memasangny mudah, tinggal klik Layout > Add a Gadget > pilih Featured Post. Setelah itu geser (pindahkan) posisinya ke atas widget Blog Post.

Kode Featured Post Bawaan Blogger yang Sudah Dimodifikasi

Jika ingin desain Featured Post Bawaan Blogger yang Sudah Dimodifikasi, pasang kode berikut ini di template blog Anda setelah Featured Post dipasang.

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.FeaturedPost .post-summary{background:#f7f7f7;position:relative;padding:0;height:auto;max-height:330px;overflow:hidden;margin-bottom:10px}
.FeaturedPost .post-summary h3{font:500 20px Oswald,serif;bottom:0;font-size:20px;margin:0;z-index:10;position:absolute;top:0;left:0;height:100%;width:36%;background:#1F1C1B;opacity:0.7;filter:alpha(opacity = 70);padding:10px}
.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;background:transparent}
.FeaturedPost .post-summary h3 a:hover{color:#ff6}
.FeaturedPost .post-summary p{color:#ff6;bottom:10px;overflow:hidden;text-overflow:ellipsis;margin:0;z-index:10;position:absolute;top:55%;left:0;max-height:100px;width:36%;opacity: 0.8;filter: alpha(opacity = 70);padding: 10px;line-height: normal;}
.FeaturedPost .image{display:block;max-height:330px}
.FeaturedPost h2{display:none}
@media only screen and (max-width:480px){
.FeaturedPost .post-summary h3{font-size:18px;margin:0;width:50%}
.FeaturedPost .post-summary p{margin:0;height:auto;max-height:72px;width:50%}
}
@media only screen and (max-width:320px) {
.FeaturedPost .post-summary p {display: none;}
}
</style>
</b:if>

3. Agar tampil hanya di halaman depn, tambahkan kode tag kondisional. Caranya, cari kode widget Featured Post seperti ini:

    <b:widget id='FeaturedPost1' locked='false' title='Featured Post' type='FeaturedPost'>

Nah, di bawahnya ada kode seperti ini:

      <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;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <b:include name='content'/>
  </b:if>
</b:includable>

Ubah sehingga seperti kode di atas dengan menambahkan kode warna merah.

Save!

Itu dia Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi. (blogromeltea.blogspot.com).*