Cara Membuat Related Post/Artikel Terkait di Dalam Postingan

Cara Membuat Related Post/Artikel Terkait di Dalam Postingan
Related Post/Artikel Terkait di Dalam Postingan
Related Post/Artikel Terkait di Dalam Postingan.

Pada artikel kali ini saya akan membahas bagaimana meletakkan link baca juga di tengah artikel blog, biasanya link ini bertujuan agar pembaca tidak langsung kabur ketika selesai membaca suatu artikel, biasanya para blogger menyebutnya untuk menurunkan bounce rate, untuk lebih jelasnya sobat bisa baca sendiri di google apa itu pengertian bounce rate.

Sudah banyak juga sih mastah blogger yang sudah share script sejenis ini tetapi ini adalah script hasil karya saya sendiri yang berbeda dan tentu saja masih banyak kekurangannya, salah satu kekurangannya adalah script ini tidak sepenuhnya otomatis, sobat harus menginputkan sebaris kode () yang telah ditentukkan di postingan, khususnya bagian htmlnya.

Cara kerja scriptnya adalah dengan mengacak post sejumlah yang ditentukan, dari data json yang didapatkan di alamat "/feeds/posts/default?alt=jsoninscript&callback=buat_index&maxresults=500, lalu menampilkannya di html. Tidak usah terlalu memikirkannya jika sobat tidak paham, sobat hanya cukup copas saja script yang saya berikan di bawah ini, untuk tampilannya sendiri bisa sobat lihat pada gambar dibawah ini, jika sobat tidak cocok dengan warnanya silahkan sobat ganti di kode cssnya.

Contoh setelah diterapkan di blog

Caranya gimana bang?

Step 1 : Buka panduan kami tentang cara menerapkan skrip dan baca di blog kami juga. Pastikan setelan izin saluran Anda pendek. Anda dapat menemukannya di Pengaturan > Bagian lain. Atau Anda dapat dengan mudah melihatnya pada gambar di bawah ini.
Feed

Step 2 : Setelah memastikan pengaturan perizinan feed silahkan pergi kebagian tema lalu klik tombol edit html, dibagian ini sobat bisa mengedit script html css javascript sesuka hati asalkan tidak ada error saat disimpan.
Feed

Step 3 :

.read-more{text-align:left;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.05);box-shadow:0 0 6px rgba(0,0,0,.18);display:none;padding:10px;border-radius:10px;margin:auto;margin-bottom:15px;margin-top:30px;background-color:#f2f5f9;position:relative}.read-more:before{content:"Baca Juga";font-family:"Open Sans",sans-serif;padding:5px;background-color:#1d90cc;border-radius:5px;color:#fff;font-size:16px;position:absolute;top:-15px;left:15px}.read-more ul li{padding-bottom:4px;border-bottom:2px dashed #fff;font-size:15px;list-style:none;margin-bottom:10px}.read-more ul li a{color:#1d90cc;font-family:"Roboto Slab",serif;text-decoration:none}.read-more ul li a:hover{text-decoration:underline}.read-more ul li:first-child{margin-top:18px}.read-more ul{padding:0;margin:0}
			

Step 4 : Silahkan cari kode yang bernama untuk membantu sobat menemukannya. Sobat bisa memunculkan form pencarian dengan menekan tombol CTRL + F. Setelah mengimpor kode di atas , tempel kode CSS di antara kode dan tanda kurung CDATA. Tidak ada error sobat bisa lihat pada screenshot dibawah ini.
Feed

Selanjutnya kita akan mengcopy kode javascriptnya silahkan sobat mencari kode </body> terlebih dahulu, caranya sama seperti sebelumnya, biasanya kode </body> berada dipaling bawah.

Step 5 :

<script async="async" src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"/>
				<script async="async" src="/feeds/posts/default?alt=json-in-script&amp;callback=buat_index&amp;max-results=500"/>
				<script type="text/javascript">
				//<![CDATA[
				var jml_artikel=5;function baca_juga(e,a){$(".read-more").append("<ul></ul>"),$(".read-more").css("display","block");for(var r=0;r<a.length;++r){var l=e.feed.entry[a[r]].link[4].href,n=e.feed.entry[a[r]].link[4].title;if($(".read-more ul").append("<li><a href=""+l+"">"+n+"</a></li>"),jml_artikel-1==r)break}}function buat_index(e){for(var a=e.feed.entry.length,r=new Array,l=0;l<jml_artikel;++l){var n=Math.floor(Math.random()*a+0);-1===r.indexOf(n)?r.push(n):-1!==r.indexOf(n)&&--l}baca_juga(e,r)}
				//]]>
			</script>
		

Silahkan pastekan script javascript diatas tepat diatas kode </body> sehingga menjadi seperti screenshot dibawah ini.

Step 6 : Jika anda perhatikan ada kode javascript yang saya sorot dengan warna merah, ini adalah jumlah judul posting yang akan ditampilkan (default saya berikan adalah 5), sobat dapat dengan mudah mengubah nomor ' Artikel akan ditampilkan dengan catatan bahwa tidak boleh lebih dari artikel yang diterbitkan dan jumlahnya saja.
Feed

Step 7 : Langkah terakhir yang perlu sobat lakukan adalah menambahkan kode <div class="read-more"></div> pada saat mengedit postingan dan pastikan sobat dalam mode html (lihat gambar diatas), kode ini adalah tempat dimana widget baca juga di letakkan di blog kita, pastikan sobat meletakkannya diantara paragraph agar terlihat rapi, kalau saya sih biasanya meletakkan di paragraph - paragraph akhir.

Content Creator, Graphic Designer, UI / UX Designer

My Notes On Blogger : Ernesia.xyz