Cara Membuat Artikel Terkait (Related Post) Manual di Postingan Blog

komputerdia.com - Related post / Artikel Terkait merupakan salah satu bagian yang cukup penting didalam suatu postingan artikel blog/website, dimana artikel terkait atau baca juga ini merupakan bagian yang menampilkan deretan link artikel yang akan menuju ke suatu artikel lainnya yang terdapat pada blog tersebut serta biasanya mempunyai topik atau kategori pembahasan yang sama.

Selain itu related post juga merupakan suatu upaya yang bisa kalian lakukan untuk membuat SEO onpage, sehingga blog yang kalian kelola mendapatkan tempat yang cukup istimewa di mesin pencari (search engine). Cara ini memang sudah dipercaya dari dulu sebagai salah satu teknik seo yang bisa kalian terapkan dengan sangat mudah.

Pada artikel sebelumnya saya sudah menjelaskan bagaimana cara membuat related post, artikel terkait atau baca juga otomatis di tengah postingan blog. Pada artikel kali ini saya akan menjelaskan bagaimana cara membuat artikel terkai atau baca juga dengan cara yang manual, dan jenis related post ini dapat kalian pasang di bagian artikel mana saja. Contohnya bisa kalian pasang di awal artikel, di tengah artikel atau bahkan di akhir artikel.

Membuat Related Post Manual di Blog

Agar tutorial dibawah ini dapat berjalan dengan baik, sebelumnya kalian pastikan terlebih dahulu jika template kalian sudah dipasang script font awesome, dimana font awesome ini biasanya disimpan atau terletak diatas kode </head> pada template, script tersebut seperti dibawah ini

 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>  

Jika script diatas belum terpasang di blog kalian, maka pasang script tersebut tepat diatas kode </head>

1. Membuat Artikel Terkait Manual di Postingan

• Langkah pertama silahkan kalian masuk ke akun blogger kalian 
• Masuk ke menu tema dan pilih edit html
• Setelah itu silahkan cari kode </head>, kemudian copy kode dibawah ini dan letakkan tepat diatas kode </head> pada template kalian

 <style type='text/css'>.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:"\f046";padding-right:10px}.bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}</style> 

• Selanjutnya silahkan kalian tekan tombol simpan tema
• Setelah itu silahkan kalian buat psotingan artikel baru di blog dengan menekan tombol Entri baru, dan tempatkan kode dibawah ini dibagian postingan yang kalian inginkan melalui mode html

 <div class="bacajuga"> <h4>Baca Juga</h4> 
<ul> 
<li><a href="link artikel" target="_blank">Judul Artikel Yang ingin kalian Tampilkan</a></li> 
<li><a href="link artikel" target="_blank">Judul Artikel Yang ingin kalian Tampilkan</a></li> 
<li><a href="link artikel" target="_blank">Judul Artikel Yang ingin kalian Tampilkan</a></li> 
<li><a href="link artikel" target="_blank">Judul Artikel Yang ingin kalian Tampilkan</a></li> 
<li><a href="link artikel" target="_blank">Judul Artikel Yang ingin kalian Tampilkan</a></li> 
</ul> 
</div>

• Kode warna merah silahkan kalian ganti dengan tulisan yang kalian inginkan
• Kode berwarna biru silahkan kalian ganti dengan alamat url/link artikel tujuan kalian
• Kode berwarna coklat silahkan kalian ganti dengan judul artikel kalian

2. Membuat Related Post Manual di postingan

• Langkah pertama silahkan kalian masuk ke akun blogger kalian 
• Masuk ke menu tema dan pilih edit html
• Setelah itu silahkan cari kode </head>, kemudian copy kode dibawah ini dan letakkan tepat diatas kode </head> pada template kalian

 <style>
