Membuat Panel Related Post Manual pada Web

Related post atau post yang berkaitan adalah salah satu fungsi pada posting yang biasanya berisi mengenai link yang saling berkaitan. Biasanya, link terebut berkaitan dengan postingan yang sedang di baca. Related post kali ini terletak di tengah tengah artikel, sehingga pembaca konten dapat melihat secara langsung.

Related post kali ini, kita akan buat secara manual. Kita akan isi link di dalamnya sesuai dengan kriteria yang kita inginkan. Dan sifatnya pun statis link dan tidak berubah. Kita akan bermain banyak menggunakan CSS. Ok, langsung saja kita buat codenya sebagai berikut :

 
/*pengaturn untuk posisi box-nya*/
.post-related {
    padding: 15px 15px 0 15px;
    margin-top: 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    position: relative;
}

/*pengaturan posisi font nya*/
.post-related h4 {
    font-size: 14px;
    margin: 0;
    display: inline-block;
    padding: 0 10px;
    background: #fff;
    position: absolute;
    top: -10px;
    left: 10px;
    color: #7d7d7d;
}
 

Code CSS di atas dapat Anda modifikasi sesuai dengan css dasar web Anda. Setelah selesai, silahkan ketik code HTML seperti di bawah ini :

 
<div class="post-related">
	<h4>Baca juga :</h4>
	
	<ul>
		<li>Contoh label related post.</li>
	</ul>
</div>
 

Sedikit penjelasan code di atas, pada CSS kita menggunakan nama class post-related sehngga pada HTML kita juga menggunakan class yang sama. Kemudian tag <h4> pada css berfungsi untuk style header panel yang akan ditampilkan.

Apabila sudah selesai, maka tampilan panel related post akan terlihat seperti di bawah ini :

Nah, mudah sekali bukan cara pembuatannya? Demikianlah penjelasan singkat mengenai Membuat Panel Related Post Manual pada Web. Semoga dapat bermanfaat buat Anda.