Skip to main content

Cara Membuat Gambar Pada Featured Post (Entri yang Diunggulkan) Berada di Samping Kiri Agar Terlihat Teratur

Pada widget blog tersedia featured post (entri yang diunggulkan) yang berada di menu Tata Letak. Pada bagian Tambahkan Gadget, ditampilkan widget entri yang diunggulkan yang bisa di pasang. Penggunaan featured post ini bertujuan menampilkan postingan blog yang ingin ditampilkan pada halaman depan blog, yang merupakan postingan terbaik (diunggulkan) atau sebagai media promosi. Dengan memasang postingan di featured post, para pengunjung dapat melihat postingan tersebut terus menerus. Pada gadget feaatured post juga dapat menampilkan postingan bergilir sesuai dengan postingan yang di publish paling terakhir. Ya, itu tergantung owner blog mau pilih yang mana.

Tapi, tidak semua blogger memasang entri yang diunggulkan tersebut, dikarenakan tampilan yang tidak bagus. Tidak bagusnya terdapat pada posisi gambar. Posisi gambar yang berada di bawah tampilan judul dan tampilan cuplikan teks tidak enak untuk dilihat. Halaman depan blog menjadi tidak beraturan atau memperjelek tampilan.

Berikut ini bentuk tampilan widget featured post yang menampilkan gambar dibawah judul dan cuplikasi teks.
gambar entri yang diunggulkan berada di bawah judul dan cuplikan teks

Nah, langsung saja bagi Anda yang ingin mempraktekkannya, bisa mengikuti langkah-langkahnya sebagai berikut:

# langkah 1

Log ini ke akun blogger - Menu Tema - Edit HTML. Lalu CTRL + F, ketikan “featuredpost”. Cari kode dibawah ini
<b:section class='sidebar' id='FeaturedPost' preferred='yes'/>
# langkah 2

Ganti kode di atas dengan kode di bawah ini. Copy dan paste kode berikut:
<b:section class='sidebar' id='FeaturedPost' preferred='yes'>
          <b:widget id='FeaturedPost1' locked='false' title='Featured Post' type='FeaturedPost' version='1'>
            <b:widget-settings>
              <b:widget-setting name='showSnippet'>true</b:widget-setting>
              <b:widget-setting name='showPostTitle'>true</b:widget-setting>
              <b:widget-setting name='postId'>4609071372758225116</b:widget-setting>
              <b:widget-setting name='showFirstImage'>true</b:widget-setting>
              <b:widget-setting name='useMostRecentPost'>false</b:widget-setting>
            </b:widget-settings>
            <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'/>
<div class='clear'/>
</b:includable>
            <b:includable id='content'>
  <div class='post-summary'>
    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
     <a expr:href='data:postUrl' expr:title='data:postTitle'>
      <img class='image lazy' expr:alt='data:postTitle' expr:data-src='resizeImage(data:postFirstImage, 400, &quot;16:9&quot;)' expr:title='data:postTitle' height='9' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJAQMAAAAB5D5xAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjwA0AABsAAQrj5HwAAAAASUVORK5CYII=' width='16'/>
      </a>
    </b:if>
    <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
      <h3><a expr:href='data:postUrl' expr:title='data:postTitle'><data:postTitle/></a></h3>
    </b:if>
    <b:if cond='data:showSnippet and data:postSummary != &quot;&quot;'>
      <p>
        <data:postSummary/>
      </p>
    </b:if><a class='readmore' expr:href='data:postUrl' title='Read More'>Read More</a>
  </div>
</b:includable>
          </b:widget>
        </b:section>
</b:if>
# langkah 3

Klik Simpan Tema

Cek dibagian menu Tata Letak, lihat sudah muncul featured post. Klik Edit, kemudian pilih saja postingan yang akan ditampilkan.
hasil edit featured post

Dan lihat hasilnya pada gambar di bawah ini:
membuat gambar pada widget featured post berada di samping

Sebagai catatan bahwa, penerapan featured pada postingan ini tergantung pada penggunaan template yang dipakai. Karena kode featured berbeda-beda, kadang template premium sudah meletakkan kode yang disesuaikan dengan template yang dijualnya. Namun, jika ingin tampilannya seperti yang ditunjukkan pada artikel ini, silahkan Anda dapat mencobanya.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar