Cara Memodifikasi Widget Featured Post Bawaan Blogger

Baca Juga

Cara Memodifikasi Widget Featured Post Bawaan Blogger (Default).

BLOGGER meluncurkan fitur baru berupa Featured Post. Dalam peluncuran resminya di Buzz Blogger disebutkan, sebagai blogger, kita semua tahu betapa pentingnya menulis posting secara rutin untuk membuat pembaca kembaki ke blog kita.

Tentu, kian banyak kita posting, semakin cepat pula posting-posting itu terselip ke bawah arsip sehingga membuat posting lama tersisihkan oleh posting baru dalam tampilan di halaman depan atau di halaman dalam, kecuali jika terindeks oleh Related Post, Random Post, atau Popular Post.

Agar pengunjung bisa melihat posting unggulan kita, atau tulisan yang ingin dibuka pembaca, kini kita bisa menampilkannya di widget Featured Post.

Anda bisa memasang Featured Post Default Blogger ini di banyak tempat, seperti di sidebar atau di atas blog post.

Masalahnya, tampilan Featured Post bawaan blogger ini menyesuaikan dengan CSS atau desain template yang ada. Jika kebetulan pas, cocok, dan bagus, maka bagus pula tampilan Featured Post ini.

Jika tidak pas, kebanyakan sih tidak pas sehingga jadinya kurang bagus, maka kita bisa memodifikasinya setelah kita memasang widget Featured Post bawaan blogger itu.

Cara Modifikasi Widget Featured Post Bawaan Blogger

Bagian kode Featued Post yang bisa dimodif adalah semua elemen, mulai dari Judul, Gambar, dan Ringkasannya. Ini dia kodenya:

  <b:widget id='FeaturedPost1' locked='false' title='Featured Post' type='FeaturedPost'>
    <b:includable id='main'>
  <!-- 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:include name='quickedit'/>
</b:includable>
    <b:includable id='content'>
  <div class='post-summary'>
    <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>
    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
      <img class='image' expr:src='data:postFirstImage'/>
    </b:if>
  </div>
  <style type='text/css'>
    .image {
      width: 100%;
    }
  </style>
</b:includable>
  </b:widget>

Dalam kode di atas, susunan Widget Featured Post Bawaan Blogger itu adalah sebagai berikut:

1. Judul Sidebar 

2. Judul Posting

3. Ringkasan Posting

4. Gambar/Image

Modifikasi sederhana, sebagai contoh saya, CB ubah susunannya, yaitu ringkasan di bawah gambar. Seperti ini:

Ini kode yang sudah dimodifikasi:

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

     <b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

  <!-- 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>

     <b:includable id='content'>

  <div class='post-summary'>

    <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>

      <h3><a expr:href='data:postUrl'><div style='font-size:16px;font-family:Oswald;font-weight:500'><data:postTitle/></div></a></h3>

    </b:if>

    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>

      <img class='image' expr:src='data:postFirstImage'/>

    </b:if>

    <p style='font-size: 13px;'>

      <data:postSummary/>

    </p>

  </div>

  <style type='text/css'>

    .image {

      width: 100%;

    }

  </style>

</b:includable>

   </b:widget>

Contoh modifikasi kode Widget Featured Bawaan Blogger di atas:

1. Memindahkan ringkasan ke atas gambar.

2. Menambah elemen div style ke judul posting (warna biru)

3. Menambag elemen div style ke ringkasan (warna biru)

Hasilnya seperti gambar ilustrasi posting di atas. Live Demonya bisa dilihat di Demo Tes Template: Lihat di Sidebar!

Anda bisa modif sendiri Widget Featured Post Bawaan Blogger sesuai dengan selera Anda. Caranya:

1. Pasang dulu Widget Featured Post Bawaan Blogger: Layour > Add a Gadget > pilih Featured Post

2. Template > Edit HTML dan temukan kodenya seperti di atas. 

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