Cara Memodifikasi Featured Post Bawaan Blogger di Atas Blog Post Homepage

SEPERTI sebutkan Buzz Blogger, Featured Post adalah widget untuk menampilkan posting unggulan atau yang ingin ditonjolkan sebagai salah satu tulisan atau konten terbaik.

Widget Featured Post ini diluncurkan Blogger pada tanggal 11 Desember 2015. Namun masih banyak yang belum tahu cara memasang dan memodifikasinya. 

Cara memasangnya:

1. Klik Layout > Add a Gadget > pilih Featured Post 
2. Klik salah satu judul posting yang akan ditampilkan
3. Save!

Anda bisa memasang Featured Post ini di sidebar dan di atas main-area (blog post).

Kelebihan Featured Post Bawaan Blogger ini adalah ia asli bawaan blogger sehingga tidak memberatkan tampilan blog dan responsive.

Berikut ini kode modifikasi featured post default blogger. Cara memasangnya:

1. Pasang widget Featured Post sebagaimana langkah di atas 
2. Pasang di atas kotak "Blog Post" atau Main Area.
3. Masuk ke template: Template > Edit HTML
4. Cari (Ctrl+F) kode widget Featured Post

Lakukan modifikasi sesuai dengan selera Anda dengan menambahkan kode "style" atau replace dulu dengan kode berikut ini:

<b:widget id='FeaturedPost1' locked='false' title='[/fa-camera/ BERITA UTAMA]' 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='border-bottom:1px solid #FF3D00;color:blue'><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 class='image' expr:src='data:postFirstImage'/>
    </b:if> 
    <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
      <h3><a expr:href='data:postUrl'><div style='font-size:33px;line-height:38px;font-family:Tahoma;color:red;font-weight:bold;border-bottom:1px solid #FF3D00;padding:10px 0px 10px 0px;'><data:postTitle/></div></a></h3>
    </b:if> 
  </div>
  <style type='text/css'>
    .image {
      width: 100%;margin-top:10px;
    }
  </style>
</b:includable>
</b:widget>

Langkah berikutnya adalah Save Template. Hasilnya seperti screenshot di atas atau bisa Anda lihat di sini, silahkan klik. 

Silakan baca konten menarik lainnya dari BentengSumbar.com di Google News