Cara Membuat You Might Also di Blog
Postingan kali ini saya akan membahas tentang bagaimana membuat You Might Also di Blog. Biasanya ini digunakan untuk menunjukan postingan yang lain agar mempermudah pengunjung untuk melihat dan membaca postinagan yang lain itu.
Entri atau postingan yang di tampilkan pada You Might Also di Blog biasanya diambil menurut label atau kategori blog yang telah dibuat oleh admin blognya. jadi postingan yang ada di dalam kategori tersebut akan muncul pada pesan You Might Also di Blog yang terletak di bagian paling bawah postingan.
1. Buka menu Design -> Edit HTML
2. Beri centang pada "Expand Widgets Templates"
3. Letakkan kode berikut diatas </head>
4. Lalu cari <p class='post-footer-line post-footer-line-1'/>
5. Kalau tidak ketemu coba cari post-footer-line
6. Letakkan kode berikut dibawahnya.
Keterangan :
- var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih5EGK-jZ0LMs-7sWa5oc5HxgWrQiwn0vqiA0iJ3hNIOzs4pPN-_QoEjHg90oYVO0jw-BUk888oCzdQ6932CU_FAk9aQV_VIzTGG5UUKl-YGreNrKZZA8hpjlgQgUyYJS5EXIveAREksi_/" menunjukkan gambar yang muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar lain.
- var maxresults=5 menunjukkan jumlah postingan yang muncul pada related post. Silahkan atur jumlah postingan yang mau ditampilkan dengan mengganti angkanya.
- var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan.\
- var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.
Entri atau postingan yang di tampilkan pada You Might Also di Blog biasanya diambil menurut label atau kategori blog yang telah dibuat oleh admin blognya. jadi postingan yang ada di dalam kategori tersebut akan muncul pada pesan You Might Also di Blog yang terletak di bagian paling bawah postingan.
1. Buka menu Design -> Edit HTML
2. Beri centang pada "Expand Widgets Templates"
3. Letakkan kode berikut diatas </head>
<!--Related Posts with thumbnails Start--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float:center; height:100%; min-height:100%; padding-top:10px; padding-left:15px; padding-right:15px; } #related-posts h2{ font-size: 1.3em; color: black; font-family: Arial; margin-bottom: 0.75em; } #related-posts a{ color:black; } #related-posts a:hover { background-color:#eeeeee; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih5EGK-jZ0LMs-7sWa5oc5HxgWrQiwn0vqiA0iJ3hNIOzs4pPN-_QoEjHg90oYVO0jw-BUk888oCzdQ6932CU_FAk9aQV_VIzTGG5UUKl-YGreNrKZZA8hpjlgQgUyYJS5EXIveAREksi_/"; var maxresults=5; var splittercolor="#cccccc"; var relatedpoststitle="You might also like:"; </script> <script src='http://hermanblog.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails End-->
4. Lalu cari <p class='post-footer-line post-footer-line-1'/>
5. Kalau tidak ketemu coba cari post-footer-line
6. Letakkan kode berikut dibawahnya.
<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><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> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <!-- Related Posts with Thumbnails Code End-->
Keterangan :
- var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih5EGK-jZ0LMs-7sWa5oc5HxgWrQiwn0vqiA0iJ3hNIOzs4pPN-_QoEjHg90oYVO0jw-BUk888oCzdQ6932CU_FAk9aQV_VIzTGG5UUKl-YGreNrKZZA8hpjlgQgUyYJS5EXIveAREksi_/" menunjukkan gambar yang muncul pada postingan yang tidak memiliki gambar. Anda bisa mengganti gambar tersebut dengan gambar lain.
- var maxresults=5 menunjukkan jumlah postingan yang muncul pada related post. Silahkan atur jumlah postingan yang mau ditampilkan dengan mengganti angkanya.
- var splittercolor="#cccccc" menunjukkan warna garis pemisah. Ganti cccccc dengan kode warna yang anda inginkan.\
- var relatedpoststitle="You might also like:" menunjukkan judul related post. Ganti teks yang berwarna merah dengan judul yang anda inginkan.
========selamat mencoba semoga sukses========
nice trik sob..keep posting ya..jgn lupa jga komen balik di blogku ya
BalasHapusNice post sob,ijin ku coba tipsnya,makasih and salam erat persahabatan dari Papua!
BalasHapus@adrian : iya gan, terima kasih kunjungan dan komentarnya.
BalasHapus@er'end : silahkan semoga sukses ya
makasih gan ane dah coba dan berhasil... mantaap
BalasHapusoke sama - sama gan...
BalasHapusterima kasih sudam mau meninggalkan komentar
di tempat ane malah related post dari blog lain gan yang muncul paksa ane balikin lagi http://ehacorner.com
BalasHapuswah maksudnya related post gmn gan
BalasHapusThanks tutoril nya gan...
BalasHapusokee sama2 gan
Hapusaku di templateku kode post-footer-line banyak betul ada 10 ini di tempel di mana
BalasHapus