Animekume- Hello gan masih sehat semuakan? pada hari ini kebetulan saya akan membuat tutorial sederhana bagaimana cara membuat artikel terkait kedalam postingan, hal ini bertujuan untuk menanamkan internal link dan untuk meningkatkan visitor untuk mengunjungi sebuah artikel.
 |
| sumber: google.com |
Pada dasarnya banyak sekali yang sudah share tutorial-tutorial membuat artikel terkat di postingan, namun kebanyakan juga sering menggunkan Javascript untuk menambahkannya, ya untuk yang sudah terbiasa dengan javascript mungkin sudah menjadi hal biasa. Namun, untuk yang belum menguasai javascript pasti menganggap hal ini sebagai hal yang sulit. Lalu bagaimana cara membuatnya tanpa menggunakan javascript mari kita simak tutorial membuat atikel terkait di postingan.
Baca Juga
Cara manual memasukan artikel kedalam kotak baca juga
1. Langkah pertama silahkan masuk dulu ke akun Blogger
2. Langkah berikutnya menambahkan CSS terlebih dahulu Klik Tema > edit HTML
3. Masukan Script di bawah ini tepat di atas </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>
4. Jika sudah di pasang kemudian Save Template
5. Sampai di sini kalian sekarang sudah bisa membuat artikel terkait namun masih belum selesai tutorial kali ini kalian harus memasukan script untuk menambahkan artikel terkait di potingan sesuka hati
6. Masuk ke artikel yang ingin di beri Baca Juga lalu rubah mode Compose ke mode HTML agar bisa di tambahkan.
7. Setelah itu silahkan copy script di bawah ini dan masukan ke dalam artikel yang ingin di tambahkan artikel terkait
<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>
Silahkan ganti tanda pagar (#) dengan url link tujuan kalian dan masukan HTML diatas sesuai yang di inginkan misal di tengah, di bawah atau di atas.
EmoticonEmoticon