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.
2. 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:-11px;padding:0 15px;border:1px solid #DDD}.bacajuga ul{margin:0;padding:20px;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>
3. 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.
4. 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.
5. 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.
Labels:
Blogging
Thanks for reading Cara Membuat Kotak Baca Juga Secara Manual Sesuka Hati di Postingan Blog. Please share...!
Mau tanya gan, seumpama diatas tag head udah di pasang skrip analytic, apa bisa di tambah skrip lain, terus skrip analytic yang tadi bisa kebaca nggak?
BalasHapusMaksudnya di area tag head?, kayaknya tetap kebaca gan, biasanya kan kode iklan auto ads juga diletakkan di situ. Punya saya kode iklan auto ads juga atas bawah sama kode untuk google analytic. Malahan saya juga pernah letakkan kode untuk pengaturan warna address browser jg di situ, semuanya tidak masalah alias tetap berfungsi.
HapusKenapa Artikel jadi dobel kak...Mohon solusinya
BalasHapusJadi dobel gimana ya?. Link judul kan dipasang manual, coba dicek lg mungkin masangnya dobel.
HapusMakasih gan infonya, saya mau tanya juga gan, template nya agan ini beli dimana ya, saya tertarik
BalasHapusApa ada recomendasinya
Sama-sama gan. Ini template hasil saya modifikasi. Buatan romeltea media, namanya Jurnalistik Template
HapusBos, bisa gak artikelnya diupdate. Tambahin script yang pakai ikon svg. Kalau yang dicontoh itu kan pakai ikon awesom. Update ya. Ditunggu Lo..
BalasHapus