Menerima Contributor dan Content Placement >Kontak profil atau ke email : kombatseries@gmail.com

Membuat Related Post Menarik Di Blog | Otomatis dan Manual

cara buat kotak baca juga menarik
Kotak baca juga menarik

Cara Membuat Related post menarik diblog manual dan otomatis, ini sebenarnya draf usang yang sudah ada sejak lama bertengger diblog, dulu memang sering di buka buat edit blog baru, tapi dari pada dianggurin mending di publish, edit sedikit supaya layak dibaca.

Related post bukan lah hal baru, biasa dikenal sebagai "kotak baca juga". Fungsi fitur ini secara umum adalah tempat direkomendasikannya postingan lain di dalam blog. Supaya tampak lebih rapi dan tertata maka dibuatlah related post. 

Selain membuat tampilan blog jadi lebih Aestetic, kotak baca juga dapat mendongkrak nilai SEO dimata mesin penelusur seperti yang sudah disampaikan para sepuh.

Related post biasanya di isi dengan link postingan yang membahas topik serupa dengan yang kita baca. Penerapannya sendiri umum diletakkan pada bagian tengah artikel, tapi sebenarnya bebas diletakkan dimana saja, namun posisi paling direkomendasikan ada dibagian artikel entah itu atas, bawah, atau tengah.

Diterapkan pada bagian tersebut dengan tujuan ya agar mudah saja untuk dibaca oleh pengunjung blog. 

Berikut cara Otomatis Membuat Related Post Di Blog 

  • Masuk terlebih dulu ke dashboard blogger, kemudian 
  • Pilih Tema, masuk ke edit HTML
  • Copy script berikut ke bagian <head> sebelum </head>
 <b:if cond='data:blog.pageType == &quot;item&quot;'><script type="text/javascript">//<![CDATA[var relatedTitles = new Array(); var relatedTitlesNum = 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]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; 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] = relatedTitles[i];}} relatedTitles = 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((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}//]]></script></b:if>

  • Lanjut , temukan kode html berikut : <data:post.body/> , replace dengan script dibawah ini :
<div expr:id='&quot;post1&quot; + data:post.id'/><div class='post-terkait'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;'type='text/javascript'/</b:if></b:loop></b:if><h4>Baca Juga</h4><script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script></div><div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'<data:post.body/></div><script type='text/javascript'>var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);var s=obj1.innerHTML;var t=s.substr(0,s.length/3);var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}</script>

  • Terakhir, setelah meletakkan script diatas, selanjutnya adalah cari dan temukan kode ]]<b:skin> , salin kode CSS yang ada dibagian bawah, paste tepat diatas ]]<b:skin> 

position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}post-terkait ul {margin:0;padding:0}post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}post-terkait ul li:last-child{border:none !important}post-terkait a {color:#1b71bc;font-size:13px !important}post-terkait a:hover {text-decoration:underline}

Cara Manual Membuat Realted Post Di Blog

Ada opsi manual apabila ingin membuat variasi sesuai selera, salin script letakkan diatas ]]<b:skin> dibawah ini: Sebagai catatan : ini untuk format 3 link judul postingan sekaligus, apabila yang dibutuhkan hanya 1, cukup menghapus 2 tag lainnya. Bisa di edit seperti ganti warna box , tulisan, jenis tulisan.

.related-style1 {background-color:#f6f6f6;border-left:5px solid #009ee0;box-shadow:0 8px 20px 0 rgba(30,30,30,.1);overflow:auto;padding:17px;text-align:left;font-weight:bold}<div class="related-style1"> Baca Juga: <ul> <li><a href="#" target="_blank" title="#">Buat tulisan dg link seperti biasa dibagian ini</a></li> <li><a href="#" target="_blank" title="#">Buat tulisan dg link seperti biasa dibagian ini</a></li> <li><a href="#" target="_blank" title="#">Buat tulisan dg link seperti biasa dibagian ini</a></li> </ul> </div>

Penutup

Keberadaan related post pada blog memang sangat penting untuk menavigasi trafik pengunjung dari halaman satu ke halaman lainnya. 
Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Membuat Related Post Menarik Di Blog | Otomatis dan Manual"

Post a Comment

ads

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel