Cara Membuat Related Post dengan Gambar di Blogspot

Pembahasan tutorial blogspot kali ini membuat related post atau artikel terkait menggunakan thumbnails hampir sama dengan widget kepunyaan Link within .Bedanya tidak adanya backlink seperti yang ada di link within jadi blog sobat akan tampak lebih profesional. Langkah pertama login ke blogger >> pilih template >> pilih edit HTML >> Expand di centang cari kode

</head>

letakkan kode di bawah ini di atas nya

<!--Related Posts with thumbnails Scripts and Styles Start--><br /><!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><style type='text/css'><br />#related-posts {<br />float:center;<br />text-transform:none;<br />height:100%;<br />min-height:100%;<br />padding-top:5px;<br />padding-left:5px;<br />}<br /><br />#related-posts h2{<br />font-size: 1.6em;<br />font-weight: bold;<br />color: black;<br />font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;<br />margin-bottom: 0.75em;<br />margin-top: 0em;<br />padding-top: 0em;<br />}<br />#related-posts a{<br />color:black;<br />}<br />#related-posts a:hover{<br />color:black;<br />}<br /><br />#related-posts a:hover {<br />background-color:#d4eaf2;<br />}<br /></style><br /><script type='text/javascript'><br />var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDO3Lj8yhvk_jDi-MYU4Y_XzZWW27FiIGvexwPdtmjgsnDMWCZuId2BjoUp_eThn_4yu_xlU_BirclYVyZx5VMeh21JcWAjyEHVMtnfot-9sUWLxMmVJS7cRcdyI1j6Mvxxgv4APCJ-Ms/s400/noimage.png&quot;;<br />var maxresults=5;<br />var splittercolor=&quot;#d4eaf2&quot;;<br />var relatedpoststitle=&quot;Related Posts&quot;;<br /></script><br /><script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/><br /><!-- remove --></b:if><br /><!--Related Posts with thumbnails Scripts and Styles End--><br />

Cari kode di bawah ini (gunakan control F untuk memudahkan pencarian lalu copy paste kode )

<div style='clear: both;'/> <!-- clear for photos floats -->

Kalau sudah ketemu letakkan kode di bawah ini tepat di atas kode tadi

<!-- Related Posts with Thumbnails Code Start--><br /><!-- remove --><b:if cond='data:blog.pageType == "item"'><br /><div id='related-posts'><br /><b:loop values='data:post.labels' var='label'><br /><b:if cond='data:label.isLast != "true"'><br /></b:if><br /><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><br /><script type='text/javascript'><br />removeRelatedDuplicates_thumbs();<br />printRelatedLabels_thumbs("<data:post.url/>");<br /></script><br /></div><div style='clear:both'/><br /><!-- remove --></b:if> <br /><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br /><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a><br /></b:if></b:if><br /><!-- Related Posts with Thumbnails Code End-->

Setelah selesai klik Save

Untuk mengatur jumlah kotak thumbnails ubah kode

var maxresults=5;

Selamat mencoba.

Posted in: blogger,blogspot,gambar thumbnails,membuat artikel terkait,related post,Tips blog