Tutorial Blog: Cara Mudah Memasang Widget Kode Artikel Terkait di Tengah Paragraf Artikel untuk Blogspot
Hallo selamat tengah malam menjelang pagi sobat blogger, kali ini saya coba mengulas lagi tutorial blogger. Meningkatkan jumlah tayangan halaman (page views) dan menurunkan bounce rate adalah dua tantangan utama bagi pemilik blogger bukan sobat?
Salah satu strategi paling efektif untuk menjaga pembaca tetap berada di blog kita adalah dengan menyisipkan rekomendasi artikel terkait di area yang paling sering dilihat, yaitu di tengah-tengah paragraf artikel. Lihat contoh tangkapan layar dari blog saungjiwa dibawah ini:
Metode ini terbukti jauh lebih efektif dibandingkan menaruh artikel terkait hanya di akhir postingan, karena pembaca sering kali berhenti membaca sebelum mencapai bagian paling bawah halaman. Kebanyakan dari kode yang bermunculan di tutorial bloger biasanya disertai dengan kode enkripsi (sperti, eval(), unescape(), dll) Kali ini saya dibantu mode Ai membuat dengan menggunakan kode JavaScript murni tanpa enkripsi eval(), unescape(), dll, widget ini akan membagi paragraf secara otomatis, mendukung tampilan rata kiri, serta menampilkan 5 artikel terkait secara acak dengan ikon jari menunjuk (👉) yang menarik perhatian.
Langsung sajalah cara pengaplikasiannya, gak usah panjang lebar. Mari sobat simak langkah-langkahnya:
Untuk menerapkannya, sobat hanya perlu menyalin seluruh struktur kode di bawah ini dan meletakkannya di dalam mode Edit Html template blog kita (biasanya di bawah atau di atas kode <data:post.body/> pada editor HTML Tema Blogger), dan biasanya akan menemui kode <data:post.body/> dua, tiga bahkan empat kode. Coba saja letakkan dimana widget ini akan tampil. Berikut dibawah ini kode salinnya:
<b:if cond='data:view.isPost'>
<style>
.altRelatedMiddle {
margin: 15px 0;
padding: 12px 15px;
border-left: 4px solid #ff0000;
background-color: #f9f9f9;
border-radius: 4px;
text-align: left !important;
display: block;
clear: both;
}
.altRelatedMiddle .titleBox {
display: block;
font-weight: bold;
font-size: 15px;
color: #ff0000 !important;
margin-bottom: 6px;
text-align: left !important;
}
.altRelatedMiddle ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
}
.altRelatedMiddle ul li {
position: relative;
padding-left: 25px !important;
margin-bottom: 6px !important;
font-size: 15px;
line-height: 1.4;
text-align: left !important;
list-style-type: none !important;
}
.altRelatedMiddle ul li::before {
content: "👉";
position: absolute;
left: 0;
top: 0;
}
.altRelatedMiddle ul li a {
color: #008cff;
text-decoration: none;
font-weight: 500;
}
.altRelatedMiddle ul li a:hover { text-decoration: underline; }
</style>
<script>
//<![CDATA[
var maxLinks = 5;
var rawTitles = [];
var rawUrls = [];
function ambilDataTerkait(json) {
if (json.feed.entry) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var title = entry.title.$t;
var url;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
url = entry.link[k].href;
break;
}
}
if (url && rawUrls.indexOf(url) === -1) {
rawTitles.push(title);
rawUrls.push(url);
}
}
}
}
function cetakHtmlTerkait() {
if (rawUrls.length === 0) return '';
var html = '<div class="altRelatedMiddle">';
html += '<span class="titleBox">BACA JUGA:</span>';
html += '<ul>';
var indices = [];
for (var i = 0; i < rawUrls.length; i++) indices.push(i);
indices.sort(function() { return 0.5 - Math.random() });
var limit = Math.min(maxLinks, indices.length);
for (var j = 0; j < limit; j++) {
var idx = indices[j];
html += '<li><a href="' + rawUrls[idx] + '">' + rawTitles[idx] + '</a></li>';
}
html += '</ul></div>';
return html;
}
//]]>
</script>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=ambilDataTerkait&max-results=30"' />
</b:loop>
</b:if>
<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
var postContent = document.querySelector('.post-body, .entry-content, [itemprop="articleBody"]');
if (postContent) {
var relatedHtml = cetakHtmlTerkait();
if (relatedHtml !== '') {
var paragraphs = postContent.querySelectorAll('p');
if (paragraphs.length >= 3) {
var target = Math.min(2, paragraphs.length - 1);
var wrapper = document.createElement('div');
wrapper.innerHTML = relatedHtml;
paragraphs[target].parentNode.insertBefore(wrapper.firstChild, paragraphs[target]);
} else {
var contentHtml = postContent.innerHTML;
var tokens = contentHtml.split(/<br\s*\/?>/i);
if (tokens.length > 4) {
var newHtml = tokens.slice(0, 4).join('<br>') + relatedHtml + '<br>' + tokens.slice(4).join('<br>');
postContent.innerHTML = newHtml;
} else {
var divEnd = document.createElement('div');
divEnd.innerHTML = relatedHtml;
postContent.appendChild(divEnd.firstChild);
}
}
}
}
});
//]]>
</script>
</b:if>
#Keterangan Kode:
- Untuk mengganti jumlah artikel yang tampil ganti pada kode // var maxLinks = 5;
- Kelebihan utama dari skrip ini adalah teks judul "BACA JUGA:" yang berwarna merah menyala dan icon (👉) untuk menarik perhatian pembaca secara instan.
Dengan menerapkan optimasi internal link artikel otomatis ini, navigasi antar artikel sejenis akan menjadi jauh lebih efektif sobat blogger. Dengan itu maka efek jangka panjangnya, performa SEO blog kita di mata mesin pencari Google akan merangkak naik karena memiliki struktur tautan internal (internal linking) yang kuat dan organik.
Demikianlah artikel singkat saya kali ini tentang "Cara Mudah Memasang Widget Kode Artikel Terkait di Tengah Paragraf Artikel untuk Blogspot" Semoga dapat diambil manfaatnya untuk para pengguna blogger semuanya. Akhir kata saya ucapkan terimakasih telah berkunjung ke Saungjiwa Blog ini, semoga teman teman semua dapat berkreasi dengan tutorial yang saya tampilkan. 🙏
Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...
#Keterangan Kode: