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)
Demikian Tutorial ini, semoga bermanfaat.
