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

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


Comments

  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

Post a Comment

Ajukan pertanyaan dan berikan detailnya.

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar. Terimakasih!

pilih pola label berikut:

Show more