Cara Membuat Kotak Baca Juga Secara Manual Sesuka Hati di Postingan Blog
Untuk semakin membuat pengunjung blog semakin betah berlama-berlama di blog kita, ada berbagai cara yang bisa kita lakukan untuk memaksimalkannya. Selain tentunya dengan membuat artikel yang berkualitas, cara lain yang bisa kita lakukan adalah dengan melengkapi fitur-fitur atau widget pendukung yang bisa kita maksimalkan untuk mempromosikan konten-konten lain yang ada di blog kita. Dengan bacaan beragam yang kita tawarkan, maka bukan tidak mungkin pengunjung akan ketagihan untuk membaca setiap artikel di blog kita.
Salah satu dari fitur yang bisa kita pasang untuk membuat pengunjung semakin betah adalah dengan memasang fitur Related Post atau biasa juga disebut "Baca Juga" yang bisa kita pasang di tengah-tengah postingan artikel kita. Salah satunya yaitu yang berbentuk kotak sederhana seperti contoh tampilan berikut ini:
Sebenarnya ada tiga pilihan untuk memasang kotak "baca juga" menjadi seperti tampilan di atas. Kita bisa membuatnya muncul secara otomatis, muncul berdasarkan label, atau memasangnya secara manual. Saya sendiri menyarankan cara terakhir (cara Manual), karena dengan memasang secara manual kita bisa sesuka hati mengatur kemunculan dan judul artikel yang ingin ditampilkan. Dengan cara ini, kita bisa memasangnya hanya pada artikel-artikel tertentu yang kita kehendaki. Selain itu, kita juga bisa mengatur sendiri daftar judul apa saja yang akan kita tampilkan pada kotak baca juga.
Cara Membuat Kotak Baca Juga Secara Manual Sesuka Hati
1. Buka akun blogger anda.
2. Pilih menu tema dan klik edit html.
3. Cari kode </head> dan letakkan kode berikut ini di atasnya.
<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>
4. Jika sudah maka simpan kembali template anda.
Jika anda ingin menerapkannya di salah satu postingan anda, maka pilih menu edit pada postingan tersebut dan buka pada mode html. Anda bisa menentukan sendiri di mana tempat anda ingin meletakkan kotak "baca juga" di dalam artikel tersebut.
5. Jika sudah, maka letakkan kode berikut ini di tempat yang anda inginkan tersebut (masih dalam mode html)
<div class="bacajuga"> <h4>Baca Juga</h4> <ul> <li><a href="Link Artikel 1">Judul Artikel Yang ingin Anda Tampilkan</a></li> <li><a href="Link Artikel 2">Judul Artikel Yang ingin Anda Tampilkan</a></li> <li><a href="Link Artikel 3">Judul Artikel Yang ingin Anda Tampilkan</a></li> <li><a href="Link Artikel 4">Judul Artikel Yang ingin Anda Tampilkan</a></li> <li><a href="Link Artikel 5">Judul Artikel Yang ingin Anda Tampilkan</a></li> </ul> </div>
Keterangan: tulisan berwarna merah merupakan judul-judul artikel yang bisa anda tentukan sendiri sesuka hati anda. Sedangkan tulisan yang berwarna biru adalah link-link dari judul-judul artikel yang disesuaikan dengan judul-judul artikel yang anda pasang tadi. Anda juga bisa menambahkan lagi judul (serta linknya) yang ingin anda tampilkan semau anda sesuka anda. Oya, pastikan juga kode font awesome sudah terpasang di template blog anda.
6. Jika sudah diatur semuanya, silahkan publish kembali postingan anda dan lihat hasilnya.
Demikianlah Cara Membuat Kotak Baca Juga Secara Manual Sesuka Hati di Postingan Blog. Semoga bermanfaat.
