3 Langkah Mudah Cara Membuat Related Post Blogger Terbukti Running - AneIqbal - Blog Tutorial dan Informasi untuk Anda

3 Langkah Mudah Cara Membuat Related Post Blogger Terbukti Running

Share
cara membuat related post blogger
Halo gaes.
Semoga Anda sehat dan bahagia selalu.

Anda yang mampir ke sini berarti sedang mengoptimasikan blognya dan salah satu cara optimasi blog supaya visitor tetap betah di blog adalah dengan cara membuat related post.

Singkatnya, related post adalah rekomendasi artikel/postingan yang terkait atau berkategori sama dengan postingan yang sedang dibaca.



Di AneIqbal sendiri, related post sudah terpasang dan running dengan baik. Salah satu contohnya ada di postingan ini: Fungsi dan Cara Menggunakan switch di PHP beserta Contoh Casenya.

Berikut screenshootnya.

cara membuat related post blogger
Related post di AneIqbal

Lalu..
Gimana caranya buat related post di Blogger? Simak ya.

Persiapannya

Untuk membuat related post, kita akan menambahkan beberapa kodingan ke template yang kita pake saat ini. Sangat direkomendasikan untuk membackup template dulu sebelum dioprek.

cara membuat related post blogger
Backup template blog Anda
Selanjutnya, kita mulai masuk ke Edit HTML yang ada di halaman Theme Blogger. Mari kita ngoding.

Langkah Pertama: Tambah Koding CSS

Hal pertama yang harus dilakukan untuk membuat related post adalah menambahkan koding CSS. Koding CSS ini yang mengatur bagaimana tampilan related post-nya.

Untuk warna, besar, dan jenis hurufnya, bisa Anda kustom sesuai dengan keinginan Anda.

Bagi Anda yang belum dan pengen tahu apa itu CSS, Anda bisa ke kumpulan tutorial CSS yang sudah pernah Ogut buat.

Berikut koding CSS yang harus ditambahkan ke dalam template.
#related-posts{float:left;width:100%;border-bottom:0px solid #888;border-top:0px solid #88daed;margin:5px 0 10px;padding:15px 0 10px}
#related-posts .widget h2,#related-posts h3{font:22px;color:#000;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#0088ff;}
#related-posts li{text-indent:0;line-height:1.3em;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#0088ff;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

Dimana harus ditambahkan?

Tekan Ctrl+F (Windows) atau Command+F (macOS) di dalam kotak koding template. Lalu ketik ]]></b:skin> pada kotak pojok kanan atas.

cara membuat related post blogger
Kotak search di kotak koding template

Ada kan?
Lalu paste-kan koding CSS di atas tepat di atas ]]></b:skin>.

Langkah pertama selesai.
Let's go the next step.

Langkah Kedua: Tambah koding fungsi Javascript

Selanjutnya, kita harus menambahkan koding Javascript. Koding Javascript ini berisi koding fungsi (function) untuk membuat related post. Fungsi inilah yang nantinya akan digunakan untuk men-generate artikel/posting yang terkait.

Koding Javascriptnya.
<script type='text/javascript'>
var relatedpoststitle=&quot;Postingan menarik lainnya&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

Postingan menarik lainnya bisa Anda ganti sesuai dengan keinginan Anda. Misalnya, "Related post" saja.

Koding di atas harus ditambahkan tepat di atas </head>.

Sudah?
Lanjut kelangkah terakhir.

Barangkali Anda juga tertarik dengan postingan berikut.


Langkah Ketiga: Tambah Koding untuk Panggil Fungsi Javascript

Inilah langkah terakhir untuk membuat related post di Blogger. Fungsi Javascript yang sudah dibuat di langkah kedua akan dipanggil.

Pemanggilan fungsi ini dimaksudkan untuk men-generate artikel/posting yang terkait.

Berikut kodingannya.
<!-- related post script -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=6;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div><div class='clear'/>
</b:if>
<!-- related post script -->

Lihat var maxresults=6; pada koding di atas. Ini adalah jumlah artikel/posting yang akan muncul di related post. Silakan ganti angka 6 sesuai dengan keinginan Anda.

Tambahkan koding tersebut tepat di bawah <data:post.body/>.

Mungkin saja Anda akan menemukan <data:post.body/> lebih dari satu. Di template AneIqbal pun ada 3. Lalu, dimana harus ditambah?

Di template AneIqbal, harus ditambah di bawah <data:post.body/> yang kedua. Silakan Anda coba juga ditambah di kedua. Bila related post belum muncul, coba di yang lain.

Kemudian klik Save Theme.

cara membuat related post blogger
Simpan perubahan template

Jika sudah disimpan, maka kita harus pastikan apa yang kita kerjakan tadi ada hasilnya. Ada related post di bawah setiap postingan.

Silakan buka salah satu postingan Anda dengan kategori atau label apapun dan perhatikan bagian bawah postingan.

Ini adalah salah satu contoh lagi postingan di AneIqbal dengan kategori/label "Cisco Packet Tracer" (Membuat Jaringan WAN Dengan Cisco Packet Tracer). Sudah ada related post-nya.

cara membuat related post blogger
Related post sudah muncul di bawah postingan
Semoga berhasil ya.


Semua Tutorial Blog

Tidak ada komentar:

Posting Komentar

Silakan berkomentar dengan kalimat yang bijak.