Making Related Articles or Related Posts with Thumbnails

Making Related Articles or Related Posts with Thumbnails Shifted Under the Post is actually quite easy. Why is that? Because you only have to copy their code and follow the instructions. This time we will be a little mengobok meddle with the HTML template blog. As always you simply login to your blog >> Dashboard >> Template >> Edit HTML >> Do not forget to check Expand Widget Templates. But it would be nice before you back up your blog template first to keep things that are not desirable, so that if an error occurs can be restored to its original template.

Then find the code </ head>, make it easier to search, press CTRL + F on your keyboard and then enter the code </ head> earlier. After the meet please copy the code below and paste the code BEFORE </ head> earlier.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://kompiajaib.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>

 
<!--Related Posts with thumbnails Scripts and Styles End-->

 

Then find the code like below:

 

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

 

if it does not meet the following search:

 

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

Then copy the code below and paste it AFTER one of the above code you found.

 

<!-- Marquee Kompiajaib Related Posts with Thumbnails Code Start--> <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> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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=12&quot;' type='text/javascript'/></b:if></b:loop> <h3><b>Baca Juga Artikel Terkait Lainnya: </b></h3> <div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'> <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=12; var relatedpoststitle=&quot;&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee> <div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://sarifpbg.blogspot.com/2012/12/cara-membuat-related-post-bergambar-di.html' target='_blank'>widget</a></div> </div> </div><div style='clear:both'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> </b:if> </b:if> <!-- Marquee Kompiajaib Related Posts with Thumbnails Code End-->

 

Notice Baca Juga Artikel Terkait Lainnya: can you replace it with the phrase you want.

 

# 444 for the background color of the box.

And 12 to indicate the number of related posts being displayed.


Please do preview to make sure the widget is running or not, then please save the template and then see the result .... interesting is not it ...

Similarly, sharing Making Related Posts with Thumbnails Shifted Under this Post hopefully useful. Do not be afraid to try something new. Everyone will try and error experience.

 

Sumber : http://sarifpbg.blogspot.com/2012/12/cara-membuat-related-post-bergambar-di.html