Mangaip.com – Cara membuat related posts di tengah postingan blog. Dunia blog memang agak sedikit susah bagi yang tidak memiliki kemampuan html atau bahasa programing seperti mamang. Contohnya saja, tentang membuat related posts di tengah artikel atau postingan blog.
Kalau bagi pengguna wordpress mungkin tidak terlalu sulit karena sudah disediakan berbagai macam plugin baik yang gratisan atau premium. Untuk wordpress bisa memakai plugin In Line Related Posts.
Lalu bagaimana dengan blogger? Seperti mamang utarakan diawal, kita harus bisa mengutak-atik html pada blogger agar bisa menempatkan related post di tengah-tengah artikel postingan.
Karena pembahasannya mungkin cukup panjang, mamang akan memberikan dahulu manfaat dari penggunaan artikel terkait di postingan blog atau website.
Manfaat dari Related Posts di Tengah Postingan
Ada beberapa manfaat kalau kita menempatkan artikel terkait di dalam postingan. Diantaranya:
1. Meningkatkan Jumlah Pembaca/Pengunjung
Dengan adanya artikel terkait pada postingan kita, pembaca akan disuguhkan artikel lain yang berkaitan dengan artikel yang sedang dibaca. Maka hal ini kemungkinan bisa menambah jumlah pembaca pada blog kita
2. Mengurangi Bouncing Rate
Bounce rate, yaitu persentase visitor atau pengunjung ketika mengunjugi 1 halaman suatu web. Faktor ini bisa ditimbulkan karena kualitas artikel kita sendiri. Misalnya, berapa lama visitor kita datang mengunjungi salah satu postingan kita. Semakin cepat visitor meninggalkan postingan kita, maka akan semakin besar angka bouncingnya. Apalagi kalau visitor itu mengunjungi halaman atau page yang itu-itu saja.
Maka penerapan related posts di dalam artikel, diharapkan pembaca atau visitor bisa betah saat mengunjungi halaman blog kita.
3. Menjaga Perhatian Visitor
Penampilan halaman pun, sebaiknya sangat diperhatikan untuk meningkatkan jumlah visitor. Sebaiknya artikel itu dilengkapi dengan gambar atau diagram untuk menambah nilai plus dalam artikel kita.
Hal itu sama saja dengan membuat beberapa artikel terkait, dengan model dan tampilan yang berbeda dengan postingan kita.
Kenapa mamang memakai artikel terkait “Baca Juga” memakai yang biasa-biasa saja? Karena mamang masih tergolong awam bahasa html ditambah template mamang support AMP. Maka penempatan Artikel Terkait dalam postingan AMP, akan mamang bahas dikemudian hari.
Sudah sedikit paham dengan manfaat dari Related Posts di dalam atau ditengah artikel blog? Berikut kode penempatan untuk artikel terkait didalam postingan blog non AMP.
Penempatan Artikel Terkait/Related Post didalam Artikel Blog non AMP (Blogger)
Untuk membuat related posts di tengah postingan blogspot atau blogger, silahkan lakukah langkah-langkah dibawah ini:
1. Masuk ke dashboard blogger sobat untuk membuat related posts di tengah postingan
2. Kemudian masuk ke Template > Edit HTML
3. Cari kode </head>, Lalu letakan kode berikut tepat diatas kode </head>:
<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>
4. Kemudian cari lagi kode <data:post.body/>, biasanya kode ini terdari dari beberapa kode. Silahkan cari yang kedua atau yang ketiga. Ganti kode tersebut dengan kode html dibawah ini.
<div expr:id='"post1" + data:post.id'/>
<div class='related-post'>
<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=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Related Posts</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id'>
<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>
5. Agar tampilannya menarik, maka kita harus menambahkan kode CSS pada bagian <style> atau ]]></b:skin>. Silahkan letakan kode berikut tepat diatas kode </style> atau ]]></b:skin>
/* Related Post Inside Blog Posts */
.related-post {position: relative;background: #fff;padding: 0;margin: 10px 15px 8px 0;float: left;width: 50%;border: 1px solid #999;}
.related-post h4{background:#666 !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:none;color:#fff !important}
.related-post ul {margin:0;padding:0}
.related-post 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}
.related-post ul li:last-child{border:none !important}
.related-post a {color:#1b71bc;font-size:13px !important}
.related-post a:hover {text-decoration:underline}
Membuat Artikel Terkait di Tengah Artikel Blog WordPress
Untuk membuat related posts di tengah postingan artikel wordpress, silahkan ikuti langkah dibawah ini:
1. Masuk ke dashboard wordpress sobat
2. Pilih Plugin > Tambah Baru
3. Cari Plugin bernama Inline Related Posts
4. Pilih Instal Sekarang > Aktifkan
5. Setelah terinstall silahkan pilih Pengaturan > Inline Related Posts pada dashboard WordPress sobat. Sesuaikan pengaturan tampilannya sesuai dengan yang sobat inginkan.
6. Save.
Cara Kedua, untuk cara yang kedua ini, mamang akan memberikan tutorial tentang pemasangan related posts didalam artikel blog wordpress tanpa bantuan plugin. Simak ulasannya dibawah.
Menerapkan Related Posts di Tengah Postingan Blog Wordpess tanpa Plugin
Untuk membuat related posts di tengah postingan blog tanpa plugin, silahkan ikuti cara dibawah ini:
1. Masuk ke dashboard wordpress sobat.
2. Pilih Tampilan > Sesuaikan
3. Pilih CSS Tambahan
4. Tambahkan kode dibawah pada kolom yang tersedia
.bacajuga{
position: relative;
top: 25px;
bottom: 20px;
display: inline-block;
}
.bacajuga .titlebaca{
background-color: white;
position: absolute;
margin-left: 30px;
margin-top: -25px;
padding: 0px 15px;
}
.bacajuga .contentbaca{
border: solid 1px #000000;
padding: 20px 20px 0px 20px;
}
5. Masuk kembali pada tampilan > editor
6. Pilih Functions.php
7. Masukan kode berikut pada kolom funcntions.php di kolom yang tersedia. Letakan setelah kode paling bawah.
function ShortCodeIseng($atts){
extract(shortcode_atts(array(
'number' => 5,
'tag' => 'default-tag',
'bacajuga' => '<div class="bacajuga">',
'titlebaca' => '<div class="titlebaca"><strong>Baca Juga:</strong></div>',
'contentbaca' => '<div class="contentbaca">',
'openul' => '<ul>',
'id' => get_the_ID(),
), $atts));
$return_string .= ''.$bacajuga.''.$titlebaca.''.$openul.'';
$the_query = new WP_Query(array('tag' => $tag, 'orderby' => 'date', 'order' => 'DESC' , 'showposts' => $number , 'post__not_in' => array( $id ), 'tag__not_in' => array(00001, 00002, 00003) ));
if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post();
$return_string .= '<li><strong><a target="_blank" href="'.get_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a></strong></li>';
}
} else {
}
wp_reset_postdata();
$return_string .= '</ul>';
$return_string .= '</div>';
$return_string .= '<div class="partner-banner-aftc-baca-juga" style="text-align: center; margin-top: 30px;"></div>';
return $return_string;
}
add_shortcode( 'postingan', 'ShortCodeIseng' );
Cara Penggunaan Shortcode Related Posts pada Artikel WordPress
Agar kode diatas dapat berjalan maka tambahkan shortcode berikut didalam artikel blog yang sobat inginkan. Kode berikut ini mencari artikel terkait berdasarkan tag ya. Jadi sobat harus ingat atau menyisipkan tag pada setiap artikel blog wordpress
[postingan number=4 tag=”wordpress+tutorial” ]
Catatan:
- Number=4, artinya jumlah artikel terkait yang ingin ditampilkan
- Tag, Artikle terkait berdasarkan tag. Contohnya tag=”wordpress+tutorial” itu artinya mencari artikel terkait yang sama dengan tag “WordPress Tutorial“.
Mamang sudah mencoba menerapkan kedua cara tersebut pada artikel blog wordpress yang mamang miliki. Tapi untuk blogger mamang masih belum mencoba, karena kode diatas tidak cocok untuk blogger yang support AMP.
Bagi sobat yang ingin menambahkan atau mengkoreksi beberapa kode mengenai Membuat Related Posts di Tengah Postingan Artikel Blog, silahakan tinggalkan pesan dikomentar. Mamang sangat menghargai seseorang yang ingin berbagi.