/* kotaklink Mulai*/
.kotaklink {background: rgb(246, 247, 249);
    border-top: 7px solid #219FDE;border-bottom: 2px solid #219FDE; /* tebal dan warna garis*/
    margin: 25px 20px 10px 20px;
    padding: 5px 15px 0px 0;
    position: relative;
    color:#383838;}
.kotaklink:before {display: block;border-radius: 5px;content: "Tahukah Kamu?"; /* bisa diganti dengan kata yang anda sukai*/
    text-align: center;
    font-size: 16px;width: 130px;
    font-weight: bold;background: #219fde;
    position: absolute;
    border: 2px solid #219fde;left: 25px;top: -20px; /* pengaturan posisi kotak atas*/
    color: #fff;}
.kotaklink cite {text-align: left;color: #999999;
    font-size: 12px;
    display: block;
    margin-top: 5px;}
.kotaklink cite:before {content: "\2014 \2009";}/* costumisasi pada badian bullet*/
.kotaklink ul {padding: 0 0 0 15px;}
.kotaklink ul li {border-bottom:1px dashed #219FDE; /* posisi bullet*/
    line-height:1.75em;
    list-style:none;
    padding: 0 0 0px;}
.kotaklink a:visited {color: #585858;} /* warna link*/
.kotaklink ul li:before{content:'\f138';font-family:fontawesome;position:absolute; /* mengatur bullet dan animasi*/
    margin:0 9px 0 -28px;
    color:#219fde;overflow:hidden;
    transition:all .3s}
.kotaklink ul li:hover:before{content:'\f138';font-family:fontawesome; 
    -webkit-animation:bounceright .3s alternate ease infinite;
    animation:bounceright .3s alternate ease infinite}/* Pengaturan huruf dalam kotak*/
/* kotaklink Selesai*/
</style> 

• Selanjutnya silahkan kalian tekan tombol simpan tema
• Setelah itu silahkan kalian buat psotingan artikel baru di blog dengan menekan tombol Entri baru, dan tempatkan kode dibawah ini dibagian postingan yang kalian inginkan melalui mode html

 <Div class='kotaklink'>
<ul>
<li><a href="Link Artikel" target="_blank"><b>Judul Artikel Yang ingin kalian Tampilkan Dengan Manual</b></a></li>
<li><a href="Link Artikel" target="_blank"><b>Judul Artikel Yang ingin kalian Tampilkan Dengan Manual</b></a></li>
<li><a href="Link Artikel" target="_blank"><b>Judul Artikel Yang ingin kalian Tampilkan Dengan Manual</b></a></li>
<li><a href="Link Artikel" target="_blank"><b>Judul Artikel Yang ingin kalian Tampilkan Dengan Manual</b></a></li>
<li><a href="Link Artikel" target="_blank"><b>Judul Artikel Yang ingin kalian Tampilkan Dengan Manual</b></a></li>
</ul>
</div>

• Kode berwarna biru silahkan kalian ganti dengan alamat url/link artikel tujuan kalian
• Kode berwarna coklat silahkan kalian ganti dengan judul artikel kalian

3. Membuat Baca Juga Otomatis di Postingan

• Langkah pertama silahkan kalian masuk ke akun blogger kalian 
• Masuk ke menu tema dan pilih edit html
• Setelah itu silahkan cari kode </head>, kemudian copy kode dibawah ini dan letakkan tepat diatas kode </head> pada template kalian

 <style>
.kotak {
  background-color: #D2D2D2; 
  border-bottom: 2px solid #3F007F; 
  text-align: justify;
  border-radius:3px;
}
.kotak-in {
  background-color: #3F007F; 
  font-weight: bold; 
  padding: 8px;
  color: #fff;
}
.kotak ul li{
  position:relative;
  list-style:none;
  padding:2px;
  transition:all .3s;
}
.kotak ul li a{
  padding: 7px;
  text-decoration:none;
  color: #3F007F;
}
.kotak ul li a:hover{
  color: #fff;
  transition:all .3s;
}
.kotak ul li:before {
  content:"\f138";
  font-family:fontawesome;
  color:#fff;
}
</style>

• Selanjutnya silahkan kalian tekan tombol simpan tema
• Setelah itu silahkan kalian buat psotingan artikel baru di blog dengan menekan tombol Entri baru, dan tempatkan kode dibawah ini dibagian postingan yang kalian inginkan melalui mode html

 <div class="kotak">
<div class="kotak-in">Artikel Menarik Lainnya</div>
  <ul>
    <li><a href="link artikel kalian" target="_blank"><b>Masukkan judul artikel kalian disini dengan manual</b></a></li>
    <li><a href="link artikel kalian" target="_blank"><b>Masukkan judul artikel kalian disini dengan manual</b></a></li>
    <li><a href="link artikel kalian" target="_blank"><b>Masukkan judul artikel kalian disini dengan manual</b></a></li>
    <li><a href="link artikel kalian" target="_blank"><b>Masukkan judul artikel kalian disini dengan manual</b></a></li>
    <li><a href="link artikel kalian" target="_blank"><b>Masukkan judul artikel kalian disini dengan manual</b></a></li>
  </ul>
</div>

• Kode berwarna merah silahkan kalian ganti dengan tulisan yang kalian inginkan
• Kode berwarna biru silahkan kalian ganti dengan alamat url/link artikel tujuan kalian
• Kode berwarna coklat silahkan kalian ganti dengan judul artikel kalian

Semoga artikel ini dapat membantu menyelesaikan permasalahan kalian dalam membuat kotak artikel terkait, kotak baca juga atau kotak related post manual di postingan blogger. Jika ada yang perlu ditanyakan silahkan tinggalkan komentar kalian di kolom yang telah saya sediakan

Share this post