Tutorial Cara Memperbaiki Tampilan Featured Post Yang Rusak Pada Template Invert Pro Idntheme
Jika kamu pernah menghapus widget featured posts atau postingan unggulan pada template invert pro, dan ketika kamu ingin menggunakan featured posts tersebut kembali, kamu mungkin akan sedikit shock karena tampilan featured posts pada saat kamu pasang kembali menjadi rusak alias tidak enak sekali dipandang oleh mata.
Nah kenapa itu bisa terjadi ? nah alasannya simpel, dimana code HTML Featured Post tersebut ketika dihapus maka menyebabkan tampilan featured post bisa berubah menjadi mode tampilan yang rusak, penyebabnya ialah adanya beberapa kode tambahan yang hilang dan harus di re-make ulang atau dipasangkan kembali secara manual.
Jadi bagaimanakah cara untuk memperbaiki tampilan featured post yang rusak tersebut ? nah jadi pada kesempatan kali ini aku akan memberikan tutorial bagaimana cara memperbaikinya, jadi simak baik-baik tutorial dibawah ini ya guys :
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 yang aku tandai kotak warna hijau tersebut.
- 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.