Cara Membuat Baca juga di Blog dengan Otomatis dan Manual

 Pada saat kita menulis sebuah artikel di Blogger maupun Wordpress, pernah enggak sih kepikiran bagaimana membuat Baca Juga seperti blog lain ? merupakan salah satu trik agar visitor membuka link atau tertarik dengan artikel kita lainnya.

Dengan trik ini membuat visitor/pengunjung berlama-lama di blog kita maka performa blog kita akan menjadi lebih baik, menaikkan blog rank kita dan berkesempatan mendapatkan rekomendasi dari google blog yang kita miliki. Ada dua metode/cara untuk membuat link baca juga atau biasa kita ketahui yaitu dengan istilah artikel terkait yaitu dengan membuatnya otomatis dan manual. Perlu kalian ketahui juga pada saat kalian membuatnya tidak benar/tepat maka tampilan blog kalian akan tidak menarik dan juga mempengaruhi pengunjung/visitor pada saat membaca blog kalian menjadi terganggu.

Dengan kita membuat Baca Juga secara otomatis itu baik dan efektif karena kalian tidak akan repot membuat link artikel yang berkaitan dengan artikel yang kita bahas. Dengan membuat Baca Juga secara otomatis akan tampil jika kita update artikel dan yang ada berdasarkan Label Blog. Just info juga untuk artikel di atas 500 kata cukup baik kalian buat Related Post otomatis tetapi jika artikel kalian pendek maka tampilan-nya akan tidak rapi dan terkesan mengganggu menurut pengunjung/visitor.

Cara membuat BACA JUGA di Blog dengan cara otomatis :

Sedikit tips dari saya jika membuat artikel terkait secara otomatis maka kalian wajib membuat artikel di atas 500 kata supaya para pengunjung tidak terganggu. Misalnya pada saat pengunjung belum membaca sepenuhnya sudah di suguhkan link Baca Juga dengan banyak link. Oke sebelum membuat otomatis kalian harus masuk ke HTML untuk menambahkan kode dan CSS.

1. Langkah pertama masuk ke Blogger --> Tema/Template --> Edit HTML. Selanjutnya letakkan kode dibawah ini sebelum kode </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}//]]>
</script>
</b:if>

2. Lalu langkah selanjutnya yaitu memasang CSS dibawah ini sebelum kode ]]></b:skin> atau </style>

/* Related Post Style 1 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

3. Selanjutnya yaitu kalian cari kode <data:post.body/> lalu ganti dengan kode dibawah ini.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<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'><p><data:post.body/></p></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/2);
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>

4. Yang terakhir kalian simpan template yang sudah ditambahkan kode di atas dan lihat hasilnya. Dan pastikan juga Blog kalian sudah memasang Font Awesome supaya icon bisa muncul.

Cara membuat BACA JUGA di Blog dengan cara manual :

Jika tadi kita melakukan secara otomatis dengan kode atau script yang ribet menurut seorang yang bukan programmer atau yang paham IT, maka dengan cara manual kita tidak perlu menggunakan kode script tersebut dan kita bisa mengatur letak Read More  atau Baca Juga dimana saja sesuai keinginan kita. Caranya cukup mudah yaitu kalian membuat teks seperti biasa, lalu kita blok teks yang kita buat untuk membuat link menuju artikel yang ingin kita arahkan dengan cara sisipkan link pada menu di blogger, lalu copas link artikelnya dan jangan lupa centang "Buka link ini di jendela baru atau open this link in a new window" dan klik OK. Saya buat seperti contoh di bawah ini.

Baca Juga : Tips Cara menentukan Target Negara Pengunjung Blog dengan Meta Tag

Oke itulah cara membuat Baca Juga dengan otomatis dan manual, semoga bermanfaat dan gunakan dengan bijak.