PANDUANEKA

Aneka Panduan & Solusi Anda

25 October 2017

Cara Membuat Related Post di Bawah Postingan Blog dengan Mudah

Membuat related post pada blog baik di bawah postingan atau di dalam artikel merupakan salah satu cara untuk mengurangi bounce rate yang tinggi. Dengan memberi related post atau artikel terkait pada blog akan memberikan kemudahan navigasi kepada pungunjung untuk mencari artikel yang berkaitan atau relevan dengan topik artikel yang sedang dibaca.

Hal tersebut tentunya membuat pengunjung berpotensi untuk menjelajahi blog anda lebih lama dan juga memberikan pengalaman yang baik kepada pembaca.

Dengan memasang related post atau artikel terkait pada blog secara tidak langsung merupakan salah satu cara optimasi SEO on page juga.

Related post ini kebanyakan telah disematkan dalam template baik itu yang premium maupun yang free. Jadi kalau template blog anda sudah ada related post-nya, silahkan anda mencari artikel lainnya di panduaneka.

Tetapi jika blog anda belum memiliki, anda bisa mengikuti panduan ini dan praktekkan langsung pada blog anda.
Cara Membuat Related Post di Bawah Postingan Blog dengan Mudah

Cara Membuat Related Post di Bawah Postingan

Pada artikel kali ini, saya akan memberikan panduan cara memasang related post di bawah artikel secara sederhana tanpa thumbnail atau gambar.

Nantinya artikel-artikel yang muncul pada related post ini adalah artikel yang satu label dengan artikel yang sedang dibaca. Berikut langkah-langkahnya

1. Silahkan buka akun blogger anda.
2. Pilihlah Theme > Edit HTML
3. Carilah kode ]]></b:skin> atau </style> (Gunakan Ctrl+F untuk mempermudah pencarian), lalu copy paste kode javascript di bawah ini dan letakkan persis di atas kode ]]></b:skin>  atau </style> tadi.
/* Related Post Sederhana
--------------------------------- */#related-postsku{float:left;width:100%;margin-top:5px;margin-left:0px;font-size:13px;font-family:Arial,serif;margin-bottom:0px;}
#related-postsku a{text-decoration:none;}
#related-postsku a:hover{text-decoration:none;}
#related-postsku ul{border:medium none;margin:10px 0px 10px 0px;padding:0;}
#related-postsku ul li{display:block;background:url("https://lh3.googleusercontent.com/-6iznc81V_pQ/UcmgB6yKU3I/AAAAAAAABWc/NhxmD6789YU/s25/rss.png") no-repeat 0 0;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:30px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #cccccc;}
Kode yang berwarna kuning adalah link gambar rss dan bisa anda ganti sesuai keinginan

4. Selanjutnya cari kode </head>
5. Masukan kode Jquery dibawah ini tepat diatas kode </head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/> 
Catatan : Jika dalam template anda sudah terdapat Jquery versi lain, kode Jquery diatas tidak perlu dipasang lagi.
 
6. Selanjutnya copy paste kode script di bawah ini dan letakkan tepat diatas kode <div class='post-footer'> atau letakkan dibawah kode <data:post.body/> yang kedua atau ketiga karena biasanya dalam template ada beberapa kode tersebut.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-postsku'>
<font style='font-size:19px;color:#CC333B;font-family:Arial;'><b>Artikel Terkait: </b>
</font><font color='#fff'><b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'/><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></font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</b:if>

Keterangan :
Warna merah adalah jenis, ukuran dan warna font yang bisa anda sesuaikan sendIri
Warna kuning silahkan ganti dengan kata-kata anda sendiri
Warna biru adalah jumlah postingan yang ditampilkan, bisa anda tambah atau kurangi sendiri

7. Terakhir klik Save

Demikian panduan bagaimana cara membuat related post atau artikel terkait di bawah postingan. Semoga bermanfaat dan silahkan anda praktekkan pada blog anda. Terima kasih

No comments:

Post a Comment

- Silahkan berkomentar sesuai topik.
- Mohon centang pada Notive me agar tahu balasan dari kami.
- Sebelum bertanya, silahkan Anda cari terlebih dahulu di kotak pencarian (Search)
- Untuk setiap komentar saya akan lakukan kunjungan balik ke situs Anda dengan atau tanpa komentar
Terima kasih atas kunjungan dan komentarnya