Cara Membuat Widget Related Post di Blog/Website

Berikut akan saya jelaskan mengenai Cara Membuat Widget Related Post / Related Article / Post Terkait di Blog / Website.

apakah yang anda maksut seperti gambar di bawah ini?

jika benar, akan saya jelaskan serinci mungkin untuk membuat nya. anda bisa menempatkan related post tersebut di manapun anda inginkan. tetapi kebanyakan orang meletakkan nya di bawah artikel agar ketika visitor selesai membaca posting kita, mereka akan otomatis membaca juga related post kita yang memungkinkan pengunjung membuka artikel kita yang lain, sehingga mereka betah berlama-lama di blog kita dan akan meningkatkan kualitas blog kita di mesin pencari seperti google.

Langsung saja ke pokok pembahasan nya.

jika anda menggunakan blog dari blogger, berikut akan saya jelaskan cara membuat related post di blogger.

1. masuk ke dashboard anda, pilih template
2. lalu klik edit HTML
3. akan ada kode html template blog anda, lalu cari kode </head> atau agar lebih cepat tekan ctrl+f dan tuliskan </head>
4. jika sudah ketemu letakkan kode berikut tepat di bawah kode </head>
   

    <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2IvWygR0I5elT_dD_kGFyLlOCR35svhRyXJFXdHIaLNWDcM0-7Zqlr4I3YKxz9nkKtHl11EP16jvJgASxLoeie-bRlosXAsB1UsV1k0BJw3VpauxvAo87OyJd5Z7BDR3_bumpzt7BOhI/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/11631137121/related_post_pelajaran_blog.js' type='text/javascript'/>

5. berikutnya jika anda akan membuat related post di bawah posting, carilah kode <data:post.body/> lalu letakkan kode berikut tepat di bawah nya

<br/><br/><b:if cond='data:blog.pageType == "item"'><div id="related-posts"><font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><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>

6. catatan, jika hasilnya tidak tepat di bawah posting, maka anda dapat memindahkan kode yang berada di bawah kode <data:post.body/> ke <data:post.body/> yang lainnya, karena biasanya akan di temukan banyak kode tersebut
7. jika tidak bisa letakkan kode di nomor 5 tersebut di atas kode <footer>
8. selesai klik simpan dan lihat hasilnya

apabila anda ingin membuatnya di sembarang tempat yang anda inginkan

1. masuklah ke menu Layout atau tata letak
2. tambahkan widget html/java script
3. letakkan kode nomor 5 tadi, klik simpan dan lihat hasilnya

sekian tutorial dari saya mengenai Cara Membuat Widget Related Post di Blog/Website, semoga bisa membantu, jika ada yang di tanyakan atau ingin menambahkan silahkan berkomentar