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

AvatarOleh:
ilustrasi fitur
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.

featured posts
Tampilan featured post yang baik dan benar adalah hanya tampil pada homepage saja
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

13 Responses to "Cara membuat featured post blogspot hanya muncul pada Homepage pada template lama"

  1. makasih kak informasinya...
    mampir ke blog ana juga yaa

    ReplyDelete
  2. Makin kece aja nih mas templetenya, rombak terus mas, biar tambah wus gitu 😁

    ReplyDelete
    Replies
    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...

      Delete
  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

    ReplyDelete
    Replies
    1. kasih link contoh dong headline apa heading ya...

      Delete
  4. update failed ters mas, padahal saya sudah mengikuti seperti yang mas contohkan

    ReplyDelete
    Replies
    1. Yang dipakai template apa ya..

      Delete
    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.

      Delete
  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?

    ReplyDelete
    Replies
    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...

      Delete
    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

      Delete
    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...

      Delete
    4. Kalau gitu saya tahan dulu deh otak atiknya nunggu jadinya aja hehe

      Delete

Ajukan pertanyaan, kami mungkin tidak bisa langsung menjawabnya. Namun pertanyaan anda mungkin berguna dan penting bagi pembaca blog ini.

Terimakasih

Salam dari Admin
Anissa Auliasari

BERDASARKAN LABEL

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel