Sering saya melihat Artikel Terkait yang biasannya berada di
akhir postingan tetapi ini terletak di bagaian tengah posting, menurut saya hal
ini lebih menarik karena menurut yang saya alami sendiri kita lebih tertarik
untuk mengklik Artikel Terkait tersebut.
Lalu saya mencoba mencari-cari kode tersebut di beberapa
tutorial yang mnyediakan cara tersebut, setelah saya coba berbagai tutorial
kebayakan kurang pas dengan selera saya dah hasilnnya terkesan kurang oke, ada
1 tutorial yang menurut saya bagus yang saya ambil dari https://mastamvan.blogspot.com/2016/08/artikel-terkait-di-tengah-postingan-blog.html
dan sekarang saya terapkan di salah satu blog saya.
Di bagian tersebut ada tiga tipe yang bisa di terapkan di
blog tersebut namun saya menerapkan secara manual di blog saya, menurut saya
itu yang paling pas karena kita bisa menerapkannya di dagian paragraph manapun
berbeda dengan yang otomatis kita mengikuti pengaturan yang ada kekurannga
terkadang kotak artikel terkait tersebut sering memotong paragraph dan terkesan
kurang bagus.
Berikut tutorial yang saya terapkan di blog saya :
1. Buka Blogger
2. Msuk ke edit HTML
3. Cari kode </head>
4. Masukkan kode HTML di bawah ini tepat di atas kode </head>
<style type="text/css">
/*Artikel Terkait*/
.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:-14px;padding:0 15px;border:1px solid #DDD}
.bacajuga ul{padding:11px 41px 0;list-style:none}
.bacajuga ul a:before{font-family:fontawesome;content:"\f105";padding-right:10px}
.bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
</style>
5. Kemudian save
Pada tahap awal ini kita telah selesai kemudia ada kode
berikutnnya yang bisa kita terapkan secara manual tiap kali kita membuat
postingan yang baru, kita bisa meletakkannya terserah pada paragraph manapun
yang kita inginkan.
Berikut kode html yang bisa kita masukkan di postingan.
<div class="bacajuga">
<h4>Baca Juga</h4>
<ul>
<li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
<li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
<li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
<li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
<li><a href="#">Judul Artikel Yang ingin Ditampilkan</a></li>
</ul>
</div>
Catatan : Masukkan kode di atas di setiap kita membuat postingan pada tab HTML
Semoga cara ini bisa membantu bagi yang membutuhkannya.