Cara Membuat Related Posts

CARA MEMBUAT RELATED POSTS ARTIKEL TERKAIT DI BLOGGER BLOGSPOT

Cara bikin Related Posts biasa atau tanpa gambar adalah sebagai berikut:

1. Login/masuk blogger.com -> klik blog yang akan diedit
2. Klik Template -> Edit HTML -> Lanjutkan -> kasih tanda tik pada Expand Widget Template
3. Cari kode ]]></b:skin>
4. Letakkan kode berikut di atasnya kode no.3:

1. #related-posts { float : left; width : 468px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; }  
2. #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }  
3. #related-posts a { text-decoration : none; }  
4. #related-posts a:hover { text-decoration : none; }  
5. #related-posts ul { margin : 10px 5px 5px 20px; padding : 0; }  

5. Cari kode </head>
6. Letakkan kode beirkut di atasnya kode no.5

1. <script src='http://hbhost.googlecode.com/files/Related-posts.js' type='text/javascript'/>  

7. Cari kode <data:post.body/>
8. Letakkan kode beirkut di bawahnya kode no.7:

view plainprint?

1. <b:if cond='data:blog.pageType == &quot;item&quot;'>  
2. <div id='related-posts'>  
3. <div style='font-size:18px'><b>Related Posts:</b></div>  
4. <b:loop values='data:post.labels' var='label'>  
5. <b:if cond='data:label.isLast != &quot;true&quot;'/>  
6. <b:if cond='data:blog.pageType == &quot;item&quot;'>  
7. <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>  
8. </b:loop>  
9. <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();  
10. </script>  
11. </div>  
12. </b:if>  

Selesai. Hasilnya di bawah setiap artikel di alkhoirot.net


CARA MEMBUAT RELATED POSTS DENGAN GAMBAR THUMBNAIL DI BLOGGER BLOGSPOT

Maksud Related Post dengan Gambar adalah Related Post yang mengandung gambar di atas setiap artikel. Contohnya, lihat gambar berikut:

Ikuti panduan singkat berikut:

1. Login/masuk blogger.com -> klik blog yang akan diedit
2. Klik Template -> Edit HTML -> Lanjutkan -> kasih tanda tik pada Expand Widget Template
3. Cari kode </head> :
4. Letakkan kode berikut persis di atasnya kode no.3

1. <!--Related Posts with thumbnails Scripts and Styles Start-->  
2. <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>  
3. <style type="text/css">  
4. #related-posts {  
5. float:center;  
6. text-transform:none;  
7. height:100%;  
8. min-height:100%;  
9. padding-top:5px;  
10. padding-left:5px;  
11. }  
12.   
13. #related-posts h2{  
14. font-size: 1.6em;  
15. font-weight: bold;  
16. color: black;  
17. font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;  
18. margin-bottom: 0.75em;  
19. margin-top: 0em;  
20. padding-top: 0em;  
21. }  
22. #related-posts a{  
23. color:black;  
24. }  
25. #related-posts a:hover{  
26. color:black;  
27. }  
28.   
29. #related-posts  a:hover {  
30. background-color:#d4eaf2;  
31. }  
32. </style>  
33. <script type='text/javascript'>  
34. var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjy5bD_ZVNlq9aKgAjyvMUIC2odjl75AObuWco2AuxYdBnU6a0aCyg4idY0LxnlkeP_cr6TZToqTt9Fp8VRklAejdUlkoLSWLiZeN21DkJyxxiQt_F9xwmRhDvMkSrxfxNz9S7DMFdOJc/s400/noimage.png";  
35. var maxresults=5;  
36. var splittercolor="#d4eaf2";  
37. var relatedpoststitle="Related Posts";  
38. </script>  
39. <script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>  
40. <!-- remove --></b:if>  
41. <!--Related Posts with thumbnails Scripts and Styles End-->  

5. Cari kode ini: <div class='post-footer-line post-footer-line-1'>
6. Letakkan kode berikut persis setelah/di bawahnya kode no.5:

1. <!-- Related Posts with Thumbnails Code Start-->  
2. <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>  
3. <div id='related-posts'>  
4. <b:loop values='data:post.labels' var='label'>  
5. <b:if cond='data:label.isLast != &quot;true&quot;'>  
6. </b:if>  
7. <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>  
8. <script type='text/javascript'>  
9. removeRelatedDuplicates_thumbs();  
10. printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);  
11. </script>  
12. </div>  
13. <div style='clear:both'/>  
14. <!-- remove --></b:if>   
15. <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>  
16. <a href='http://www.alkhoirot.net/2011/05/related-posts-dengan-gambar.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://www.alkhoirot.net/' ><img style="border: 0" alt="Blogger Tutorial" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>  
17. </b:if></b:if>  
18. <!-- Related Posts with Thumbnails Code End-->  

7. Klik Simpan Template. Selesai.