Cara Membuat Related Post Dengan GambaR

Pada artikel yang lalu Tutorial For You pernah share tentang Cara Membuat Related Post, dan pada kesempatan kali ini Tutorial For You mau share tentang Cara Membuat Related Post Dengan Gambar atau artikel terkait dengan image dan kita semua tahu bahwa related post ini merupakan bentuk optimasi sekaligus untuk mempercantik blog.

Berikut ini contoh dari Related Post Dengan Gambar/ artikel yang berhubungan dengan image






Bagi yang ingin tahu Cara Membuat Related Post Dengan Gambar ini, yuk kita ikuti langkah berikut ini :

Langkah Cara Membuat Related Post Dengan Gambar

Pergilah ke Dashboard blog kamu, lalu pilih Design, kemudian pilih tab Edit HTML.

Jangan lupa beri tanda contreng pada tulisan Expand Widget Templates.

Selanjutnya cari kode berikut:

</head>

Jika sudah ketemu, letakkan kode script berikut tepat di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts {background:#e6e6e6;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, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;} #related-posts a{background-color:#F4F4EC;border:1px solid #666;color:black;-webkit-box-shadow: inset 0 0 3px #222;-moz-box-shadow: inset 0 0 3px #222;box-shadow: inset 0 0 3px #222;-webkit-border-radius:10px;-moz-border-radius:10px;margin-top:0px;text-align:center;height:180px;} #related-posts a:hover{color:black;background-color:#d4eaf2;-moz-transform: scale(1.3) rotate(-30deg) ;-webkit-transform: scale(1.3) rotate(-30deg) ;-o-transform: scale(1.3) rotate(-30deg) ;-ms-transform: scale(1.2) rotate(-30deg) ;transform: scale(1.3) rotate(-30deg);} #related-posts img:hover {background-color:#d4eaf2;} #related-posts img {display:block;float:center;margin:5px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;border:5px solid #666;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;} </style> <script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGbULLdHdAPOx6NNuhyphenhyphenZhfRiCsEgu_dYC0zuD_DGyPGAYsMdKA3K7vqFSzCA_IBM9Yn2fTYnbfSR_ngO3NRgIPj-Lk9Q7cx7qOr5rQ9e44cQkORQrNRzYidmzwveG7gBZ-6RdyHg5yfQg/s400/noimage.png&quot;; var maxresults=5; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;Related Posts&quot;; </script> <script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

Setelah itu cari kode script

    <div class='post-footer-line post-footer-line-1'>

atau

    <p class='post-footer-line post-footer-line-1'>

Kalau sudah ketemu lalu letakan kode script dibawah ini sesudah kode tadi

<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <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=6&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script> </div><div style='clear:both'/> <!-- remove --></b:if>&lt;div style=&#39;font-size:10px;margin:8px 0px 3px 0px&#39;&gt;      by : &lt;a href=http://www.tutorial-4u.com/&gt;Tutorial For You&lt;/a&gt;&lt;br /&gt;       &lt;a href=&quot;http://www.tutorial-4u.com/2012/07/cara-membuat-related-post-dengan-gambar.html&quot; target=&quot;blank&quot;&gt;&lt;font color=&quot;blue&quot;&gt;[Get This Widget]&lt;font&gt;&lt;/font&gt;&lt;/font&gt;&lt;/a&gt;&lt;/div&gt; <!-- Related Posts with Thumbnails Code End-->

Setelah selesai, simpan template dan lihat hasilnya.