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
Masuk ke pengaturan/dasbor blogspot
Pilih tata-letak
Pasang widget featured post. Save template Langkah kedua: Edit HTML
Masuk ke pengaturan/dasbor blogspot
Pilih tema/theme
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 != ""'>
<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 != ""'>
<h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
</b:if>
<b:if cond='data:showSnippet and data:postSummary != ""'>
<p>
<data:postSummary/>
</p>
</b:if>
<b:if cond='data:showFirstImage and data:postFirstImage != ""'>
<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 == "Blog"'>
<b:include name='super.footerBylines'/>
<b:else/>
<b:include data='{ items: [["comments"]] }' name='footerBylinesOverride'/>
</b:if>
<b:include data='{ shareButtonClass: "post-share-buttons-bottom", overridden: true }' name='maybeAddShareButtons'/>
</b:includable>
<b:includable id='headerByline'>
<b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>
<b:include name='super.headerByline'/>
<b:else/>
<b:include data='{ items: ["author", "timestamp", "labels"] }' name='headerBylineOverride'/>
</b:if>
<b:include cond='data:view.isSingleItem and data:widget.type == "Blog"' data='{ shareButtonClass: "post-share-buttons-top", 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 != "item"'>
<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 != "featured_post"'>
<b:include name='super.snippetedPostContent'/>
<b:else/>
<b:with value='"post-thumb-" + 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, "800:272").cssEscaped'/>);} }
@media (min-width: 1545px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 1185, "1185:272").cssEscaped'/>);} }
@media (max-width: 400px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 400, "1:1").cssEscaped'/>); } }
@media (min-width: 401px) and (max-width: 745px) { .hero .<data:thumbClassName/> {background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 745, "745:400").cssEscaped'/>); } }
</style>
</b:if>
<div expr:class='"post-wrapper hero post-" + 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.com
Makin kece aja nih mas templetenya, rombak terus mas, biar tambah wus gitu 😁
BalasHapusterus 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...
Hapusmas, 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
BalasHapuskasih link contoh dong headline apa heading ya...
Hapusupdate failed ters mas, padahal saya sudah mengikuti seperti yang mas contohkan
BalasHapusYang dipakai template apa ya..
HapusPertama pastikan menerapkannya pada template default (bawaan)
HapusKedua 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.
Ijin bertanya seputar featured post.
BalasHapusSaya 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?
selamatannya sepertinya menunggu momment yang tepat dulu hehe.
HapusOh 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
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...
HapusKalau gitu saya tahan dulu deh otak atiknya nunggu jadinya aja hehe
Hapusga ngaruh sama sekali mas ,
BalasHapus🙋 apa aku kurang pinter kali ya ccc
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.
HapusSalam kenal.
BalasHapusKalau cara menggunakan featured post pada template Contempo gimana, mas? Saya udah ubek-ubek di pengaturan tapi tidak ketemu.
Itu sudah bawaan, tinggal tambahkan widget melalui pengaturan blogspot..
HapusCara menambahkan widget nya gimana, mas? Apa perlu masukkan kode-kode tertentu?
HapusGak perlu. Itu blog Hermansyah sudah pakai featured post kok.
Hapus
HapusOh 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.
Tinggal masuk ke pengaturan/dasbor blog:
Hapus1. 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...
BalasHapusNah 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.