Agar tidak ketinggalan berita atau informasi terbaru, saya memang seringkali mengunjungi situs-situs berita untuk mengetahui situasi di luaran sana. Selain mendapatkan update informasi, tidak jarang saya mendapatkan inspirasi untuk bahan-bahan artikel saya. Salah satunya yaitu pembuatan fitur-fitur tertentu untuk melengkapi dan memperindah tampilan blog. Untuk itulah kali ini saya ingin berbagi tentang cara membuat kotak Baca Juga (Related Post) Manual Mirip di Situs Berita.
Kebetulan fitur ini saya temukan ketika sedang mengunjungi salah satu situs berita populer di Indonesia. Tampilannya simpel tapi cukup keren sehingga saya tertarik untuk membuatnya sendiri dengan tampilan yang mirip/serupa seperti di situs berita tersebut. Meski fungsinya seperti fitur baca juga, judul untuk nama fitur ini juga saya samakan bukan "baca juga", melainkan "Pilihan Redaksi" seperti di situs tersebut. Anda nantinya bisa menggantinya dengan kalimat lain sesuka anda. Ohya, tampilan screenshotnya seperti berikut ini:
Sedikit mengurai, fitur related post biasanya dibuat untuk meletakkan link berupa artikel-artikel yang masih berkaitan dengan pembahasan pada artikel tertentu. Fitur ini adakalanya diletakkan di bagian bawah artikel menjadi widget tersendiri. Namun adakalanya juga disisipkan di tengah-tengah artikel sehingga keberadaannya selalu terlihat oleh pengunjung. Tampilan di tengah artikel ini biasanya dibuat lebih sederhana berupa kotak yang diisi beberapa link judul dari artikel-artikel terkait.
Sebenarnya dulu saya juga pernah membagikan tutorial pemasangan fitur ini (baca: Cara Membuat Kotak Baca Juga Manual Sesuka Hati). Nah, kali ini saya ingin berbagi lagi pembuatan fitur tersebut namun dengan tampilan berbeda seperti yang sudah saya jelaskan di atas. Fitur baca juga mirip di situs berita ini sengaja saya buat manual agar kita bisa lebih bebas dan spesifik dalam memilih link-link artikel terkait yang hendak kita masukkan. Atau, anda juga bisa menggunakan fitur ini untuk menawarkan artikel-artikel pilihan/ unggulan di blog anda sehingga mungkin itulah kenapa judulnya "Pilihan Redaksi".
Oke, untuk cara pemasangannya silahkan simak dan ikuti langkah-langkah berikut ini.
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:block;width:auto;height:auto; background:#e9e9e9; float:left;margin-right:15px; margin-top:15px;margin-bottom:15px}
.bacajuga h4{text-align:center;padding:10px;background:#333; color:#fff;font:bold 16px Arial;margin-bottom:-10px}
.bacajuga ul{margin:0;padding:15px;list-style:none}
.bacajuga a:link,
.bacajuga a:visited,
.bacajuga a:active {color: #000 !important}
.bacajuga li{border-bottom:1px solid #ccc;line-height:1.7em}
@media screen and (max-width:768px){ .bacajuga{float:center;margin-right:0px}}
</style>
3. Silahkan simpan kembali template anda.
4. Jika anda ingin menerapkannya di salah satu postingan anda, silahkan buka postingan tersebut pada mode html. Tentukan dimana fitur tersebut akan diletakkan. Jika sudah, masukkan kode berikut ini.
<div class="bacajuga"> <h4>PILIHAN REDAKSI</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> </ul> </div>
Keterangan:
- Agar muncul di samping artikel (versi web), letakkan kode tersebut tepat di atas kalimat paragrafnya.
- Kalimat "Pilihan Redaksi" bisa diganti sesuka hati anda.
- Silahkan ganti dan sesuaikan judul-judul artikelnya beserta masing-masing linknya.
- Anda juga bisa menambahkan lagi jumlah daftar artikelnya dengan menyesuaikan di atasnya. Saran saya jangan terlalu banyak agar loading tidak semakin berat.
5. Jika sudah diatur semuanya, silahkan publish kembali postingan anda dan lihat hasilnya.
Demikianlah Cara Membuat Kotak Baca Juga (Related Post) Manual Keren Mirip di Situs Berita. Semoga bermanfaat.
