Navigasi penting! Navigasi memungkinkan Anda cepat menemukan konten yang diinginkan. Ini membantu Search Engine memahami content apa yang menjadikan Webmaster Tools (Google) berpikir dan menganggapnya penting. Jika blog relatif baru, Anda harus pikirkan "Bagaimana reader akan pergi dari homepage ke halaman lain berisi content lebih spesifik?” Atau sebaliknya, ”Bagaimana reader melakukan navigasi cepat kembali ke Homepage?"
Sebelumnya saya telah posting di blog yang sedang Anda baca tentang link-link judul post berada di bawah artikel. Ada 2 post relevan dengan artikel kali ini, yaitu
Widget Related Post dengan Thumbnail dibawah Artikel
dan
Related Post under posting by using OutBrain*
dan
Related Post under posting by using OutBrain*
Berikut ini posting Related Post variasi ke-3 dalam memasang widget (script) related post untuk blog blogger dengan sedikit perbedaan. Contoh dapat dilihat di :
Setelah URL diatas dibuka, silahkan gulung halaman turun hingga dibawah “RELATED POSTS.” Arahkan cursor ke setiap link DIBAWAHNYA. Akan terlihat animasi saat tersentuh cursor. Untuk membuat Related Posts seperti itu Anda perlu tambahkan CSS3 transition, mengatur padding dan background position yang terpasang di setiap link.
Mohon maaf, source code yang dibutuhkan ditampilkan sebagai gambar karena alasan loading time blog, namun jika Anda ingin download isi code diatas silahkan klik link berikut
https://www.4shared.com/office/vGiVk4No/source-code_Related_Posts_with.html?Cara Penggunaan
- Login ke Blogger >>> Design (Rancangan) >>> Edit HTML
- Backup template.
Mengubah xHTML di bagian <body> punya resiko kegagalan yang mungkin menimbulkan kerusakan template, maka lakukan backup template seperti dibawah ini demi keamanan.- Klik Download Full Template
- Simpan file template di folder computer (misalnya di folder My Document)
- File backup ini digunakan untuk memulihkan template seperti sebelum dilakukan modifikasi dengan cara upload kembali ke blogger.
- Cara upload :
Klik browse. Temukan file backup di folder computer dan lanjutkan dengan klik upload.
- Kembali ke Edit HTML dan Cari kode ]]></b:skin>
- Letakkan kode CSS (snippet pada box 1) tepat di atas kode tersebut
- Letakkan Javascript (snippet pada box 2) tepat di BAWAH kode tersebut
- Sehingga :
- SAVE TEMPLATE
- Lanjutkan kembali dengan klik Expand Widget Template dan cari kode <data:top.authorLabel/>
- Di atas kode <data:top.authorLabel/> ada beberapa kode lain seperti berikut
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
Letakkan xHTML (lihat isi Box 3) tepat di atasnya. Sehingga tersusun seperti berikut
SAVE TEMPLATEKeterangan
- Angka 10 merupakan jumlah posting ditampilkan di widget related posts. Anda dapat mengubahnya sesuai jumlah yang diinginkan.
- Jika ingin merubah tampilan related posts, perubahan cukup dilakukan pada kode css.
0 comments:
Post a Comment