Apakah kamu pernah menghapus widget Featured Posts (Postingan Unggulan) pada template Invert Pro? Jika iya, lalu kamu mencoba menampilkannya kembali, mungkin kamu akan terkejut karena tampilannya menjadi berantakan atau tidak lagi seperti semula. Tampilan yang sebelumnya rapi dan menarik, kini menjadi tidak enak dipandang.
Apa Penyebab Tampilan Featured Posts Menjadi Rusak?
Penyebab utamanya adalah karena saat kamu menghapus widget Featured Post, beberapa kode HTML dan CSS penting yang terkait dengan tampilan widget tersebut ikut terhapus. Saat kamu memasang ulang widget tersebut tanpa menyertakan kode yang lengkap, maka tampilannya tidak akan bekerja dengan normal.
Hal ini umum terjadi karena template seperti Invert Pro menggunakan struktur kode khusus yang menyatu antara HTML, JavaScript, dan CSS untuk menghasilkan tampilan yang optimal.
Untuk mengembalikan tampilan Featured Posts agar kembali normal seperti semula, kamu perlu menambahkan ulang kode-kode yang hilang secara manual. Berikut langkah-langkah yang bisa kamu ikuti:
Tutorial:
- Pada langkah pertama ini pastikan kamu telah masuk ke blogger milikmu, dan pastikan juga kamu sudah membuat widget featured post tersebut pada menu "Tata Letak" atau "Layout" ya guys.
- Jika sudah maka sekarang pergilah ke menu "Theme" atau "Tema".
- Nah disini click symbol yang aku tandai segitiga mengarah kebawah tersebut.
- Setelah itu akan muncul sebuah menu, disini pilih "Edit HTML".
- Nah pada mode Edit HTML, agar kamu bisa langsung menuju ke codenya, click symbol kotak yang aku tandai kotak warna hijau tersebut.
- Jika sudah maka disini click tulisan "FeaturedPost1" (FeaturedPost1 ini akan tersedia jika kamu sudah memasang entry unggulan atau featured post pada tata letak, jadi jika belum ada maka pasang terlebih dahulu)
- Nah disini harusnya kamu akan sampai pada code yang dituju, disini scroll sedikit keatas maka harusnya kamu akan melihat code keseluruhan seperti dibawah ini :
<b:if cond='data:view.isHomepage'> <b:section class='feature section' id='FeaturedPost' maxwidgets='1' showaddelement='yes'> <b:widget id='FeaturedPost1' locked='false' title='Featured Post' 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'>8547526769186319749</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> </b:section> </b:if> - Nah jika sudah kamu dapatkan, maka ganti seluruh code diatas itu dengan code dibawah ini :
<b:if cond='data:view.isHomepage'> <b:section class='feature section' id='FeaturedPost' maxwidgets='1' showaddelement='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'>8547526769186319749</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:includable> <b:includable id='content'> <div class='post-summary'> <b:if cond='data:showFirstImage and data:postFirstImage != ""'> <span class='thumbb'> <img class='image lazyload' expr:data-src='resizeImage(data:postFirstImage, 630, "400:200")' height='320' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' width='630'/> <span class='label-feature'> <span class='label-featurez'> <svg style='width:16px;height:16px' viewBox='0 0 24 24'> <path d='M22.5 12.5c0-1.58-.875-2.95-2.148-3.6.154-.435.238-.905.238-1.4 0-2.21-1.71-3.998-3.818-3.998-.47 0-.92.084-1.336.25C14.818 2.415 13.51 1.5 12 1.5s-2.816.917-3.437 2.25c-.415-.165-.866-.25-1.336-.25-2.11 0-3.818 1.79-3.818 4 0 .494.083.964.237 1.4-1.272.65-2.147 2.018-2.147 3.6 0 1.495.782 2.798 1.942 3.486-.02.17-.032.34-.032.514 0 2.21 1.708 4 3.818 4 .47 0 .92-.086 1.335-.25.62 1.334 1.926 2.25 3.437 2.25 1.512 0 2.818-.916 3.437-2.25.415.163.865.248 1.336.248 2.11 0 3.818-1.79 3.818-4 0-.174-.012-.344-.033-.513 1.158-.687 1.943-1.99 1.943-3.484zm-6.616-3.334l-4.334 6.5c-.145.217-.382.334-.625.334-.143 0-.288-.04-.416-.126l-.115-.094-2.415-2.415c-.293-.293-.293-.768 0-1.06s.768-.294 1.06 0l1.77 1.767 3.825-5.74c.23-.345.696-.436 1.04-.207.346.23.44.696.21 1.04z' fill='#fff'/> </svg> Featured Post </span> </span> </span> </b:if> <div class='feature-wrapp'> <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> <div class='button-feature'> <a expr:href='data:postUrl'> Read more <svg viewBox='0 0 24 24'> <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/> </svg> </a> </div> </div> </div> </b:includable> </b:widget> </b:section> </b:if> - Nah jika sudah maka click tombol disket yang berada pada pojok kanan atas.
- Tunggu beberapa detik untuk proses penyimpanannya berhasil, jika sudah berhasil maka akan muncul pemberitahuan "Save Berhasil" pada pojok kiri bawah.
- Setelah itu coba buka kembali blog milikmu, harusnya Featured Postnya lebih baik sekarang, jika tidak muncul Featured Postnya sama sekali maka kemungkinan besar kamu belum memberikan artikel mana yang ingin kamu pin pada featured post, jadi pin salah satu artikel milikmu terlebih dahulu pada tata letak.
Nah mungkin itu saja tutorial yang bisa aku beritahukan, semoga dengan adanya tutorial yang satu ini kamu bisa dengan mudah memperbaiki tampilan featured post template invert pro milikmu.
Posting Komentar