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:

Hanya menampilkan judul postingan
Menampilkan judul dan deskripsi postingan
Menampilkan judul, deskripsi, dan thumbnail postingan
Menampilkan judul, thumbnail, dan tanggal memposting
Menampilkan judul dan thumbnail saja
Menampilkan judul di depan gambar thumbnail
Hanya menampilkan thumbnail
Menampilkan thumbnail kecil dan judul serta tanggal memposting disebelahnya
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 == "item"'>
<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 'Open Sans', 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 'Open Sans', sans-serif;outline: 0;}
.related-snippets{margin-top:5px;font:italic 12px 'Open Sans', 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 'Open Sans', sans-serif;padding:0 20px;}
.related-date{margin-top:5px;font:italic 11px 'Open Sans', 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 == "item"'>
<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.

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)

<b:if cond='data:blog.pageType == "item"'>
<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'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];
var relatedSettings = {
blogURL:"<data:blog.homepageUrl/>",
relatedHeading:"<h4><span><center>Artikel Terkait</center></span></h4>",
relatedPosts:4,
relatedStyle:7,
thumbnailSize:"w250-h200-p-nu",
defaultThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6y_yTe_0Czeqk0qwV0bSs4cD8L0Adfu1oGPiNyYK3tmq0mpo3UirEv6M2Vqh24T-WeRZp1fHjykVyaJHcz9dMWqwyzHcyx_P0uLvKs3668qKTD5QMF8r7_gScGkYAECWCZBmgBtVsIAB9/250-h200-c/no-thumb.png",
roundThumbs:false,
titleLength:"auto",
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:

Hanya menampilkan judul postingan
Menampilkan judul dan deskripsi postingan
Menampilkan judul, deskripsi, dan thumbnail postingan
Menampilkan judul, thumbnail, dan tanggal memposting
Menampilkan judul dan thumbnail saja
Menampilkan judul di depan gambar thumbnail
Hanya menampilkan thumbnail
Menampilkan thumbnail kecil dan judul serta tanggal memposting disebelahnya
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!

Blog Kode Jarwo