Cara Membuat Artikel Terkait Baca Juga Didalam Postingan Blog

Membuat Artikel Terkait

Cara memasang artikel terkait (baca Juga) di dalam postingan blog telah dianggap sebagai alternatif terbaik untuk menurunkan score bounce rates blog. Karena cara ini membuat pengunjung terpancing untuk tidak segera meninggalkan blog dengan cara menampilkan artikel yang terkait dengan artikel yang sedang dibaca. Cara ini juga merupakan salah satu tehnik Onpage SEO untuk blog.

Pada dasarnya, membuat baca juga / artikel terkait di tengah postingan ini prinsip kerjanya mirip dengan related posts yang berada dibawah postingan. Masing-masing menampilkan judul yang berkaitan dengan tags / labels yang sesuai dengan postingan blog. Bedanya adalah, related posts dibawah postingan biasanya di lengkapi dengan gambar sedangkan yang dalam postingan, Image tidak dimunculkan dan pada judul diatasnya terdapat tulisan Baca Juga.

Anda mungkin sudah sering melihat pada blog yang Anda kunjungi, biasanya kode ini di awali dengan tulisan "Baca Juga" dan berisikan 3 sampai 4 judul postingan yang sesuai dengan label yang biasanya dimunculkan pada tempat khusus mirip sebuah kotak (tergantung Jenis CSS yang digunakan). Artikel terkait dalam postingan ini diharapkan mampu mendatangkan klik bagi para pengunjung blog. Olehnya itu, patutlah bagi Anda untuk mempercantik bagian ini agar visitor Anda terpancing untuk klik link judul baca juga di tengah postingan ini. Nah, apakah Anda tertarik untuk memasangnya pada blogger Anda, jika iya, maka silakan ikuti proses penerapannya pada tutorial dibawah.

Artikel Terkait di Tengah Postingan Keren Responsive

Pada tutorial cara membuat baca juga di blog, akan disajikan dengan beberapa tampilan. Disini saya membagikan 3 jenis style berbeda, jadi silakan pilih yang menurut Anda cocok untuk dipasang sebagai Artikel Terkait di dalam Postingan.

Sebenarnya semua sama saja, yang terpenting adalah penerapan pada kodenya serta cara Anda menempatkan "tag / label" pada masing-masing artikel yang dibuat agar script ini betul-betul berguna sebagai artikel terkait pada postingan.

Cara Membuat Baca Juga (Artikel Terkait Dalam Postingan)

Pada proses cara membuat baca juga ini, saya akan bagikan 2 jenis tampilan kotak / kolom baca juga yang menarik untuk pemasangan artikel terkait ditengah postingan ini.

Sebelumnya silakan Masuk ke menu Theme ➢ Klik tombol Edit HTML ➣ Tambahkan CSS di bawah ini sebelum kode ]]></b:skin> atau </style>

Baca Juga Tampilan Pertama

/* dp baca juga 1 */
.dewa-bacajuga{display:inline-block;background:#34495e;color:#fff;position:relative;padding:0;margin:20px auto;width:84%;border:6px double #fff;}
.dewa-bacajuga h4{background:#f28d47;padding:8px 12px 8px 30px;margin:0;font-size:15px;font-weight:700;text-transform:uppercase;color:#fff;border:1px solid #2e88c5}
.dewa-bacajuga h4:before{content:'\f05a';font-family:fontawesome;position:absolute;font-weight:400;margin:0 5px 0 2px;color:#fff;overflow:hidden;left:10px;transition:all .3s}
.dewa-bacajuga ul{background:rgba(38,62,87,0.8);margin:0;padding:20px}
.dewa-bacajuga ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.dewa-bacajuga ul li:before{content:'\f087';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(255,255,255,0.7);overflow:hidden;font-size:100%;left:10px;transition:all .3s}
.dewa-bacajuga ul li:hover:before{content:'\f058';font-family:fontawesome;color:#f1c40f;}
.dewa-bacajuga a{color:#fff;font-size:15px;margin:0 0 0 30px;}
.dewa-bacajuga a:hover{color:#fff;text-decoration:underline}
.dewa-bacajuga ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.dewa-bacajuga{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.dewa-bacajuga h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.dewa-bacajuga a{font-size:14px;margin:0}.dewa-bacajuga a:hover{color:#e74c3c}
.dewa-bacajuga ul li{padding:5px 0}
.dewa-bacajuga ul li:before,.dewa-bacajuga ul li:hover:before{display:none}}

Baca Juga Tampilan Ke Dua

/* dp baca juga 2 */
.dewa-bacajuga{position:relative;padding:0;margin:15px auto;width:100%;}
.dewa-bacajuga h4{background:#f28d47;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.dewa-bacajuga ul{margin:0;padding:0}
.dewa-bacajuga 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}
.dewa-bacajuga ul li:nth-child(odd){background:#fefefe}
.dewa-bacajuga ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.dewa-bacajuga ul li:before{content:'\f026';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#a158e4;overflow:hidden;transition:all .3s}
.dewa-bacajuga ul li:hover:before{content:'\f026';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.dewa-bacajuga a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.dewa-bacajuga a:hover{color:#0383d9;text-decoration:underline}
.dewa-bacajuga 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)}}

Kode CSS ini menggunakan Font Awesome, Silakan check pada template Anda, apakah sudah menggunkan font Awesome. Jika belum, silakan dipasang agar iconnya bisa tampil.

Related Posts Baca Juga Otomatis ditengah Postingan
Setelah menempatkan CSS tadi, sekarang adalah pemasangan script Baca juga otomatis ini. Tambahkan kode di bawah ini sebelum tag </head>

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='dewa-bacajuga'>
<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>

Selanjutnya, cari dan ganti kode <data:post.body/> dengan kode di bawah ini

Kemungkinan akan ada beberapa kode <data:post.body/> dalam template Anda, tergantung template yang digunakan, maka coba saja satu persatu sampai artikel terkait muncul.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='dewa-bacajuga'>
<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>

Untuk menambah jumlah judul yang muncul, silakan ubah nilai max-results=3&quot;  sesuai dengan keinginan Anda. Tapi saran saya cukup untuk 3 saja, karena script ini mempengaruhi kecepatan blog. Dan silakan atur CSS sesuai keinginan Anda.

Saatnya untuk melihat hasil dari tutorial diatas. Silakan check tiap postingan di blog Anda. Apakah script baca juga otamatisnya sudah muncul. Jika belum, coba periksa lagi prosesnya dari awal.

Demikian tutorial kali ini tentang Cara Membuar Artikel Terkait Baca Juga Didalam Postingan Blog, Semoga bisa diterapkan dengan baik diblog Anda. Seoga bermanfaat.