Membuat Related Posts di Tengah Postingan Blog


gacerindo.com - Dunia blog memang agak sedikit susah bagi yang tidak memiliki kemampuan html atau bahasa programing seperti mamang. Contohnya saja, tentang menerapkan 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.
Baca Juga:

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)

1. Masuk ke dashboard blogger sobat
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 == &quot;item&quot;'>
<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='&quot;post1&quot; + 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 == &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=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Related Posts</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'>
<data:post.body/>
</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/3);
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>
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}
6. Preview dan Simpan
Cara diatas bisa sobat terapkan untuk menempatkan related posts di dalam postingan blog non AMP. Lalu bagaimana dengan blog wordpress. Simak ulasannya dibawah.

Membuat Artikel Terkait di Tengah Artikel Blog Wordpress

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

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' );
8. Simpan.

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 Related Posts di Tengah Artikel Blog, silahakan tinggalkan pesan dikomentar. Mamang sangat menghargai seseorang yang ingin berbagi

Tags

You may like these posts

Show more