Widget Featured Post Default Blogger Hasil Modifikasi - Responsive

Baca Juga

WIDGET Featured Post dirilis 10 Desember 2015 secara resmi oleh Google Blogger, dengan judul posting Highlight the posts that matter the most.

"Sebagai blogger, kita semua tahu betapa pentingnya memposting secara berkala untuk mendorong pembaca untuk kembali. Tentu saja, semakin banyak Anda memposting, semakin cepat posting Anda masuk ke dalam arsip, membuatnya semakin sulit bagi pembaca Anda untuk menemukan semua yang Anda poskan yang mungkin menarik bagi mereka," demikian kata Google.

"Untuk membantu memudahkan menampilkan pos yang ingin dilihat pembaca Anda, kami telah membuat gadget baru yang disebut Featured Post. Dengan Featured Post, Anda dapat memilih posting yang telah Anda bagikan di blog Anda dan menyorotnya ke mana pun Anda mau. seperti."

Demikian kata Google. Intinya, widget featured post ini untuk menampilkan posting unggulan di blog kita.

Cara memasangnya seperti pasang widget biasa:

1. Klik "Layout" > "Add a Gadget"
2. Klik "Featured Posts" 

Jika sudah dipasang, pindahkan widget baru itu ke atas elemen "Blog Post".

Save!

Kini masuk ke template: Tema > Edit HTML

1. CSS Code 

Simpan di atas </head>

<style>
.post-summary .image {width: 50%;
    height: 160px;
    margin: 0 15px 0 0;
    position: relative;
    float: left;}
    .post-summary {
width: 92%;
    background: #fafafc;
    padding: 15px 15px 2px 15px;
    margin: 12px 0 0;}
.post-summary h3{margin:0;font-size:18px;padding:10px;font-weight:700;line-height:normal}
.post-summary strong {color:#F55B77;font-weight:700;}
.post-summary p{font-size:13.5px;line-height:19px;margin-bottom:20px}
 @media screen and (max-width:600px){
.post-summary {
    width: 98%;
    background: #fafafc;
        padding: 15px 15px 2px 15px;
    margin: 15px 0 0px;}
.post-summary .image {
    width: 100%;
    height: 185px;
    margin: 0 15px 15px 0;
    position: relative;
    float: left;}
.post-summary h3 {
margin: 0;
    font-size: 18px;
    padding: 10px 0;
    font-weight: 700;
    line-height: normal;}
}
</style>

2. Ganti Kode Widget Featured Posts

Temukan kode ini:

<b:widget id='FeaturedPost1' locked='true' title='Featured Post' type='FeaturedPost' version='1' visible='true'> ... </widget> 

Hapus kode tersebut dan GANTI dengan kode featured hasil modif di bawah ini:

   <b:widget id='FeaturedPost1' locked='true' title='Featured Post' type='FeaturedPost' version='1' visible='true'>
     <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 style='display:none'><data:title/></h2>
  </b:if>
  <b:include name='content'/>
</b:if>
</b:includable>
     <b:includable id='content'>
  <div class='post-summary'>
    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
      <img alt='featured post' class='image' expr:src='data:postFirstImage'/>
    </b:if>
    <strong>Featured Post</strong>
    <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
      <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
    </b:if>
    <p><data:postSummary/></p>
  </div>
</b:includable>
   </b:widget>

SAVE!

Featured Post Modifikasi Lainnya

Selain desain featured post di atas, CB juga modifikasi featured post lebih simple, juga cara pemasangannya.

Ini penampakannya.

Cara Memasangnya:

1. Klik Add a Gadget > pilih Featured Post
2. Klik salah satu postingan yang akan ditampilkan di Featured Post.
3. Geser ke bagian atas area "Blog Post"
4. Save!
5. Klik Tema > Edit HTML
6. Pasang kode berikut ini di atas kode </head>

<b:if cond='data:view.isHomepage'>
<style>
.FeaturedPost h2 {display:none}
.FeaturedPost {border-bottom: 1px solid #eee;margin:20px 0;}
.post-summary .image {width: 45%;float: left;margin-right: 20px;height: 120px;object-fit: cover;}
.home-link {display:none}
@media screen and (max-width: 603px){
.post-summary .image {width:100%;float:none;margin-right:0;height:auto}
} 

Kini Widget Featured Post Default Blogger Hasil Modifikasi - Responsive sudah terpasang. Lakukan modifikasi sesuai dengan desain blog Anda, misalnya warna dan lebar-tinggi, di bagian kode CSS di atas.

Good Luck & Happy Blogging! (www.contohblog.com).*