cara membuat related post

Related post pada halaman blog sagat diperlukan, cara membuat related post ini juga sudah tergolong lebih mudah saat ini ketimbang dihari hari yang dulu, sebab pemakaian related post ini saat ini sudah hampir 93% pengguna blog . Semakin banyaknya pengguna widget related post ini sehingga banyak pakar pakar blog yang sudah membuat script tersebut dan saya juga ikut ikutan. Kegunaan dari widget related post ini tidak lain adalah untuk mengait hati para pengunjung halaman blog agar merasa nyaman singgah dihalaman blog dan membuka beberapa link artikel yang dibutuhkannya. Pengaruh widget related post ini dapat mempengaruhi jumlah pengunjung pada halaman blog anda. Script widget related post ini memakai sistem random.Gambar dibawah ini adalah screen shoot tampilan widget Relate Post ini, Oke langsung saja menuju TKP.

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

#related-posts { float : left; width : 480px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; font-weight: bold; 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: bold; 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(&quot;&quot;) 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; } #related-posts ul li{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrMc8nyWFy7XSBvobOPn2OcwS4MmSUwFgbmLmDB3WPYkvnD6Af_JtzMGAQNOyDZoripO3aVeo5_tq2ueAlCg4JFT2-uWAw4_PNBqLVkSOjhpfnskvIA09C11x7Y7-z79SgkhayleYC5RI/s1600/ico-rss.jpg) no-repeat ;display:block;list-style-type:none;margin-bottom: 13px;padding-left: 30px;padding-top:0px;} #related-posts ul li a {block;color: #222}#related-posts ul li a:hover {block;
color: #990000;
}

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Cari code
  

  <div class='post-footer-line post-footer-line-2'/>

  
  atau Kode
  

  <div class='post-footer-line post-footer-line-3'/>

• Copy kode dibawah ini pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
• Copy Code HTML dibawah ini, paste di bawah code
  <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda atau seperti related post diatas sosial share yang ada dibawah postingan ini.
• Save template anda dan lihat hasilnya, selamat berkreative.

<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 cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://googledrive.com/host/0Bw9mMVirmSW0NThSRWZQNm9jNEE' type='text/javascript'/>
<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></b:loop>
<h2 class='title'>Judul widgetnya </h2>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; // Jumlah link yang ditampilkan
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if><div style='clear: both;'/>

Keterangan Code

• Tulisan kode warna MERAH adalah jumlah tampilan link related post yang akan ditampilkan.
• Tulisan warna BIRU adalah judul dari related post ini, silahkan ganti dengan judul related yang anda sukai.
• Bila anda ingin lebih berkreasi silahkan anda edit CSSnya untuk menyesuaikan tampilan related post ini dengan tems template anda.

Kesimpulan

Widget Related Post ini sangat bagus anda pasang di halaman blog anda selain untuk mempercantik tampilan akan meningkatkan trafik pengunjung halaman blog anda. Widget Related Post ini valid html 5 dan CSS 3.