Cara membuat featured post blogspot hanya muncul pada Homepage pada template lama

Featured post blogspot lama adalah kesalahan desain blogger karena merusak tampilan konten. Google telah memperbaikinya dengan membuat 4 varian template terbaru: soho, contempo, emporio dan terkemuka. Namun kita tetap bisa memperbaiki widget ini dengan mudah.
power of featured post

Jika sobat memasang featured post pada template model lama, atau terlanjur telah memakainya, sobat pasti tahu jika memasang featured posts pada template template ini: Simple, awsome (PT. Keren sekali), perjalanan,...dst. featured postsnya tetap muncul pada saat konten telah dibuka. Muncul diatas konten dan mengganggu karena kita harus scroll halaman kebawah untu membaca konten. Ini jika kita meletakan featured post diatas body konten blog pada pengaturan karena letak featured post yang paling ideal adalah memang diatas konten. Namun pada seharusnya itu hanya muncul pada homepage tidak pada saat konten dibuka!

Ini memang beda dengan template terbaru blogspot seperti contempo, emporio, soho dan terkemuka: Featured Post hanya akan muncul pada homepage dan tidak akan muncul diatas konten pada saat sebuah artikel atau konten dibuka, sehingga tidak mengganggu halaman konten.

Ini semacam kesalahan desain yang terjadi setelah waktu berlalu. Google telah memperbaikinya dengan menyediakan 4 varian template terbaru contempo, soho, emporio dan terkemuka. Dan para designernya akhirnya menyadari kekurangan itu.Namun kita juga dapat memperbaiki tampilan featured post pada template lama agar fiturnya sama dengan template blogger terbaru. Perbaikan ini akan berdampak bagus: Tema klasik yang tampil fresh dan modern!

Caranya: Kita harus masuk kepengaturan blogger:

Langkah pertama: Pasang Fefatured Posts
  1. Masuk ke pengaturan/dasbor blogspot
  2. Pilih tata-letak
  3. Pasang widget featured post. Save template
Langkah kedua: Edit HTML
  1. Masuk ke pengaturan/dasbor blogspot
  2. Pilih tema/theme
  3. Pilih edit HTML, lalu diatas halaman editor HTML terdapat menu "Lompat ke widget" klik Featured posts dan sobat akan menemukan (temukan saja) untaian kode pembentuknya sebagai berikut: 
