Cara Membuat Related Post With Thumbnail

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEpyBWJcvRoNpV6tsBq0XvgwSVRcQgxJHsYBMEai569jUrpa876pwLx1zPLZZIkhi-zWkEe2szMn_Xpd1sEvDMD8QvNX-uip77_oslI8G_a9UgGe1wr2YU0AsjJTY_0l-IyHow2FYnBC6/s1600/Membuat+related+post+with+thumbnail.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEpyBWJcvRoNpV6tsBq0XvgwSVRcQgxJHsYBMEai569jUrpa876pwLx1zPLZZIkhi-zWkEe2szMn_Xpd1sEvDMD8QvNX-uip77_oslI8G_a9UgGe1wr2YU0AsjJTY_0l-IyHow2FYnBC6/s320/Membuat+related+post+with+thumbnail.png" width="320" /></a></div> <span style="font-family: Arial, Helvetica, sans-serif;"><br /></span> <br /> <div> <span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post-with-thumbnail.html">Cara Membuat Related Post With Thumbnail</a>-Pada postingan sebelumnya Cara Design Blog sudahk memberikan tutorial blogger cara membuat related post. Namun related Post itu tanpa thumbnails atau tanpa gambar atau image. Related post with thumbnail ini karena menyertakan gambar maka akan menarik pengunjung untuk mengunjungi halaman terkait. Fungsi dari related post silahkan simak pada artikel <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post.html">cara membuat related post</a> sebelumnya.</span><br /> <span style="font-family: Arial, Helvetica, sans-serif;"><br /></span> <span style="font-family: Arial, Helvetica, sans-serif;">Tampilan related post with thumbnail silahkan lihat screenshoot di atas.</span><br /> <span style="font-family: Arial, Helvetica, sans-serif;">Kali ini ijinkanlah Cara Design Blog memberikan tutorial cara membuat related post with thumbnail. </span><br /> <span style="font-family: Arial, Helvetica, sans-serif;">Sudah siap menyimak tutorial blogger yang akan saya sampaikan?</span><br /> <span style="font-family: Arial, Helvetica, sans-serif;">Oke, Mari kita simak bersama </span><a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post-with-thumbnail.html" style="font-family: Arial, Helvetica, sans-serif;">cara membuat related post with thumbnail</a><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">berikut ini:</span></div> <div> <span style="font-family: Arial, Helvetica, sans-serif;">1. Masuk Dasbor Blog kamu.</span></div> <div> <span style="font-family: Arial, Helvetica, sans-serif;">2. Template > Edit HTML > Lanjutkan</span></div> <div> <span style="font-family: Arial, Helvetica, sans-serif;">3. Centang Exspnd Template Widget</span></div> <div> <span style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode: </span><span style="color: red; font-family: Verdana, sans-serif;"></head></span></div> <div> <span style="font-family: Arial, Helvetica, sans-serif;">5. Letakkan kode berikut diatas</span><span style="color: red; font-family: Verdana, sans-serif;"> </head></span><br /> <br /> <blockquote> <span style="font-family: Verdana, sans-serif;"><!--Related Posts with thumbnails Start--><br /><!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><style type='text/css'><br />#related-posts {<br />float:center;<br />height:100%;<br />min-height:100%;<br />padding-top:10px;<br />padding-left:15px;<br />padding-right:15px;<br />}<br />#related-posts h2{<br />font-size: 1.3em;<br />color: black;<br />font-family: Arial;<br />margin-bottom: 0.75em;<br />}<br />#related-posts a{<br />color:black;<br />}<br />#related-posts a:hover {<br />background-color:#eeeeee;<br />}<br /></style><br /><script type='text/javascript'><br />var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzqDiRRgAvXNopzd7ETtV1JNeAK7IYUNATEXWp3hbr_ACMG-R8TYMapXqfvVQ4xEC4jCoJYFCFvTt52dP0MT8yckLGEc7yQQjYA2j5sPeaXT0jBF3PT7PdPx0mD1ODU1_dmF-M2KaZ9aWZ/";<br />var maxresults=5;<br />var splittercolor="<b><span style="color: lime;">#cccccc</span></b>";<br />var relatedpoststitle="<span style="color: lime;"><b>Artikel Terkait</b></span>:";<br /></script><br /><script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/><br /><!-- remove --></b:if><br /><!--Related Posts with thumbnails End--></span></blockquote> <span style="font-family: Arial, Helvetica, sans-serif;">Keterangan kode:  </span><br /> <ul> <li><span style="font-family: Arial, Helvetica, sans-serif;"><b><span style="font-weight: normal;">Kode:</span></b><b><span style="font-weight: normal;">#cccccc warna hijau pada kode diatas bisa kamu ganti dengan kode warna yang kamu suka. var plittercolor: garis pembatas antar <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post-with-thumbnail.html">related post with thumbnail</a>.</span></b></span></li> <li><b><span style="font-weight: normal;"><span style="font-family: Arial, Helvetica, sans-serif;">Tulisan Artikel Terkait warna hijau di atas bisa kamu ganti dengan kata yang kamu suka.</span></span></b></li> </ul> <br /> <span style="font-family: Arial, Helvetica, sans-serif;">6. Cari:</span><span style="color: red; font-family: Verdana, sans-serif;"><p class='post-footer-line post-footer-line-1'/></span><br /> <span style="font-family: Arial, Helvetica, sans-serif;">7. Letakan kode berikut ini tepat di bawah kode no.:6.</span><br /> <span style="font-family: Verdana, sans-serif;"><br /></span> <span style="font-family: Verdana, sans-serif;"></span><br /> <blockquote class="tr_bq"> <span style="font-family: Verdana, sans-serif;"><!-- Related Posts with ThumbnailsCode Start--><br /><!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='related-posts'><br /><b:loop values='data:post.labels' var='label'><br /><b:if cond='data:label.isLast != &quot;true&quot;'><br /></b:if><br /><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=<span style="color: lime;"><b>6</b></span>&quot;' type='text/javascript'/></b:loop><br /><script type='text/javascript'><br />removeRelatedDuplicates_thumbs();<br />printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);<br /></script><br /></div><div style='clear:both'/><br /><!-- remove --></b:if><br /><!-- Related Posts with Thumbnails Code End--></span></blockquote> <span style="font-family: Arial, Helvetica, sans-serif;">Keterangan kode:  </span><br /> <ul> <li><span style="font-family: Arial, Helvetica, sans-serif;">Angka 6 warna hijau pada kode di atas bisa kamu ganti dengan jumlah related post yang ingin kamu tampilkan<b>.</b></span></li> </ul> <span style="font-family: Arial, Helvetica, sans-serif;">8. Save Template.</span><br /> <span style="font-family: Arial, Helvetica, sans-serif;">Selesai, silahkan lihat blog kamu.</span><br /> <span style="font-family: Arial, Helvetica, sans-serif;"><br /></span> <br /> <span style="font-family: Arial, Helvetica, sans-serif;">Tags:<a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post.html">cara membuat related post</a>, <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post-with-thumbnail.html">cara membuat related post with thumbnail</a></span><br /> <span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>

Cara Membuat Related Post With Thumbnail -Pada postingan sebelumnya Cara Design Blog sudahk memberikan tutorial blogger cara membuat re...

Read more »