Cara Membuat Related Post di Tengah Artikel Blogger

Lemper Bungkus Desember 25, 2022

Pembuka

Bagi sebagian orang terutama para blogger pasti mencari tutorial Related Post atau posting terkait di tengah artikel dan pastinya banyak sekali orang- orang sudqh membuat tutorial tersebut. Namun jika kalian belum menemukan yang pas mungkin bisa mencoba yang satu ini.

Cara Membuat Related Post di Tengah Artikel Blogger

Buka Dashboard Blogger
Klik Tema
Tekan icon Segitiga Terbalik
Pilih Edit HTML

Tambahkan kode css di bawah ini dan letakan di atas kode

]]></b:skin>

atau di atas kode

 </style>

Jangan lupa support blog ini dengan cara berdonasi di Sociabuzz atau Trakteer.id

/* ubah warna cari kode #f89000 dan %23f89000 */
.postTextRelated{position:relative;margin:42px 0;padding:1.5em 0;border:1px solid #eceff1;border-left:0;border-right:0; font-size:14px;line-height:1.8em;display:none}
.postTextRelated a{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
.postTextRelated a:hover{opacity:.8}
.postTextRelated b{font-size:13px;font-weight:400;margin:0;padding:2px 14px;background-color:#fefefe;border:1px solid #e6e6e6;border-radius:15px; position:absolute;top:-15.5px;left:20px}
.postTextRelated ul{margin:8px 0 0;padding-left:20px}
.postTextRelated li:hover{margin-left:5px}
.postTextRelated li{background:url("data:image/svg+xml,") left / 20px no-repeat;list-style-type:none;padding:0 25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f89000;transition:all .4s ease}

/* css darkmode sesuaikan class (.drK) */
.drK .postTextRelated b{background-color:#1e1e1e;}
.drK .postTextRelated,.drK .postTextRelated b{border-color:rgba(255,255,255,.15)}

Selanjutnya silakan salin kode di bawah ini dan letakkan tepat di bawah kode
```
<data:post.body/>
```
biasanya kode ini ada lebih dari 1 tergantung template apa yang kalian gunakan silakan coba satu per satu, untuk pengguna template median-ui 1.6 bisa letakkan di bawa kode ini
```
<div class='pS post-body postBody' id='postBody'><data:post.body/><
```