Cara Membuat Artikel Terkait dengan Gambar V2

Baca Juga Artikel Menarik Lainnya :

Cara Membuat Artikel Terkait dengan Gambar V2 - Bagi seorang blogger widget seperti ini tidaklah asing. Memunculkan suatu artikel yang terkait pada artikel yang sedang dibaca dapat pula meningkatkan pageview seta menurunkan bounce rate (dalam google analytic(lebih kecil lebih baik).

Nah kali ini saya akan membagikan cara menampilkan artikel terkait dengan Gambar/Thumnail. Mungkin kalian sudah banyak melihat widget seperti ini. Tapi ini sedikit berbeda, pada code dari widget ini jika tidak ada artikel yang sejenis (memiliki label yang sama/hanya satu artikel dengan pada label tersebut) maka yang akan tampil adalah artikel terbaru.

Bagi yang berminat untuk menggunakannya silahkan ikuti langkah berikut:

Masuk ke halaman editor HTML, kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.

Salin kode di bawah ini, kemudian letakkan tepat di bawah kode ]]></b:skin>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-postsx h4{margin:0;padding:2px 5px;font-size:14px}
#related-postsx ul,#related-postsx li{list-style:none;margin:0;padding:0;overflow:hidden}
#related-postsx ul.loadingnya{width:100%;height:50px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzcxYoUO2Y-jPMB-wHaVBpamosHVPdxr2IeA-iD3r9iYpXkxJ9lcRauuo32HSD48H3OturEJlsehZojw6iIp4uFLh4apsPndZ3g67PlZUdKp08FbuxtG6CtSO49lRnu4v5S9GB4hISZ1E/s1600/loading-32-v1.gif) no-repeat 50% 50%}
#related-postsx li{position:relative;float:left;width:19%;margin:0.5%;height:124px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height: 15px}
#related-postsx img,#related-postsx .gmbrrltd{width:100%;height:100%;display:block}
#related-postsx strong,#related-postsx img{-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s}
#related-postsx img{-khtml-opacity:0.3;-moz-opacity:0.3;-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(opacity=30)&quot;;filter:alpha(opacity=30);opacity:0.3}
#related-postsx li:hover img{-khtml-opacity:0.8;-moz-opacity:0.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";filter:alpha(opacity=80);opacity:0.8}
#related-postsx strong{position:absolute;z-index:2;left:0;top:0;padding:0 5px;height:100%;color:white}
#related-postsx .gmbrrltd{background:black}
#related-postsx .jkmt a{position:absolute;z-index:2;bottom:5px;right:5px;padding:0 20px 0 0;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY7FgCtMZY6fw1kOO50i830wCMUKBdT5jGYQM3KUz2a3zjjWEuo8x05CighzFQhbhXRI2c0e0-KBjpPHEePn2DMPJwaby0X-R3Hh0C0xmGk44F4noKma46a0GjXEAe4gImnrBSnr7TiY4/s20/comment.png) no-repeat 100% 0;line-height:20px}
#related-postsx .dt{position:absolute;bottom:5px;z-index:3;left:5px;color:white;line-height:20px}
</style>
</b:if>

Selanjutnya pemasangan kode JS (ada 2 cara):

CARA 1

Temukan kode berikut:
<div class='post-footer'>

TIP: Tekan CTRL + F kemudian ketik class='post-footer' untuk mempermudah pencarian.

Salin kode di bawah ini, kemudian letakkan tepat di atasnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script defer='defer' src='https://ivyth.googlecode.com/svn/js/related-post-image.js' type='text/javascript'/>
<div id='artikelterkaitmkr'>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
relatedPostsWidget({
related_title: "Artikel Terkait",
recentTitle: "Artikel Terbaru",
containerSelector: "#artikelterkaitmkr", 
blogURL: "URL_BLOGmu",
maxPosts: 5,
maxPostsPerTag:5,
rlt_thumb: 120
});
});
//]]>
</script>
</div>
</b:if>

Atau kamu juga bisa meletakkan kode tersebut di bawah kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>.
Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar kode dengan frase post-footer umumnya memang berada di bawah posting. Begitu saja logikanya.

CARA 2

Selain cara di atas juga bisa dengan cara menargetkan didalam class post-body.

Jika ingin menggunakan cara ini kode diletakkan sebelum </body> dan kode yang digunakan seperti berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script defer='defer' src='https://ivyth.googlecode.com/svn/js/related-post-image.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
relatedPostsWidget({
related_title: "Artikel Terkait",
recentTitle: "Artikel Terbaru",
containerSelector: "div.post-body", 
blogURL: "URL_BLOGmu",
maxPosts: 5,
maxPostsPerTag:5,
rlt_thumb: 120
});
});
//]]>
</script>
</b:if>

Jika sudah selesai, klik Simpan Template dan lihat hasilnya

Opsi-opsi Pengaturan

blogURL:'' | diisi dengan url Blog anda contoh http://mkr-site.blogspot.com
maxPosts:5 | Jumlah maksimal artikel terkait yang muncul (defaultnya 5)
maxTags:5 | Jumlah maksimal tag/label yang dicari untuk dijadikan artikel terkait (defaultnya 5)
maxPostsPerTag:5 | Jumlah maksimal artikel untuk setiap tag/label (akan terlihat jika hanya satu label/ketika tidak memiliki tag(artikel terbaru yang muncul)). (defaulnya 5))
containerSelector:'' | Dimana artikel terkait ini akan dipanggil contoh: <div id="artikelterkaitmkr"></div> maka dituliskan #artikelterkaitmkr
relatedTitle:'Related Posts' | Judul Heading dari Artikel terkait (defaultnya Related Posts)
rlpBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif' | Gambar yang tampil jika artikel tidak memiliki gambar (defaultnya http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif)
rlt_thumb:70 | Ukuran gambar yang dimuat (defaultnya 70)
rlt_monthNames:["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Dec"] | Nama bulan yang tampil
recentTitle:'Recent Posts' | Judul Heading dari Artikel terbaru (defaultnya Recent Posts)

NB: Perhatikan tanda "" atau '' pada setiap ingin menambahkan tambahan Opsi kecuali yang angka seperti maxPosts. Juga untuk setiap tambahan opsi diakhiri tanda , (koma) kecuali pada bagian akhirnya. Cara Membuat Artikel Terkait dengan Gambar V2

Demikianlah Artikel Cara Membuat Artikel Terkait dengan Gambar V2

Sekian Artikel Cara Membuat Artikel Terkait dengan Gambar V2, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan Androkomp.net kali ini semoga bisa bermanfaat.

Anda sedang membaca artikel Cara Membuat Artikel Terkait dengan Gambar V2 dan artikel ini url permalinknya adalah https://trajumas11.blogspot.com/2014/07/cara-membuat-artikel-terkait-dengan.html Semoga artikel ini bisa bermanfaat.