Membuat Related Post Widget 9 Style in 1 Script untuk Blog

    Related post atau sering disebut juga artikel terkait adalah kumpulan artikel yang setopik dengan suatu artikel yang sedang dibaca.

    Misal begini, anda sedang membaca salah satu artikel di blog saya tentang "cara memasang widget A". Maka pada bagian related post di blog ini akan menampilkan postingan serupa yang pernah saya buat, misal "cara memasang widget B, C, D" dan seterusnya...

    Di tutorial kali ini saya akan membagikan cara memasang widget related post di blog anda. Mungkin artikel seperti ini sudah pasaran di Google, ya kan?

    Tetapi artikel yang saya buat ini lebih unik, dikarenakan widget yang akan saya share memiliki 9 macam bentuk widget yang berbeda, tetapi hanya perlu memasukkan 1 script saja, jadi tidak memberatkan blog anda sama sekali.

    Berikut kesembilan style alias bentuk widget related postnya:
    1. Hanya menampilkan judul postingan
    2. Menampilkan judul dan deskripsi postingan
    3. Menampilkan judul, deskripsi, dan thumbnail postingan
    4. Menampilkan judul, thumbnail, dan tanggal memposting
    5. Menampilkan judul dan thumbnail saja
    6. Menampilkan judul di depan gambar thumbnail
    7. Hanya menampilkan thumbnail
    8. Menampilkan thumbnail kecil dan judul serta tanggal memposting disebelahnya
    9. Menampilkan thumbnail kecil dan judul serta deskripsi disebelahnya

    Banyak sekali bukan? Hebatnya lagi, anda hanya perlu mengubah 1 angka untuk mengubah style tersebut menjadi style lainnya. Jadi, anda tidak perlu membuang-buang waktu mencari lagi di internet untuk style lainnya.

    Selain kelebihan-kelebihan yang saya sudah sebutkan di atas, berikut beberapa kelebihan lainnya dari widget ini:
    • Pemasangan yang mudah
    • Sudah SEO Friendly (mengunakan tag heading h4)
    • Responsive alias Mobile Friendly
    • Tidak menimbulkan masalah Leverage Browser Caching di Google PageSpeed Insights
    • Dapat dimodifikasi sesuka hati, baik dari:
      • Bentuk gambar thumbnail (bulat/kotak)
      • Ukuran gambar thumbnail
      • Panjang judul postingan yang ditampilkan
      • Panjang deskripsi postingan yang ditampilkan
      • Mengubah tulisan menjadi di tengah (center) atau di kiri, dan
      • Membuat postingan terbuka di tab baru/tidak ketika di klik
    • Mudah untuk mengubah stylenya
    • Sangat-sangat ringan, karena sudah saya pasang menggunakan LazyLoad Javascript Eksternal
    • dan masih banyak lagi...

    Bagaimana? Sudah siap ingin memasangnya? Silakan ikuti panduan di bawah ini secara cermat dan baik.

    Saya sarankan untuk menghapus widget related post yang sudah ada sebelum widget ini bila ingin memasang widget saya ini, untuk menghindari error.

    Cara Pemasangan


    1. Pemasangan CSS


    • Seperti biasa, pertama silakan anda buka blogger.com > Tema > Edit HTML
    • Klik di sembarang kode, tekan CTRL + F sampai muncul kotak pencarian, lalu cari kode berikut:

    </head>

    • Bila sudah ketemu, silakan masukkan kode berikut di atas kode </head> tadi

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts-widget ul li a img {width:250px;height:200px}
    .related-posts-container{margin-top:10px;padding:27px 27px 55px;background:#fff;}
    .related-posts-container h4{font:20px &#39;Open Sans&#39;, sans-serif;margin-bottom:20px;}
    .related-posts-container ul,.related-posts-container ul li{list-style: none;margin:10px;padding: 0;}
    .related-posts-container ul li a{text-transform:capitalize !important;font:bold 13px &#39;Open Sans&#39;, sans-serif;outline: 0;}
    .related-snippets{margin-top:5px;font:italic 12px &#39;Open Sans&#39;, sans-serif;}
    .related-posts-1 li{list-style:inside none disc !important;}
    .related-posts-1 li,.related-posts-2 li{border-top:1px solid rgba(0,0,0,0.04);padding:0.8em 0 !important;}
    .related-posts-1 li:first-child,.related-posts-2 li:first-child{border-top:medium none;}
    li.related-post-item{float:left;list-style:none;position:relative;}
    .related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts-9 li .related-snippets{padding-left:74px;}
    .related-posts-8 li,.related-posts-9 li{background-color:#ffffff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:47%;float:left;height:130px;padding:3% !important;}
    .related-thumb{float:left;height:64px !important;margin-right:10px;object-fit:cover;width:64px !important;}
    .related-posts-6 li,.related-posts-6 a{line-height:0 !important;}
    .related-posts-6 li img {display:block;margin:0 auto}
    .related-posts-7 li.related-post-item a {text-align:center;display:block}
    .related-wrapper{position:absolute;left:0px;right:0;top:0px;bottom:0;margin:0 auto;z-index:4;background:rgba(77, 77, 77, 0.62);}
    .related-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;vertical-align:middle;text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
    .related-wrapper .related-title{vertical-align:middle;display:table-cell;color:#ffffff;font:bold 16px &#39;Open Sans&#39;, sans-serif;padding:0 20px;}
    .related-date{margin-top:5px;font:italic 11px &#39;Open Sans&#39;, sans-serif;color:#999999;}
    ul.related-posts-5 li.related-post-item, ul.related-posts-4 li.related-post-item, ul.related-posts-3 li.related-post-item {width:47%}
    ul.related-posts-5 li.related-post-item img, ul.related-posts-4 li.related-post-item img, ul.related-posts-3 li.related-post-item img {height:150px;margin-right:20px;float:left}
    @media screen and (max-width:800px) {
    ul.related-posts-9 li, ul.related-posts-8 li.related-post-item, ul.related-posts-5 li.related-post-item, ul.related-posts-4 li.related-post-item, ul.related-posts-3 li.related-post-item {width:98% !important}
    .related-posts-3 li.related-post-item img {margin:10px auto !important;display:block;float:none !important}
      }
    @media screen and (max-width:750px) {
        .related-posts-7 li.related-post-item, .related-posts-6 li.related-post-item {width:98% !important}.related-posts-container{padding:27px 0px 55px !important;}.related-posts-container ul, .related-posts-container ul li {margin:10px 5px !important}}
    @media screen and (max-width:1100px) {
        .related-posts-7 li.related-post-item, .related-posts-6 li.related-post-item {width:47%}}
    </style>
    </b:if>

    • Bila sudah, simpan template dan lanjut ke cara kedua.

    2. Pemasangan Javascript


    • Masih di template editor, sekarang cari lagi kode berikut ini:

    </body>

    • Bila sudah ketemu, silakan masukkan kode ini di atas kode </body> tersebut.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script>//<![CDATA[
    var lazyrelpostjarwo=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&lazyrelpostjarwo===!1||0!=document.body.scrollTop&&lazyrelpostjarwo===!1)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.rawgit.com/BangJarwo/Kode-Jarwo/744dc4c7/Related%20Posts.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),lazyrelpostjarwo=!0)},!0);
    //]]></script>
    </b:if>

    • Simpan kembali template, jangan keluar dari editor template, dan lanjut ke cara ketiga.

    3. Pemasangan Widget


    • Sekarang, cari lagi kode berikut ini:

    <b:includable id='postQuickEdit' var='post'>

    • Bila sudah ketemu, maka tampilannya akan seperti ini:

    Perhatikan tanda titik yang saya tunjuk dengan anak panah, lalu tekan itu hingga muncul banyak kode.

    • Perhatikan tanda titik yang saya tunjuk dengan anak panah, lalu tekan itu hingga muncul banyak kode.
    • Setelah itu, cari kembali kode tadi:

    <b:includable id='postQuickEdit' var='post'>

    • Bila sudah ketemu, maka tampilan disekitarnya kurang lebih seperti ini:

    Bisa anda lihat ada kode </b:includeable> diatasnya, sekarang pastekan kode berikut ini diatas kode </b:includeable> (digaris warna merah pada gambar diatas)

    • Bisa anda lihat ada kode </b:includeable> diatasnya, sekarang pastekan kode berikut ini diatas kode </b:includeable> (digaris warna merah pada gambar diatas)

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='related-posts-container related-post' id='related-posts-widget'/><div id='log' style='clear: both;'/>
    <script type='text/javascript'>
    var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
    var relatedSettings = {
    blogURL:&quot;<data:blog.homepageUrl/>&quot;,
    relatedHeading:&quot;&lt;h4&gt;&lt;span&gt;&lt;center&gt;Artikel Terkait&lt;/center&gt;&lt;/span&gt;&lt;/h4&gt;&quot;,
    relatedPosts:4,
    relatedStyle:7,
    thumbnailSize:&quot;w250-h200-p-nu&quot;,
    defaultThumb:&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6y_yTe_0Czeqk0qwV0bSs4cD8L0Adfu1oGPiNyYK3tmq0mpo3UirEv6M2Vqh24T-WeRZp1fHjykVyaJHcz9dMWqwyzHcyx_P0uLvKs3668qKTD5QMF8r7_gScGkYAECWCZBmgBtVsIAB9/250-h200-c/no-thumb.png&quot;,
    roundThumbs:false,
    titleLength:&quot;auto&quot;,
    snippetLength:75,
    centerText:false,
    openNewTab:false
    };</script>
    </b:if>

    • Selesai, sekarang simpan template dan baca panduan dibawah ini untuk konfigurasi widget

    Konfigurasi style widgetnya


    Mengganti judul widget

    Silakan anda lihat tulisan pada kode diatas yang berwarna  merah  (Artikel Terkait), ganti dengan judul widget yang anda inginkan, misal related post, postingan terkait, artikel mirip, dan sebagainya.

    Mengatur jumlah postingan/artikel yang ditampilkan pada widget

    Silakan anda lihat angka pada kode diatas yang berwarna  jingga  (4), ganti dengan angka berapa jumlah postingan/artikel yang ingin anda tampilkan, misal 6, 10, 20, atau lebih.

    Mengatur jenis/bentuk (style) pada widget

    Silakan anda lihat angka pada kode diatas yang berwarna  kuning  (7), ganti dengan angka jenis stylenya, yaitu dari 1-9. Style yang tersedia adalah sebagai berikut:

    Style untuk nomor:
    1. Hanya menampilkan judul postingan
    2. Menampilkan judul dan deskripsi postingan
    3. Menampilkan judul, deskripsi, dan thumbnail postingan
    4. Menampilkan judul, thumbnail, dan tanggal memposting
    5. Menampilkan judul dan thumbnail saja
    6. Menampilkan judul di depan gambar thumbnail
    7. Hanya menampilkan thumbnail
    8. Menampilkan thumbnail kecil dan judul serta tanggal memposting disebelahnya
    9. Menampilkan thumbnail kecil dan judul serta deskripsi disebelahnya

    Mengatur ukuran thumbnail widget

    Untuk mengatur ukuran thumbnail tiap postingan pada widget, silakan anda lihat kode yang berwarna hijau (muda dan tua, yaitu 250 dan 200). Untuk  hijau muda , yaitu lebar gambar thumbnail, sedangkan  hijau tua  merupakan tinggi gambar thumbnailnya.

    Mengubah bentuk gambar thumbnail

    Silakan anda lihat angka yang berwarna  biru muda  (false) pada kode diatas, ganti menjadi true agar gambar thumbnail menjadi bulat oval, atau biarkan false agar tetap berbentuk kotak.

    Mengatur panjang judul postingan

    Untuk mengatur jumlah kata pada judul postingan di widget related post ini, silakan anda lihat tulisan yang berwarna  biru tua  (auto), tulisan tersebut dapat anda ganti dengan jumlah kata maksimal yang ingin ditampilkan pada judul postingan, misal 50, 70, 100, dan sebagainya.

    Mengatur panjang deskripsi postingan

    Untuk mengatur jumlah kata pada deskripsi tiap postingan pada widget related post ini, silakan anda lihat tulisan yang berwarna  ungu  (75), tulisan tersebut dapat anda ganti dengan jumlah kata maksimal yang ingin ditampilkan pada deskrisp postingan yang ingi diampilkan, misal 50, 70, 100, dan sebagainya.

    Membuat teks berada di tengah

    Kalau anda ingin membuat semua teks yang ada pada widget ini menjadi di tengah, silakan anda lihat tulisan yang berwarna  pink  (false) pada kode di atas dan ganti menjadi true.


    Selesai! Kini widget related post alias artikel terkait di blog anda sudah terpasang dengan baik dan sudah siap pakai. Jangan lupa untuk mencoba widget-widget keren lainnya dari Bang Jarwo!