Cara Mudah Membuat Artikel Terkait (Related Post)

Membuat artikel terkait? tentu itu adalah hal biasa, tapi bagaimana jika kita memodifikasi artikel terkait tersebut menjadi sesuatu yang unik dan menarik?. Nah Itu baru luar biasa, untuk itu saya akan mengajarkan kepada anda bagaimana caranya memodifikasi artikel terkait anda.

Pada artikel yang lalu - lalu , saya telah menjelaskan bagaimana cara membuat related post/Artikel Terkait dengan rinci dan saya telah berjanji akan mengajarkan cara memodifikasi artikel terkait. Sebelum kita masuk ke tahap ini ada baiknya  kamu membaca terlebih dahulu Cara membuat related post, dan modifikasi ini hanya berlaku pada jenis linkwithin.

Langkah Pertama / First Step

• Silahkan kunjungi web blogger, dan masuk ke Tata Letak - Edit Html
• Silahkan download template lengkap.
• Beri centang di Expand Template Widget.

Langkah Kedua / Second Step

• Silahkan Copy code di bawah ini, lalu letakkan di atas kode ]]></b:skin>

#rp{margin:10px 0;padding:0;font-size:12px;list-style:circle}
#rp h2{color:#000;font-size:12px;font-family:Arial, Tahoma, Verdana;font-weight:700;padding:5px}
#rp ul li a{padding:10px;display:block;color:#000;text-decoration:none;border-bottom:1px dotted silver}
#rp li a:hover,#rp li a:active {background:#fff;color:#073763;text-decoration:none;padding:12px}

Keterangan
Pada list-style:circle dapat anda ganti dengan list-style: url(url gambar anda). Usahakan ukuran gambar tidak lebih dari 16x16 px.

Langkah Ketiga / Third Step

• Cari kode <div class='post-footer-line post-footer-line-3'>
• Lalu copy code di bawah ini dan paste tepat di bawahnya.

<div id='rp'><h2>Artikel Terkait</h2><ul id='rp'>
<script type='text/javascript'>
 removeRelatedDuplicates();
 printRelatedLabels();</script></ul></div>

Alternatif kedua

• Jika anda tidak bisa menemukan kode <div class='post-footer-line post-footer-line-3'>, silahkan copy code tersebut tepat di bawah <data:post.body/> jika anda tidak memakai automatic readmore. 
• Jika anda memakai automatic readmore , maka kode <data:post.body/> akan ada 2. Sebagai contoh :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read More - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

<div id='rp'><h2>Artikel Terkait</h2><ul id='rp'>

<script type='text/javascript'>

 removeRelatedDuplicates();

 printRelatedLabels();</script></ul></div>
</b:if>

Copy tepat di bawah code <data:post.body/> yang kedua. Bagi anda yang tidak mengerti apa itu automatic readmore silahkan baca di sini.

Keterangan

• Pada text yang berwarna biru bisa anda ganti dengan yang lain , karena tulisan tersebut merupakan contoh dari text anda.
• Terkadang kode <div class='post-footer-line post-footer-line-3'> tidak selalu ada di setiap blog, makanya saya berikan 2 opsi. 

Sebenarnya untuk memodifikasi kode - kode sejenis ini anda minimal harus sudah bisa menguasai Html dan Css. Jadi nantinya akan saya ajarkan kode - kode tersebut di Belajar html untuk pemula dan Belajar css keren.