Cara Membuat Artikel Terkait Bergambar di Blog

Cara Membuat Artikel Terkait Bergambar Horizontal

By | Updated: Monday, May 29, 2017 32 Comments
Aura Ilmu » Blog » Cara Membuat Artikel Terkait Bergambar Horizontal
(No Ratings Yet)
Loading...

Artikel Terkait Bergambar. Banyak sekali cara membuat artikel terkait dengan gambar, thumbnail yang telah digunakan oleh banyak Blogger maupun Website Profesional. Di dalam posting artikel berikut ini menunjukkan bagaimana Cara Membuat Artikel Terkait Dengan Gambar Secara Horizontal.

Fungsi dari Artikel Terkait ini merupakan teknik untuk menambah tampilan halaman artikel atau pageview “per-visit” dari pengunjung Blog agar membaca artikel terkait yang lain. Sesuai dengan fungsinya, biasanya artikel terkait ini ditambahkan di bawah postingan artikel sebuah blog.

Cara Membuat Artikel Terkait Versi Horizontal ini sangat mudah, hanya memerlukan waktu beberapa menit saja. Artikel Terkait Bergambar ini cukup bagus ditambahkan di bawah postingan artikel, karena loadingnya cepat.

artikel terkait bergambar

Image: artikel terkait bergambar

Membuat artikel terkait dengan gambar dengan mudah di blog. Artikel Terkait ini bagus dalam tampilannya karena gambar dapat dimodifikasi dari ukuran dan kualitasnya. Judul artikel pun dapat sedikit di modifikasi sesuai kebutuhan, baik jenis hurufnya dan warnanya.

Jika anda menggunakan Blogspot, berikut Uraian Cara Membuat Artikel Terkait Dengan Gambar Versi Horizontal:

1. Login Ke Blogger.
2. Klik Template, Backup template terlebih dahulu, untuk jaga2,
atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode),
Dan cari kode berikut </b:skin>
6. Masukan Kode berikut diatas </b:skin>

/* Artikel Terkait Dengan Gambar Start
-------------------------------------------- */#artikel-yg-nyambung {font-weight:bold; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; font-size:12px;}
#artikel-yg-nyambung h3{border-bottom: 3px dotted #DBDBDB; font-family: Arial; font-size: 20px; color: #232D74; padding-bottom: 0px; text-transform: uppercase; font-weight: normal; text-align: center; height: 25px; margin-bottom: 10px; margin-top: 10px;}
#artikel-yg-nyambung ul {width:570px; margin-bottom: 20px; padding:0px; list-style:none; display:inline;}
#artikel-yg-nyambung li{float:left; display:inline; list-style:none; height:150px; margin:0 0px 10px 8px; width:133px;}
#artikel-yg-nyambung ul li a{margin:0; line-height:18px;}
#artikel-yg-nyambung img{padding:0; margin:0; width:133px; height:90px; border:1px solid #eaeaea;}
#artikel-yg-nyambung img:hover{opacity:0.7;}

Keterangan Kode Cara Membuat Artikel Terkait Bergambar: COBA Kode-kode ini tidak diedit terlebih dahulu, jika sudah diterapkan editlah seperlunya.
Perhatikan Lebar, Sesuaikan dengan lebar/panjang postingan artikel.
Text berwarna Merah adalah lebar dan tinggi per kolom dari artikel terkait.
Text berwarna Hijau adalah lebar dan tinggi gambar (aturlah sesuai keinginan).
Text berwarna Biru Muda adalah Besar, jenis huruf dari judul artikel.
Text berwarna Pink adalah jarak antara gambar 1 dan yang lain, diukur dari kiri.
Text berwarna Oranye adalah Jarak atas dan bawah dari Tulisan Artikel Terkait.

7. Cari Kode berikut <div class='post-footer'>
8. Masukan Kode Dibawah ini diatas <div class='post-footer'> yang kedua.
Kode tersebut mungkin ada 2, pertama untuk versi mobile,
kedua untuk versi web (biasanya yang kedua).

<!-- Artikel Terkait Dengan Gambar Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='artikel-yg-nyambung'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3 class="artikelterkait"><span>Artikel Terkait</span></h3>';rn='<h3 class="artikelterkait"><span>Jelajah Artikel Lainnya</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='//1.bp.blogspot.com/-pmznJmXBJ7M/UfWrTRltmLI/AAAAAAAAFg8/8VCw4AcPMyc/s1600/no+image.jpg'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s150/")+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('artikel-yg-nyambung').innerHTML=dw};
//]]></script>
<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=related_results_labels&amp;max-results=19&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=4;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div class='clear'/>
</b:if>
<!-- Artikel Terkait Dengan Gambar End -->

Kira-kira tampilannya seperti ini
…Kodenya…
<div class='post-footer'>

