Cara Membuat Baca Juga Otomatis di Dalam Postingan |
Menggunakan fitur "Baca Juga" otomatis pada situs web Anda dapat menjadi salah satu cara terbaik untuk memperkayakan pengalaman pengunjung dan meningkatkan nilai situs web Anda. Fitur ini membantu menambahkan relevansi dan interaksi pada konten yang tersedia, sehingga mempermudah navigasi dan meningkatkan waktu pengunjung di situs web Anda. Selain itu, fitur ini juga membantu meningkatkan optimasi mesin pencari dan membangun reputasi situs web Anda.
Manfaat Menggunakan Fitur Baca Juga
Menggunakan fitur "Baca Juga" otomatis memiliki beberapa manfaat, di antaranya:
- Menambahkan Nilai : Fitur ini membantu meningkatkan nilai dan pengalaman pengunjung pada situs web Anda. Mereka dapat dengan mudah menemukan konten yang relevan dan terkait dengan apa yang sedang mereka baca, sehingga membuat mereka betah berlama-lama di situs Anda.
- Meningkatkan Trafik : Dengan membuat fitur "Baca Juga" otomatis, Anda dapat memperpanjang waktu pengunjung di situs web Anda dan membuat mereka terus menjelajahi konten yang tersedia. Ini dapat meningkatkan tingkat pengunjung dan mengarahkan mereka pada halaman lain dalam situs web Anda.
- Meningkatkan SEO : Fitur ini dapat membantu meningkatkan optimasi mesin pencari (SEO) situs web Anda. Algoritma mesin pencari menilai konten situs web dengan cara menilai relevansi dan interaksi pengunjung. Dengan fitur "Baca Juga" otomatis, pengunjung akan terus berinteraksi dengan konten Anda, yang akan meningkatkan nilai SEO situs web Anda. Mempermudah
- Navigasi : Fitur ini mempermudah navigasi pengunjung dalam menemukan konten yang relevan dan menarik. Mereka dapat dengan mudah membuka halaman lain tanpa harus kembali ke halaman utama atau melakukan pencarian manual. Dengan menggunakan fitur "Baca Juga" otomatis, Anda dapat memaksimalkan potensi situs web Anda dan meningkatkan pengalaman pengunjung. Ini akan membantu Anda membangun reputasi dan memperkuat hubungan dengan pengunjung situs web Anda.
Membuat Baca Juga Otomatis di Dalam Postingan
Sekarang ini sudah banyak penyedia jasa template yang menaruh fitur ini di dalam templatenya jadi kita tak harus memasukan sendiri kode ini, namun buat kalian yang geratisan dan suka custom atau utak atik template blog mengkobinasikannya tentu akan lebih menarik. Berikut adalah langkah langkah membuatnya :
Silakan buka halaman dasbor BLOGGER > PILIH THEMA > EDIT HTML , dan Pastekan kode CSS dibawah ini tepat sebelum </style> atau ]]></b:skin>
Setelah itu kita berpindah ke bagian HTML template teman-teman, silakan cari kode <data:post.body> , lalu ganti kode tersebut dengan kode dibawah ini.
Kemudian lanjut pasang kode dibawah ini tepat sebelum </head> atau juga bisa dipasang sebelum </body>
Oke langkah Terahir adalah Save Template Teman-Teman dan cek hasilnya. Semogga Berhasil.
.post-terkait {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}
.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}
Setelah itu kita berpindah ke bagian HTML template teman-teman, silakan cari kode <data:post.body> , lalu ganti kode tersebut dengan kode dibawah ini.
<div expr:id='"post1" + 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 == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/> </b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/>
</div> <script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML; var t=s.substr(0,s.length/3);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>
<div class='post-terkait'> <b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/> </b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/>
</div> <script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML; var t=s.substr(0,s.length/3);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>
Kemudian lanjut pasang kode dibawah ini tepat sebelum </head> atau juga bisa dipasang sebelum </body>
<b:if cond='data:blog.pageType == "item"'>
<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>
<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>
Oke langkah Terahir adalah Save Template Teman-Teman dan cek hasilnya. Semogga Berhasil.