Akan saya bagikan 2 macam tampilan dari menu Baca juga, yaitu versi Single kolom dan versi Multiple kolom.
Sebagai pelengkap akan saya lampirkan juga kode untuk memunculkan tombol Demo dan Download yang cukup Profesional tampilannya.
1. Menu Baca juga Single kolom.
a. Cari kode ]]></b:skin> atau </style>, kemudian letakkan kode berikut ini di atasnya.
.bluebox{padding:10px;font-size:14px;line-height:1.5;background:rgba(186,208,228,.37);border-radius:4px;border-left:4px solid;color:#000;border-color:#3b5998}
b. Tempatkan kode berikut pada saat posting, gunakan mode HTML.
<div class="bluebox"><b>Baca Juga</b>: <a href="https://www.online-income.my.id/2022/01/bagi-yang-belum-dapat-bansos-segera-isi.html" target="_blank" title="Judul Artikel">Bagi yang belum berkesempatan mendapatkan BANSOS</a></div>
<style type='text/css'>.bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}.bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-11px;padding:0 15px;border:1px solid #DDD}.bacajuga ul{margin:0;padding:20px;list-style:none}.bacajuga ul a:before{font-family:fontawesome;content:"\f046";padding-right:10px}.bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}</style>
<div class="bacajuga"> <h4>Baca Juga</h4> <ul> <li><a href="https://www.online-income.my.id/2021/02/program-afiliasi-dari-aplikasi-dan.html">Program afiliasi dari Aplikasi dan Website</a></li>
<li><a href="https://www.online-income.my.id/2021/02/event-terbaru-snackvideo.html">Even terbaru SnackVideo</a></li>
<li><a href="https://www.online-income.my.id/2022/06/cara-mendapatkan-ribuan-like-di.html">Cara mendapatkan ribuan Like di postingan Facebook</a></li>
<li><a href="Link Artikel 4">Judul Artikel Yang ingin Anda Tampilkan</a></li>
<li><a href="Link Artikel 5">Judul Artikel Yang ingin Anda Tampilkan</a></li>
</ul> </div>
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:10px 10px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#f39c12;}
.demo:hover {background-color:#60B8F4;color:#fff}
.download:hover {background-color:#C77E0A;color:#fff}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="LINK-DEMO" target="_blank">DEMO</a></li> <li><a class="download" href="LINK-DOWNLOAD" target="_blank">DOWNLOAD</a></li> </ul> </div>
<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="LINK-DEMO" target="_blank">DEMO</a></li> </ul> </div>