<b:widget id='FeaturedPost1' locked='false' title='Entri yang Diunggulkan' type='FeaturedPost'>
<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'>7195625364791699155</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'/>
<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>
<b:if cond='data:showSnippet and data:postSummary != &quot;&quot;'>
<p>
<data:postSummary/>
</p>
</b:if>
<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>
Hapus dari <b:widget...hingga </b:widget> yang saya tandai warna merah. Lalu masih pada opsi berada dihalaman editor HTML, Lalu gantikan kode yang telah dihapus diatas dengan kode dibawah ini:
<b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='false' title='' type='FeaturedPost' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='showSnippet'>false</b:widget-setting>
<b:widget-setting name='showPostTitle'>true</b:widget-setting>
<b:widget-setting name='postId'>3782941576110603518</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' var='this'>
<b:include name='widget-title'/>
<div class='widget-content'>
<b:include name='snippetedPosts'/>
</div>
</b:includable>
<b:includable id='commentsLink'>
<a class='comment-link' expr:href='data:post.commentsUrl ?: data:post.url' expr:onclick='data:post.commentsUrlOnclick'>
<b:include name='commentIcon'/>
<span class='num_comments'>
<data:post.numberOfComments/>
</span>
</a>
</b:includable>
<b:includable id='footerBylines'>
<!-- Set the calling parent element to be a container. -->
<b:class name='container'/>
<b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
<b:include name='super.footerBylines'/>
<b:else/>
<b:include data='{ items: [[&quot;comments&quot;]] }' name='footerBylinesOverride'/>
</b:if>
<b:include data='{ shareButtonClass: &quot;post-share-buttons-bottom&quot;, overridden: true }' name='maybeAddShareButtons'/>
</b:includable>
<b:includable id='headerByline'>
<b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
<b:include name='super.headerByline'/>
<b:else/>
<b:include data='{ items: [&quot;author&quot;, &quot;timestamp&quot;, &quot;labels&quot;] }' name='headerBylineOverride'/>
</b:if>
<b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' data='{ shareButtonClass: &quot;post-share-buttons-top&quot;, overridden: true }' name='maybeAddShareButtons'/>
</b:includable>
<b:includable id='postLabels'>
<b:if cond='data:view.isMultipleItems'>
<div class='labels-outer-container'>
<div class='labels-container overflowable-container overflowable-no-popup'>
<div class='labels-items overflowable-contents byline post-labels'>
<b:loop index='i' values='data:post.labels' var='label'>
<span class='overflowable-item'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</span>
</b:loop>
</div>
<span class='labels-more overflow-button hidden'>
<a expr:href='data:post.link ?: data:post.url'>+<span class='overflow-count'/></a>
</span>
</div>
</div>
<b:else/>
<b:include name='super.postLabels'/>
</b:if>
</b:includable>
<b:includable id='postShareButtons' var='post'>
<!-- We call super.postShareButtons from the migrated positions. -->
</b:includable>
<b:includable id='postTitle' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:includable>
<b:includable id='postWrapperClasses'>
<b:class cond='data:post.featuredImage' name='image'/>
<b:class cond='not data:post.featuredImage' name='no-image'/>
<b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>
</b:includable>
<b:includable id='snippetedPostContent'>
<b:if cond='data:widget.sectionId != &quot;featured_post&quot;'>
<b:include name='super.snippetedPostContent'/>
<b:else/>
<b:with value='&quot;post-thumb-&quot; + data:post.id' var='thumbClassName'>
<b:if cond='data:post.featuredImage'>
<style>
@media (min-width: 746px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 800, &quot;800:272&quot;).cssEscaped'/>);} }
@media (min-width: 1545px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 1185, &quot;1185:272&quot;).cssEscaped'/>);} }
@media (max-width: 400px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 400, &quot;1:1&quot;).cssEscaped'/>); } }
@media (min-width: 401px) and (max-width: 745px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 745, &quot;745:400&quot;).cssEscaped'/>); } }
</style>
</b:if>
<div expr:class='&quot;post-wrapper hero post-&quot; + data:post.id'>
<b:include name='postWrapperClasses'/>
<b:include name='feedPostImage'/>
<div class='slide'>
<div class='post hentry'>
<b:include cond='data:postDisplay.showTitle' data='post' name='postTitle'/>
<b:include name='headerByline'/>
<b:include cond='data:postDisplay.showSnippet' data='post' name='postSnippet'/>
<div class='post-footer'>
<b:include name='footerBylines'/>
</div>
</div>
</div>
</div>
</b:with>
</b:if>
</b:includable>
<b:includable id='snippetedPostThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.url'>
<b:include data='{ image: data:post.featuredImage, imageSizes: [280,560,840,1120,1400] }' name='responsiveImage'/>
</a>
</div>
</b:includable>
</b:widget>
Save template. Sekarang featured post telah berubah menjadi lebih responsive, lebih dinamis, modern  dan cepat.

www.editblogtema.net
https://www.tiktok.com/@editvlogtema

