Cara mudah membuat halaman terkait bergambar

 Halo sobat webdesign,berikut admin akan bagikan cara memasang halaman terkait dengan artikel pada postingan blog/website.fungsi halaman terkait antara lain, mempermudah pengunjung blog untuk menavigasi postingan yang terkait erat dengan sebuah judul posting.sedangkan supaya mudah pengunjung menemukan artikel yang berhubungan,biasanya kita akan memberikan related post menggunakan berbagai macam modifikasi,seperti dengan tampilan bergambar,memberi tag tertentu supaya mempermudah menemukan yang di cari.

 Langsung saja admin akan bagikan script memasang artikel terkait atau Related post,pertama seperti biasa buka Html,lalu cari </head>,setelah itu paste kode di bawah,tepat di atas </head>
<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' /></b:if>
pada bagian width:100px;height:100px,adalah ukuran panjang dan tinggi gambar yang akan terkonversi secara otomatis,sobat bisa mengubahnya semisal menjadi width:50px;height:50px,sekarang kita lanjutan lagi.sobat webdesign cari lagi kode <div class='post-footer'>,jika sudah ketemu,selanjutnya sobat copas kode di bawah di atas kode <div class='post-footer'> tadi.
<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> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="<b>Related Posts:</b>"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'></b:if>
sobat bisa ubah bagian max-results=5,yang berarti related post atau post terkait akan menampilan jumlah post dengan jumlah 5,dan untuk mengubah Related post menjadi,seperti contoh Artikel terkait,berita terkait lainya,atau pun post terkait sobat ubah pada bagian <b>Related Posts:
semoga yang admin bagikan bisa bermanfaat salam belajar.