Cara Membuat Related Post dengan Gambar Judul dan Keterangan di Blog ~ Dewan Komputer

Cara Membuat Related Post dengan Gambar Judul dan Keterangan di Blog - Hai sobat ketemu lagi dengan saya dewan komputer dan pada kali ini saya akan memposting tentang cara membuat related post atau artikel terkait yang berada pada bawah postingan dengan formatnya antara lain gambar, judul postingan dan keterangannya serta ada juga fasilitas Readmore atau Baca Selengkapnya. Related post ini berguna agar pengunjung dapat melihat artikel yang terkait dengan artikel yang sedang dibaca dan setelah itu akan tertarik untuk melihat artikel lainnya sehingga meningkatkan klik dari pengunjung. Oleh karena itu Related post ini biasanya ditempatkan di bawah walaupun sebenarnya bisa juga ditempatkan di samping atau side bar.

Cara Membuat Related Post dengan Gambar Judul dan Keterangan di Blog

Gambar diatas adalah screen shoot dari hasilnya setelah kode dimasukkan. Langsung saja langkah-langkahnya yaitu :

1. Login ke Akun Blogger Anda.

2. Masuk ke Dasbor dan pilih menu Template => Edit HTML

3. Kemudian cari kode ]]></b:skin> untuk mempermudahnya silahkan gunakan shortcut Ctrl+F kemudian pastekan kode dibawah tepat diatasnya

.related-post{ margin:2em auto 0; font:normal normal 11px/1.4 Arial,Sans-Serif}
.related-post h4{ font-size:150%; margin:0 0 .5em}
.related-post-style-2,
.related-post-style-2 li{ margin:0; padding:0; list-style:none}
.related-post-style-2 li{ padding:10px; border-top:1px solid #eee; overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail{ width:80px; height:80px; max-width:none; max-height:none; background-color:transparent; border:none; padding:0; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; float:left; margin:2px 10px 0 0}
.related-post-style-2 .related-post-item-title{ font-weight:bold; font-size:110%}
.related-post-style-2 .related-post-item-summary{ display:block; overflow:hidden}
.related-post-style-2 .related-post-item-more{}

Yang berwarna merah merupakan ukuran gambar, bisa diganti sesuai keinginan sobat.

4. Kemudian cari kode <data:post.body/> caranya sama seperti di atas dan pastekan kode dibawah tepat diatasnya

<b:if cond='data:blog.pageType == "item"'>
<div class='related-post' id='related-post'/> <script type='text/javascript'> var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop></b:if>]; var relatedPostConfig ={ homePage:"<data:blog.homepageUrl/>", widgetTitle:"<h4>Lihat Artikel Menarik Lainnya:</h4>", numPosts:5, summaryLength:200, titleLength:"auto", thumbnailSize:80, noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", containerId:"related-post", newTabLink:true, moreText:"Baca Selengkapnya", widgetStyle:2, callBack:function(){} }; </script> <script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>

Keterangan tulisan berwarna merah :
- widgetTitle : ubtuk menambahkan keterangan contohnya "Lihat Artikel Menarik Lainnya:"
- numPost : jumlah postingan yang ingin ditampilkan
- summaryLength : jumlah karakter keterangan yang ingin ditampilkan

5. Setelah itu Simpan Template dan lihat hasilnya pada blog sobat. Ini akan muncul jika mempunyai label yang sama.

Sekian postingan tentang Cara Membuat Related Post dengan Gambar Judul dan Keterangan di Blog dari saya. Jika ada pertanyaan silahkan tinggalkan komentar pada kotak komentar yang telah disediakan dibawah. Sampai ketemu lagi pada postingan saya lainnya...

About Admin

Saya senang berbagi ilmu agar semua orang tidak lagi asing terhadap ilmu-ilmu yang ada pada dunia komputer. Selain itu saya juga memberikan ilmu-ilmu tentang pemrograman ke blog ini khususnya untuk yang kuliah jurusan komputer ;) ;) ;)