Sudah lama sekali saya tidak membuat entri tentang tutorial Blogger. Kali ini saya membuat tutorial cara membuat
widget related posts di Blogger. Tutorial ini adalah jawaban dari pertanyaan teman saya di grup Facebook Diskusi HTML Pemula. Dan baru saya jawab sebulan kemudian. Hal ini karena kesibukan saya di dunia nyata.
Mungkin beberapa dari kalian ada yang masih bingung apa itu
widget related posts.
Widget related posts adalah
wigdet yang digunakan untuk memuat entri yang berhubungan dengan entri yang sedang dikunjungi berdasarkan label yang diberikan. Misalkan entri tersebut berlabel
"curhat", maka widget tersebut akan memunculkan sejumlah entri yang terkait, yang berlabel curhat di blog kamu. Berikut ini adalah contoh nyata
widget related posts di blog ini.
|
Related Posts |
Cara Mudah Membuat Widget Related Posts
Widget dibuat berdasarkan JavaScript yang saya dapatkan dari orang lain. Saya sengaja menaruhnya di
hosting saya agar bisa saya ubah/modifikasi sesuai kebutuhan. Jika kamu tertarik mengubahnya, bisa kamu unduh terlebih dahulu, modifikasi, lalu unggah ke
hosting milikmu. Jika tidak mau mengubah, bisa langsung pasang sesuai alamat JavaScript-nya. Alamat JavaScript-nya saya letakkan di
http://intikali.org/js/rel-post.js. Jika kamu ingin menaruhnya di
template Blogger kamu, letakkan di bagian
"post-footer" kode berikut ini.
<script src='http://intikali.org/js/rel-post.js' type='text/javascript'/>
<div class='related-posts-widget'>
loading...
</div>
Terserah, kamu bisa meletakkannya sebelum atau setelah
"post-footer", tergantung kebutuhanmu.
Di Mana Letak "Post-footer"?
Jika kamu masih awam dalam dunia
template Blogger, untuk mengetahui letak
"post-footer" ikuti langkah-langkah berikut ini.
Pertama, masuklah dasbor Blogger kamu. Setelah itu klik
"Template". Lalu pilih
"Edit HTML". Setelah itu klik kursor pada tempat kode-kode itu, kemudian tekan
"Ctrl. F" untuk melakukan pencarian. Masukkan kata kunci
"post-footer" hingga muncul seperti gambar di bawah ini.
|
Mencari "post-footer" |
Letakkan kode
widget di atas kode tersebut. Coba beberapa kali hingga kamu mendapatkan posisi yang pas. Banyak sekali
"post-footer" yang ada di sebuah
template Blogger. Setiap
template Blogger memiliki susunan kode yang berbeda. Silakan bereksperimen sendiri dengan
template milikmu.
Menghias Widget Related Posts dengan CSS
Jika sudah muncul
widget-nya, selanjutnya adalah menghiasnya dengan CSS. Di kode sebelumnya
related posts mempunyai
class="related-posts-widget", oleh karena itu untuk menghiasnya menggunakan selektor
".related-posts-widget". Berikut ini adalah CSS yang saya gunakan untuk menghias
widget tersebut.
.related-posts-widget {
width: 100%;
}
.related-posts-widget li, .related-posts-widget img, .related-posts-widget a {
float:left;}
.related-posts-widget li {
background: #FFF;
border: 1px solid #ddd;
margin-bottom: -1px;
padding: 10px;
width: 279px;
margin-right: -1px;
}
.related-posts-widget li:nth-child(even) {
width: 278px;
}
.related-posts-widget h2 {
font-size: 14px;
margin: 20px 0px;
font-weight: normal;
}
.related-posts-widget img {
margin-right:10px;
}
Kamu bisa mengubahnya sesuai yang kamu butuhkan. Sesuainya dengan warna yang kamu gunakan untuk blog kamu. Bagaimana? Mudah, 'kan? Selamat mencoba :)
ada gak mas cara mengganti artiket terkait dengan artikel terbaru dibawah postinga, soalnya blog saya tipe bloh berita, kalau masang artikel terkait suka keluar artiket yang udah lawas, ??
ReplyDeleteada, kapan2 saya tulis caranya :)
Deleteupdate: sesuai permintaanmu, saya sudah tulis mengenai itu di sini
Deletehttp://www.iskael.com/2015/03/widget-entri-terbaru-blogger.html