Membuat Related Post pad thumbnails

Membuat Related Post dengan Thumbnails di Blogger

Setelah beberapa waktu tidak melakukan update, kali ini admin ingin membagikan sedikit tips seputar blog kepada para pembaca setia yang mungkin telah lama menunggu posting terbaru.

Pada posting kali ini, admin akan berbagi tutorial tentang "Membuat Related Post dengan Thumbnails". Sebelumnya, sudah pernah dibahas tentang Related Post atau Artikel Terkait, yang dapat dibaca di sini dan di sini.

Namun, terdapat perbedaan antara Related Post pada artikel sebelumnya dengan yang akan dibahas kali ini:

  • Related Post sebelumnya hanya menampilkan judul artikel yang berhubungan dengan artikel yang sedang dibaca.
  • Related Post dengan Thumbnails akan menampilkan judul artikel beserta gambar (thumbnail), sehingga lebih menarik dan informatif bagi pembaca.

Langkah-langkah Membuat Related Post dengan Thumbnails

1️⃣ Login ke Blogger

Masuk ke akun Blogger Anda.

2️⃣ Masuk ke Edit HTML

  • Pilih menu Tata Letak → Edit HTML.
  • Centang kotak "Expand Widget Templates" agar seluruh kode terlihat.

3️⃣ Tambahkan Script & CSS

  • Cari kode berikut dengan menggunakan Ctrl + F:
    html
    </head>
  • Gantilah kode tersebut dengan kode di bawah ini:
    html
    <!--Related Posts with Thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
    #related-posts {
        float: center;
        text-transform: none;
        height: 100%;
        min-height: 100%;
        padding-top: 5px;
        padding-left: 5px;
    }

    #related-posts h2 {
        font-size: 1.6em;
        font-weight: bold;
        color: black;
        font-family: Georgia, "Times New Roman", Times, serif;
        margin-bottom: 0.75em;
        margin-top: 0em;
        padding-top: 0em;
    }

    #related-posts a {
        color: black;
    }

    #related-posts a:hover {
        color: black;
        background-color: #d4eaf2;
    }
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'></script>
</b:if>
<!--Related Posts with Thumbnails Scripts and Styles End-->
</head>

4️⃣ Tambahkan Widget Related Post

  • Cari kode berikut di halaman Edit HTML Template blog Anda:
    html
    <div class='post-footer-line post-footer-line-1'>
  • Tambahkan kode berikut tepat di bawah kode di atas:
    html
    <!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
    <div id='related-posts'>
        <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast != "true"'></b:if>
            <b:if cond='data:blog.pageType == "item"'>
                <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6"' type='text/javascript'></script>
            </b:if>
        </b:loop>
        <script type='text/javascript'>
            var currentposturl = "<data:post.url/>";
            var maxresults = 5;
            var relatedpoststitle = "Related Posts";
            removeRelatedDuplicates_thumbs();
            printRelatedLabels_thumbs();
        </script>
    </div>
    <div style='clear:both'></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

5️⃣ Simpan Template

Setelah semua langkah dilakukan dengan benar, klik Simpan Template.

Hasil yang Diharapkan

Jika semua langkah diikuti dengan benar, maka Related Post dengan Thumbnails akan muncul secara otomatis di bawah setiap postingan blog.

Kesimpulan

✔ Related Post dengan Thumbnails membuat tampilan blog lebih menarik dan profesional.
✔ Menampilkan gambar di samping judul artikel membantu menarik perhatian pembaca.
✔ Dapat meningkatkan jumlah kunjungan ke artikel lain di dalam blog.

Semoga bermanfaat! 😊 🚀

Komentar

Posting Komentar