Setelah kemaren ane share tentang Cara Membuat Link Download Share ke Facebook sekarang ane mau share Cara Membuat Related Post dengan Gambar / Thumbnail di blog. Fungsi related post ini untuk menyajikan Artikel Post terkaitdengan postingan yang sedang dibuka saat itu dan juga bisa menambah traffic karena menambah pageview pada blog. Sebelumnya ane pake Related Post dari linkwithin, tapi karena di linkwithin hanya me-redirect ke halaman post kita jadi ane untukMembuat Related Post Tanpa Linkwithin. Cara ini berbeda dengan yang biasanya orang pake, cara ini hasil dari otak ane dengan mencari berbagai sumber yang telah ane rangkum dan menjadikan Related Post Thumbnail Fast Load. Oke langsung aja masuk ke cara membuatnya berikut ini :
1. Login Akun Blogger > Back Up dulu Template kalian untuk jaga-jaga jika terjadi kesalahan. 2. Masuk ke Template > Pilih Edit HTML > centang pada Expand Template Widget 3. Cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>(copy ke notepad dulu biar lebih mudah)
4. Kemudian cari kode <div class=post-footer-line post-footer-line-1> atau <p class=post-footer-line post-footer-line-1> 5. Paste kan kode dibawah ini tepat dibawah kode yang anda cari (copy ke notepad dulu biar lebih mudah)
<!-- Related Posts with Thumbnails Code Start by kenzymurdopo--> <b:if cond=data:blog.pageType == "item"> <div id=related-posts> <b:loop values=data:post.labels var=label> <b:if cond=data:label.isLast != "true"> </b:if> <b:if cond=data:blog.pageType == "item"> <script expr_src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12" type=text/javascript/></b:if></b:loop> <b>Baca Juga Artikel Terkait Lainnya: </b> <div style=background:#faf7f5; margin: 0px auto; padding: 5px;width:98%;float:left;height:100%> <marquee align=center behavior=alternate direction=left onmouseout=this.start() onmouseover=this.stop() scrollamount=2 width=100%> <script type=text/javascript> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle=""; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee> </div> </div><div style=clear:both/> </b:if> <b:if cond=data:blog.url == data:blog.homepageUrl><b:if cond=data:post.isFirstPost> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End by kenzymurdopo-->
6. Ganti tulisan yang warna merah "Baca Juga Artikel Terkait Lainnya:" sesuai selera anda, kode berwarna hijau tersebut adalah kode warna background Related Post, angka yang berwarna biru adalah jumlah related post yang ingin ditampilkan.
7. Oke Lanjut cari kode </body>, kenapa diletakkan di bagian bawah dan tidak diletakkan di bagian <head> yaitu agar blog kalian diakses tidak lambat karena mengandung Javascript yang membuat blog anda lambat diakses dan menjadikan iniRelated Post Thumbnail Fast Load.
8. Setelah ketemu kode </body> letakkan kode dibawah ini tepat diatas kode </body>(copy ke notepad dulu biar lebih mudah)
<!--Related Posts with thumbnails Scripts and Styles Start by kenzy murdopo--> <b:if cond=data:blog.pageType == "item"> <script src=http://supercoolzz.googlecode.com/files/relatedpostwiththumbnails2.js type=text/javascript/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End by kenzy murdopo-->
Gimana sobat? Cukup rumit kan Cara Membuat Related Post Thumbnail yang ane berikan? Tapi lihat aja hasilnya pasti lebih Fast Load dan memuaskan.
0 komentar:
Posting Komentar