Cara Membuat Artikel Terkait Di Blog

Cara Membuat Artikel Terkait Bergambar Secara Horizontal


Membuat Artikel Terkait bergambar - Banyak sekali cara-cara Membuat Artikel Terkait 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.

DEMO 1 seperti dibawah Artikel ini, dan DEMO 2 Di Link ini

Baca juga Artikel Terkait Versi Cepat - Versi Sederhana & Versi Vertikal

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 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.

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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfeIcMGaK6uaMuOuhSuQOTZ3gS43C5OlagK2JRE5SgAC4fb2yaYvDBndSESMgh9-k1VkYziHrVUdXg9OvjyxaQ9S7zgsoQJL5mcqsJGqoU0liilordjojF9e4uC_BZmSOsC0pSzJxVfYJx/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 -->

Semoga Berhasil!!!!

sumber http://www.aura-ilmu.com/2013/07/Cara-Membuat-Artikel-Terkait-Bergambar.html