menu baca juga bawaan viomagz bermanfaat untuk mendapatkan banyak visitor betah berlama lama berada di blog. Dengan banyaknya artikel artikel terkait yang muncul membuat para pengunjung penasaran untuk mengklik menu baca juga tersebut.
Nah, agar tampilan relatedpost inline baca juga ini lebih keren, saya akan memberikan cara merubah tampilan relatedpost baca juga menjadi lebih keren.
merubah tampilan baca juga viomagz
- Pertama, Anda login blogger
- Buka bagian tema lalu klik edit HTML
- Lalu cari kode /* BACA JUGA */
- Bila sudah menemukan kode di atas, hapus kode di bawahnya seperti berikut :
#baca-juga {
display: none;
}
.post-body #baca-juga {
display: block;
overflow: hidden;
}
.post-body .baca-juga-wrap {
max-width: 75%;
margin: 1em 0 1.6em 2em;
font-size: 0.9rem;
}
#baca-juga h2 {
font-size: 15px;
text-transform: uppercase;
}
#baca-juga a {
font-weight: bold;
display: block;
padding: 0;
}
#baca-juga ul {
margin: 0 0 0 20px;
}
#baca-juga li {
padding: 0px;
margin: .8rem 0;
}- lalu ganti dengan kode script di bawah ini :
#baca-juga {
display: none;
}
.post-body #baca-juga {
display: block;
overflow: hidden;
}
.post-body .baca-juga-wrap {
font-size: 0.9rem;
position:relative;
}
#baca-juga h2 {
font-size: 15px;
text-transform: capitalize;
position:absolute;
color:#fff;
top:-17px;
left:15px;
padding:7px 13px;
background:#008080;
font-weight:600;
z-index:1;
border-radius:30px;
}
#baca-juga a {
font-weight: bold;
display: block;
padding: 0;
font-weight:500;
color:#008080;
}
#baca-juga ul {
margin: 1.5em 0 1.5em 0;
padding:25px 20px 10px 17px;
position:relative;
background:rgba(0, 128, 128, .15);
}
#baca-juga li {
padding: 0px;
margin: .8rem 0;
list-style:none;
border-bottom:3px dotted rgba(0,0,0,.15);
padding-bottom:5px;
}- Klik save dan lihat hasilnya
Sekian cara membuat tampilan related post inline baca juga pada viomagz.