Cara Membuat Related Post/Artikel Terkait Dengan Gambar

Cara Membuat Related Post / Artikel Terkait Dengan Gambar - Selamat malam Dum-may, Alhamdulillah saya bisa share lagi buat sobat yang lagi membutuhkan, semoga bermanfaat.. pada kesempatan yang baik ini saya akan mencoba untuk memberikan tutorial bagaimana cara memasang related post / artikel terkait di bawah posting blog.

Relates post/artikel terkait merupakan salah satu cara agar mempermudah pengunjung mencari artikel-artikel yang ada di blog kita, selain itu penampilan blog kita juga terlihat lebih cantik dan profesional, namun biasanya template bawaan dari blogger ataupun worpress tidak menyertakan itu, untuk itu bagi sobat yang pengen susah-susah belajar Related Post/Artikel Terkait Dengan Gambar

• Bukalah blog sobat
• Langkah selanjutnya pilih Template >> Edit HTML
• Silahkan cari kode ]]></b:skin> (untuk lebih mudah tekan F3 atau Ctrl + F) kalau sudah ketemu pastekan kode di bawah ini, di bawah / di atas kode ]]></b:skin>

<b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px} #related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,Times New Roman,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em} #related-posts a{color:black} #related-posts a:hover{color:black} #related-posts a:hover{background-color:#d4eaf2} </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVrNsVlv7HLZUDMqt5Jh7rqFyYArZMkmKi_NXgKtar3ClXRNvDs-DoBhvOjM3K9yLpQEd1htdcOOEpvpDgiE7tkrU9mxcQuWMQaThUfJEBkIixDHT_HQfkfkrAs8SIsx6mw2IHMMnENXg/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script> <script src='https://njilun2.googlecode.com/svn/Njilun%20(relatedpost).js' type='text/javascript'/> </b:if>

• Belum selesai sobat, cari kode <data:post.body/>, kalau sudah ketemu silahkan copy pastekan script di bawah ini, tepat di bawah kode <data:post.body/> (biasanya kode <data:post.body/> lebih dari satu, jadi sobat coba saja satu persatu ya....hehehe)

<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div> <div style='clear:both'/> </b:if>

• Langkah terakhir klik Save Template, dan silahkan sobat lihat hasilnya kalau belum berhasil silahkan ulangi lagi, karena saya sendiri waktu pertama kali juga bingung ngga' berhasil-berhasil hehehe..

Demikian sedikit tutorial dari saya, semoga bermanfaat bagi sobat semua, selamat mencoba dan kalau gagal jangan menyerah ya sob. hehehe :D