Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi

Romeltea | Follow @romel_tea
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 Bawaan Blogger yang Sudah Dimodifikasi

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.

Featured Post Bawaan Blogger

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

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Blogger from Bandung, Jawa Barat, Indonesia. Follow me: facebook twitter instagram twitter youtube

Recommended Posts

No comments on Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi

Post a Comment

No Spam, Please!

Contact Form

Name

Email *

Message *