Cara Menambah Artikel Terkait Dengan Kotak DI Tengah Postingan Pada Blogger

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.

Facebook Twitter Google+