22 komentar

  1. makasih kak informasinya...
    mampir ke blog ana juga yaa
  2. Makin kece aja nih mas templetenya, rombak terus mas, biar tambah wus gitu 😁
    1. terus terang karena blog ini gak punya target, jadi nothing to loose saja gonta ganti, lagian templatenya buatan sendiri dan menimbang algoritma Google sudah jauh beda, kayaknya blog ini tidak sampai kehilangan trafik yang berarti, malah terkadang naik drastis setelah ganti template (masih seputar buatan sendiri) he he he...tapi jangan ditiru tuh yang pakai adsense. Blog saya yang pakai adsense (berbahasa Inggris) juga hanya pernah ganti 3 kali template selama 4 tahun masa hidupnya...
  3. mas, tolong saya dong, saya download template X-MAg dari SORA, nah, bagian headline nya ngga muncul.. gimana caranya ya mas, ajari saya dong, saya pusing udah utak atik sana sini terus, ga bisa-bisa.. ni mas nmr saya 081298722878 WA
    1. kasih link contoh dong headline apa heading ya...
  4. update failed ters mas, padahal saya sudah mengikuti seperti yang mas contohkan
    1. Yang dipakai template apa ya..
    2. Pertama pastikan menerapkannya pada template default (bawaan)
      Kedua pastikan dasbor blogger versi baru bekerja, jika tidak kembali ke opsi dasbor blogger klasik, karena terkadang saat kita melakukan pengeditan pada opsi editor halaman HTML tidak bisa di SAVE.
      Yang ketiga apakah menggunakan template pihak ketiga? baik gratis maupun berbayar?

      Aku sudah coba cara ini pada template sederhana dan bekerja, hanya saja masih di butuhkan pengaturan CSS agar featured post ini bisa terlihat full di atas homepage.

      Cobalah kembali, kak.
  5. Ijin bertanya seputar featured post.

    Saya ingin tampilan featured post (background dan warna font ) berbeda dari tampilan artikel lain di homepage, tapi saya coba cari dan otak atik belum ketemu. Maukah om Sufyan membantu saya?
    1. merobah warna background:
      cari kode CSS Featured post berikut dalam template contempo:
      .main .FeaturedPost .widget-content {
      border: 0;
      position: relative;
      padding-bottom: .1em;
      }

      Tambahkan :
      background: black;

      Jadi kode lengkapnya adalah:

      .main .FeaturedPost .widget-content {
      border: 0;
      position: relative;
      padding-bottom: .1em;
      background: black;
      }

      Untuk by line:
      Cari kode CSS dalam template contempo sbb:
      .byline {
      color: $(posts.byline.color);
      display: inline-block;
      line-height: 22px;
      margin-top: 8px;
      vertical-align: top;
      }

      edit kode:

      color: $(posts.byline.color);

      menjadi:

      color: white;

      Template template terbaru komposisinya 70% CSS, jauh lebih mudah mengkustom tampilannya, ketimbang mengutak atik sintaks sintaks dan markup HTMLnya.

      Terimakasih sudah berkunjung Mas kipudin. Ganti nama harus selamatan lho...
    2. selamatannya sepertinya menunggu momment yang tepat dulu hehe.

      Oh ya setelah saya coba praktekkan ternyata yang berubah bukan post-outer-container pada featured post melainkan hanya pada bagian dalamnya saja.
      padahal saya inginnya post outer containernya juga berubah backgroundnya
    3. Wah kalau begitu harus merobah seluruh deklarasi variable skinnya dong. Saya punya konsep dalam bentuk bundle CSS alternatif untuk template template terbaru tapi masih separo jadi...
    4. Kalau gitu saya tahan dulu deh otak atiknya nunggu jadinya aja hehe
  6. ga ngaruh sama sekali mas ,
    🙋 apa aku kurang pinter kali ya ccc
    1. Mbak Ain, kalau blognya adalah 'https://1millyar.blogspot.com/' memang gak bakalan ngaruh karena memang tidak perlu diterapkan ke template emporio. Template Emporio sendiri telah memiliki fitur ini.

      Salam kenal.
  7. Kalau cara menggunakan featured post pada template Contempo gimana, mas? Saya udah ubek-ubek di pengaturan tapi tidak ketemu.
    1. Itu sudah bawaan, tinggal tambahkan widget melalui pengaturan blogspot..
    2. Cara menambahkan widget nya gimana, mas? Apa perlu masukkan kode-kode tertentu?
    3. Gak perlu. Itu blog Hermansyah sudah pakai featured post kok.
    4. Oh itu sudah pakai featured post ya padahal belum saya utak atik berarti sudah bawaan template Contempo ada featured post-nya tapi saya ketemu blog yang featured post-nya bisa menaikkan post lama tanpa mengubah tanggal penerbitannya.
    5. Tinggal masuk ke pengaturan/dasbor blog:
      1. pilih tataletak
      2. pilih widget featuredpost yang sudah ada, klik pada ikon pensil artinya edit.
      3. setelah tampil pilihan tinggal klik postingan mana yang mau di tampilkan.

      Curiga sama Kal El padahal dia itu dari planet krypton, jangan jangan hanya becanda wkkk, tapi kalau memang serius ya di atas itu caranya, jangan takut utak atik template, hari segini gak ngaruh ngaruh amat sama trafik asal hanya buat nambah widget...
  8. Nah itu dia di template Contempo bila tata letak diklik menu yang muncul cuma "bilah sisi (atas) gadget profil" dan "bilah sisi (bawah) gadget label dan arsip" jika klik tambahkan gadget maka featured post telah ditambahkan dan ngga bisa diutak-atik lagi seperti gadget yang lain.
Silahkan berkomentar sesuai dengan topik kita ya...
editbloginfo © EDITBLOGTEMA. Developed by Jago Desain