Dibawah ini Priview tampilan dari related posts nya :
Membuat/Menampilkan Related post (artikel Terkait)
A.Kode CSS untuk related Post
1.Log in ke blogger dengan akun yang anda miliki.
2.Klik rancangan.
3.Edit Html » Centag kotak Expand template widget.
4.Cari kode /head>
5.letakkan kode dibawah ini sebelum kode </head yang anda temukan.<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #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; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFE0722rjIgmoCPdeZbJ6ZYwLKjXoZ3k9De_vPQjlgYTN_MB3QQL6PH3Ys4S7rSzRR7s8HTMIlW0zo9xSSLobodXct527L5azwlNde3bnpxDSXv8DvJXnLMrMVbY7gc_oL_k_JyyAQ00/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://fispol.com/bisnis/vom.js' type='text/javascript'/>
B.Kode Source HTML Artikel terkat
Setelah anda selesai menempatkan css related postnya, maka ini adalah langkah terakhir. untuk diketahui bahwa penempatan source HTML related post adalah kunci dari tutorial ini. Ini menjadi sangat penting karena beberapa kegagalan terjadi pada langka ini. So perhatikan baik-baik...Nah berhubung kebanyakan template berbeda-beda strukturnya, maka kita bisa pilih salah satu opsi berikut.
Cara pertama untuk memnampilkan related post ini adalah cari kode <data:post.body/> jika ada dua, pilih yang kedua dan letakkan kode di bawah ini tepat dibawah kode <data:post.body/> tersebut.
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
<div id='related-posts'><font face='Arial' size='3'><b>Artikel terkait dengan <data:blog.pageName/>: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=4"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
</b:if>
Jika anda tidak berhasil juga membuat artikel terkait atau related post dengan cara tersebut, maka alternatif selanjutnya adalah pada <data:post.body/>, coba kita buat sedikit perubahan dengan mengapus sebagian kodenya seperti berikut (dan letakkan Tepat Dibawanya <data:post.body/>):
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'><font face='Arial' size='3'><b>Artikel terkait dengan <data:blog.pageName/>: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=4"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
</b:if>
Akirnya Kita Berhasil membuat Related Posts dan coba lihat hasilnya. Oh ya anda jangan cepat menyerah bila terdapat kesalahan, gunakanlah ini sebagai media pembelajaran okey ....Tetap semanagat dan saya yakin jika anda bisa membuat blog, maka telated post juga pasti bisa oleh anda.
.gif)
