Cara Membuat Related Post Dengan Gambar - Untuk Postingan ini merupakan postingan lanjutan dari Cara Membuat Related Post Dengan Gambar Mini Di Blog tidak berbeda jauh tampilan dari tutorial sebelumnya. tutorial ini merupakan jawaban dari request teman blogger yang sudah menyempatkan berkomentar yang menginginkan related post dengan gambar pada blog saya ini
Sekilas Tentang Related Post adalah satu Teknik Blog dimana Related Post Akan Menampilkan Article-Article Yang Saling Berhubungan. Berhubungan disini Yang bermaksud adalah Setiap Artikel Yang Memiliki Kesamaan Label, Keyword Maka dengan Otomatis Artikel-artikel yang merupakan tautan yang terhubung atas kesamaan label atau keyword tersebut akan dimunculkan pada halaman di mana anda menempatkan related Post ini.
Tutorial Blog ini cukup simple dan ringan. Jadi tidak perlu takut jika blog kamu loading nya lambat, berikut dibawah ini merupakan tampilan dari related post ( Postingan Terkait) Pada Blog Ini :
 |
| Contoh Tampilan Related Post dengan Gambar |
Tujuan dari Related Post ini Adalah salah satu teknik yang menguntungkan bagi pembaca atau yang sedang mencari-cari sesuatu artikel, maka setiap artikel yang saling berhubungan akan terlihat oleh sipembaca dan akan kembali membuka tautan yang berada pada Related post tersebut, dengan secara otomatis trafik atau view halaman pada Blog kita akan semakin banyak karena setiap halaman artikel memiliki tautan yang akan selalu dibuka oleh pembaca, pembaca akan berlama-lama di blog kita karena tautan akan menghubungkan artikel yang satu dengan artikel lainya yang dihubungkan oleh label.
1. Login ke Blogger
2. Buka menu Template > Edit HTML > Centang "Expand Template Widget.
3. Cari kode </head>, lalu masukkan kode berikut diatasnya.
<style type='text/css'>
/*RelatedPost Mas Oktri*/
#related_posts h4 {color: rgb(230, 230, 230);font-size: 11px;font-weight: bold;margin: 0px;padding: 2px 5px 1px 5px;text-shadow: 1px 1px rgb(0, 0, 0);text-transform: uppercase;border-bottom: 1px solid rgb(70, 0, 0);box-shadow: 0px 1px 0px rgb(150, 0, 0);}
#related_posts{font-size:12px;}
#relpost_img_sum {margin: 0;padding: 4px;line-height: 16px;}
#relpost_img_sum:hover {background: none;}
#relpost_img_sum ul {list-style-type: none;margin: 0;padding: 0;}
#relpost_img_sum li {margin: 0px;padding: 5px;height: 35px;list-style: none outside none;border-bottom: 1px solid rgb(20, 20, 20);box-shadow: 0px 1px 0px rgb(51, 51, 51);-webkit-transition: all .2s linear;-moz-transition: all .2s linear;-o-transition: all .2s linear;transition: all .2s linear;}
#relpost_img_sum li:hover {background-color: rgb(51, 51, 51);}
#relpost_img_sum a, #relpost_img_sum a:visited{color:rgb(230, 230, 230);text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);-webkit-transition: all .2s linear;-moz-transition: all .2s linear;-o-transition: all .2s linear;transition: all .2s linear;}
#relpost_img_sum a:hover{color:#ff0000;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
#relpost_img_sum .news-title {display: block;font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;margin-bottom: 2px;}
#relpost_img_sum .news-text {display: block;text-align: justify;font-weight: normal;text-transform: none;font-size:10px;}
#relpost_img_sum img {float: left;margin-right:5px;margin-top:0px;padding:0px!important;width: 30px;height: 30px;}</style>
4. Lalu cari kode <data:post.body/> atau <div class='post-footer-line post-footer-line-3'>
<!-- Untuk kode artikel terkait -->
</div>.
5. Ganti kode <!-- Untuk kode artikel terkait --> dengan kode dibawah ini.
<b:if cond='data:blog.pageType == "item"'>
<div id='related_posts'>
<h4>Related Posts - <data:blog.pageName/></h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=50"' type='text/javascript'/>
</b:loop>
<a href='http://tutorialbelajarblogger.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</b:if>
6. Jika kamu menggunakan kode <data:post.body/>, taruh kode no. 5 dibawahnya.
7. Simpan dan lihat hasilnya. (Ingat sebelum mengutak-atik template, backup template untuk menghindari kesalahan)
Sekian dari saya tentang Cara Membuat Related Post Dengan Gambar, semoga dapat bermanfaat. TERIMAKASIH