Material Design Artikel Terkait Otomatis Dalam Postingan Blog
Sebelumnya saya mohon maaf karena jarang sekali melakukan update artikel di blog ini, di karenakan saat ini saya sedang menjalani proses ulangan semester di sekolah.
Material Design Artikel Terkait Otomatis Dalam Postingan Blog: Tutorial Blog yang kali ini akan saya bahas mungkin sudah banyak blog lain yang mempublikasi tutorial ini.
Artikel Terkait: digunakan untuk menampilkan artikel lain yang berhubungan dengan artikel yang sedang di baca, atau artikel yang memiliki kategory yang sama namun berbeda pembahasan yang di sisipkan pada postingan tertentu, itu adalah penjelasan singkat kegunaan Artikel terkait dalam postingan.
Artikel Terkait kali ini menggunakan efek
Material Design sehinggan tampilan yang di hasilkan rapih, sehingga terlihat lebih prefesional di mata pengunjung.
Anda tidak susah-susah lagi jika ingin menaruhkan Artikel Terkait lagi dalam postingan karena artikel terkait yang akan kita bahas kali ini sudah otomatis akan muncul, anda hanya harus memasang script pemanggilnya saja.
Nah jika masih kurang jelas silahkan anda lihat demonya dengan mengklik link di atas ini, lalu geser scroll ke bawah, Bagaimana keren bukan langsung saja untuk tahap pemasanganya di blog.
Material Design Artikel Terkait Otomatis Dalam Pos Postingan Blog
1. Masuk ke Blogger>Tema>Edit Html, pada Edit Html silahkan kamu cari kode
]]</b:skin> lalu pastekan kode berikut tepat di atasnya, untuk mempercepat pencarian silahkan anda klik tombol
CTRL
+
F
pada keyboard kamu.
.front-articles{position:relative;padding:0;margin:15px auto;width:100%;border-radius:0 0 3px 3px;box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12)}.front-articles h4{background-color:#273e80;padding:15px 12px;border-top-right-radius: 4px;border-top-left-radius: 4px;margin:0;font-size:15px;font-weight:600;letter-spacing:1px;color:#FFF}.front-articles ul{margin:0;padding:0}.front-articles ul li{background-color:#FFF;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border-bottom:0}.front-articles ul li:nth-child(odd){background-color:#FFF}.front-articles ul li:before{content:'\f105';font-family:'FontAwesome';position:absolute;margin:0 9px 0 4px;color:#0042ff;overflow:hidden}.front-articles ul li:hover:before{content:'\f107';font-family:'FontAwesome'}.front-articles a{color:#444;font-size:13px;margin:0 0 0 30px}.front-articles a:hover{color:#1da4c2}.front-articles ul li:nth-child(n+4) {display:none}
2. Nah jika sudah selesai selanjutnya silahkan cari kode
<body> lalu copy pastekan script di bawah ini di atasnya.
<script type='text/javascript'>
//<![CDATA[
var frontArticles = new Array(); var frontArticlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; frontArticles[frontArticlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[frontArticlesNum] = entry.link[k].href; frontArticlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = frontArticles[i];}} frontArticles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((frontArticles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < frontArticles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + frontArticles[r] + '</a></li>'); if (r < frontArticles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
3. Selanjutnya silahkan anda simpan/save template anda, lalu selanjutnya silahkan anda buat postingan baru atau mungkin masuk ke edit postingan lama anda pindahkan mode
Compose>HTML lalu masukan kode script pemanggil berikut.
<div class='front-articles'>
<script src='/feeds/posts/default/-/Tutorial Blog?alt=json-in-script&callback=related_results_labels&max-results=4' target='_blank' type='text/javascript'></script>
<h4>Baca Artikel Ini</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
Silahkan anda ubah Tutorial Blog sesuai dengan kategory postingan yang ingin di tampilakan.
4. Silahkan anda publikasikan, lalu lihat hasilnya.
Nah bagaimana mudah bukan, mungkin sampai di sini saja tutorial yang saya sampaikan kali ini sampe ketemu di lain waktu selamat menunaikan ibadah puasa. :D
