Cara Membuat Related Post Dengan Gambar

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.
 
Berikut ini Cara Membuat Related Post dengan Gambar :

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:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,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 == &quot;item&quot;'>
<div id='related_posts'>
<h4>Related Posts - <data:blog.pageName/></h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' 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

37   komentar

pertamaxxx terimaskih mas udah diposting
Reply Delete
wahh koq ngga bisa yah kalo di templat santa mars yg blogger revolution pencerahannya donk taroh dmna kalo pake template santa mars
Reply Delete
wehh mantap mantap mantap
Reply Delete
wihh,, keren.. tapi ini buat template yang agan pake yah??
Reply Delete
thanks bt agan2 yg dah berkomentar

related post ini bisa ko di pake laen template dah ane test berhasil
Reply Delete
kalau saya lihat script diatas work pada semua template soalnya saya pernah mencobanya mas norbert
kebetulan saya blom pernah nyoba,, jadinya gk tau.. hehe :)
Delete
Reply Delete
Terima Karih banyak gan....
Reply Delete
Berat ng sob? Soalnya takut berat ntar ng bagus jadinya

mampir bali ny zaidan tunggu
Reply Delete
Aku mau coba tapi ditemplate aku sudah ada related postnya tapi tidak bergambar sih..thanks y artikelnya cukup menarik salam sukses gan

selamat mlm
kunjungan baliknya aku tunggu.. http://jayabenksservis.blogspot.com
Reply Delete
thank's tutornya sangat membantu..tmpilannya jga bgus :-bd
BERITA BOLA | UNIK | GALLERY FOTO
Reply Delete
terimakasih atas artikelnya sangat bermanfaat
http://anak-aru.blogspot.com/
Reply Delete
terimakasih mas, sudah dipraktekkan dan alhamdulillah berhasil...
Reply Delete
terimakasih mas, sudah dipraktekkan dan alhamdulillah berhasil...
Reply Delete
bro salam kenal dari putri, pendiri threelas.com
Reply Delete
di template saya tidak ada kode atau <div class='post-footer-lin


Kenapa ya ?
Reply Delete
MANTAp kunjungan balik kawann :) http://hijakbar.blogspot.com/
Reply Delete
Info yang menarik. Salam kenal.
Kunjungi balik ya sob, http://mohammadrobih.blogspot.com
Blogwalking :)
Reply Delete
adeuuuh puyeng
Reply Delete
ntar gua cobain ya gan
Reply Delete
di Blog saya Gk mau gan,Coba cek, nabilaholicbanjarmasin.blogspot.com
Coba cek gan,Mohon bantuannya ya,Masih Newbie Banget'
Reply Delete
KREN BLOGNYA ,, KUNJUNGI BALIK www.jibonlog.blogspot.com
Reply Delete
bagus mas..
visit back yo http://aderizkytriprasojo.blogspot.com/
Reply Delete
makasih mas bro...langsung praktek dan berhasil, cukup mudah ternyata buatku yg masih newbie,langsung ke TKP aja ya http://jilbabinstanmodis.blogspot.com
Reply Delete
Komentar ini telah dihapus oleh pengarang.
Delete
yg mw maen game flash
http://aliealwayson.blogspot.com/search/label/Flash%20Game
blog bru
Reply Delete
thanks gan salam >>> http://profesor-for-all.blogspot.com<<<
Reply Delete
nah ini yang saya cari, makasih sob
Reply Delete
makasi gan infonya : Modifandroid.in
Reply Delete
Post Yang Bagus Semoga Bermanfaat, Dan Post lainnya juga Bermanfat
http://aikawafaith.blogspot.com/
Reply Delete
Penjelasannya bagus dan detail menyertakan berbagai sumber yang terpercaya

Info untuk menghasilkan uang (memonetize) dari blog, website dan bisnis online bisa belajar dengan mengklik link di bawah ini

http://www.asianbrain.com/letter.html/903484
Reply Delete
Makasih gan untuk tutornya, sangat membantu :)
http://goo.gl/yeUiCg
Reply Delete
terimakasih informasinya :)
http://goo.gl/4jDhC3
Reply Delete
very good posting, I have tried but have not succeeded, roughly where the blame lies. please refer bloggermendalo.blogspot.com
Reply Delete
Trimakasih mas. Just visit http://videobelajarsekolah.blogspot.co.id
Reply Delete

Posting Komentar

Cancel Reply