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>
2. Menu Baca juga Multiple kolom.
<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>
b. Dalam artikel mode HTML
<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>
Biru = Link Artikel
.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;}
b. Pastikan di template blog anda sudah terpasang kode font awesome. Jika belum, silahkan tambahkan kode berikut ini di atas kode </head>
<link href=’//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css’ rel=’stylesheet’/>
c. Simpan kembali template anda.
<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>
Keterangan:
<div style=”text-align: center;”> <ul class=”btn”> <li><a class=”demo” href=”LINK-DEMO” target=”_blank”>DEMO</a></li> </ul> </div>
f. Simpan kembali perubahan pada postingan dan lihat hasilnya.