Keterangan Cara Membuat Artikel Terkait Bergambar:
Text berwarna Biru “4” adalah jumlah maksimal keseluruhan artikel yang ingin ditampilkan dengan kelipatan maxresults=4, sesuaikan dengan kode diatas sebelumnya. jika dirubah jadi “8” maka artikel menjadi 2 baris.
Text berwarna Merah dapat dirubah menjadi “related post” atau “baca juga” dan lain-lain.
angkanya untuk jumlah tampilan judul dan gambar.
Text berwarna Pink “s150” adalah Kualitas dari Gambar, lebih besar lebih jelas gambarnya, buat sekitar 150-300 saja.
Text berwarna Hijau adalah link gambar, pengganti jika tidak ada gambar (Sebaiknya diganti sesuai link punya sendiri, supaya pemakaian tidak terbagi-bagi banyak orang).

9. Save Template dan Lihat Hasilnya.

Demikian Tutorial Cara Membuat Artikel Terkait Dengan Gambar/Thumbnail Versi Horizontal di bawah postingan artikel, mudah-mudahan bisa bermanfaat.

32 Komentar: Cara Membuat Artikel Terkait Bergambar Horizontal

  1. Tatang Gunawan S

    itu terjadi karena konflik dengan versi artikel terkait sebelumnya, soalnya artikel terkait sebelumnya versinya vertikal… versi ini harus dihapus semuanya, kemudian pasang versi diatas, saya lihat tanpa diedit pun sudah bisa….
    buang versi sebelumnya yaitu kode2 ini, dan hapus juga scriptnya persis dibawahnya
    #related_posts{}
    #related_posts h4{ border-top:1px solid #333; border-bottom:1px solid #333; color:#333; font-size:14px; letter-spacing:0; line-height:20px; margin:0 0 5px; padding:5px 10px; background:#03C}
    #relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; 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{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}
    #relpost_img_sum .news-title{display:block; font-weight:bold !important}
    #relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
    #relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}

    Hapus juga kode ini

    <div id='related_posts' style='margin-top:35px;'> <h4 style='color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#474747;'>Artikel Terkait</h4><ul id='relpost_img_sum'>relatpost();</ul></div>

    Reply
  2. Tatang Gunawan S

    Blog situ… related postnya tumpang tindih, saya liat ada 3 related post… pertama related post versi cepat, kedua related post versi balitraveltips, ketiga saya tidak tau versi yang mana tuh? sarannya: hapus semua kode yg berhubungan dengan related post, Kemudian mulai lagi dari awal pake versi yg diinginkan, btw itu mootools buat apa? saya tidak melihat kegunaannya dipasang di situ???

    Reply
  3. Tatang Gunawan S

    Ada tulisan JELAJAH ARTIKEL LAINNYA, karena artikel itu tidak punya teman2 artikel yang sama LABEL-nya
    Bandingkan URL di bawah ini

    web-cruiser.blogspot.com/2013/04/bangunan-bangunan-yang-paling-unik-di.html
    sama ini
    web-cruiser.blogspot.com/2013/06/manfaat-bayam-bagi-kesehatan.html

    Itu kan Blog-nya sama… tp karena link ke-1 (Label Unik) ga punya teman, ya gitu jadinya… link ke-2 (label Blog) ada temannya.

    Tidak muncul mungkin juga karena konflik sama pembuatan artikel terkait versi lain sebelumnya (Hapus yg sebelumnya – semuanya). setelah itu coba lagi kode diatas, dan di backup dulu sebelumnya..

    Reply
  4. rizki

    ko udah ane coba, malah jadi nya vertikal ke bawah ya mas, mohon pencerahannya , padahal pengen banget nih masang di blog.

    Reply
  5. Leony Li

    ini ya blog mas gunawan, setelah saya pelajari, berarti harus di edit css nya, akan saya pelajari lagi mas, dan terima kasih banyak

    Reply
  6. Narayana 734

    Kok masih gk muncul y gan, sebelumnya di blog ane sudah ada related postnya, tapi beberapa minggu ini hilang alias gk muncul lg entah kenapa,

    Reply
  7. Anonim

    @ muftech >> saya sedikit belum mengerti maksudnya.. hehe… dari yang sudah2 biasanya berhasil diterapkan, coba terapkan kodenya sesuai petunjuk, nanti saya coba liat lagi Blognya, dan kasih solusi sebisanya

    Reply
  8. Imam Faried

    Admin Kenapa Di blog saya hanya bertuliskan JELAJAH ARTIKEL LAINNYA ?
    Kenapa gitu min ? tolong pencerahannya
    Web nya imamfaried24.blogspot.com

    Reply
  9. Anonim

    @ verifikasi Paypal >> saya cek Blog tidak ditemukan… tapi menurut saya fitur tidak muncul karena, fitur LABEL tidak digunakan pada postingan artikel…

    Reply
  10. Anonim

    Itu karena lebar kolom dan gambar berbeda, tp sy udah kasih alternatif di blognya… tinggal di lihat

    Reply
  11. Basyiri Rahmanto

    udah ane pasang di blog ni gan,,
    tapi pas ane pasang, disamping gambar post ada bullet list-nya,,cara ngilanginnya gimana gan?
    tolong dibantu,,makasih….

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *