Cara Buat Artikel Terkait Thumbnail Secara Horizontal

Cara Buat Artikel Terkait Thumbnail Secara Horizontal - Salah satu cara untuk memaksimalkan penayangan artikel atau postingan pada blog adalah dengan memasang widget artikel terkait yang berada di bawah postingan. Widget ini menampilkan artikel-artikel yang mempunyai label yang sama dengan artikel yang sedang di baca tersebut.

Artikel Terkait Thumbnail Secara Horizontal

Banyak model atau bentuk dari artikel terkait yang bisa sobat pasang di blog masing-masing, tergantung selera dan estetika blog saja. Bagaimana cara membuatnya?

Artikel Terkait Thumbnail 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. Kurang lebih tampilannya seperti berikut ini :

Cara Buat Artikel Terkait Thumbnail Secara Horizontal

Nah sobat jika kamu tertarik untuk menerapkannya pada blog yang kamu miliki, langkahnya adalah sebagai berikut :

  • Masuk ke dashboard Blogger
  • Pilih menu tema dan pilih edit HTML
  • Kemudian cari kode </b:skin>
  • Jika sudah ketemu, silahkan copy dan paste kode berikut tepat diatasnya :

/* 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;}
  • Selanjutnya, cari kode <div class='post-footer'>
  • Kemudian copy dan paste kode berikut dibawahnya. jika dalam template terdapat dua atau lebih kode tersebut, maka bisa dicoba di bawah kode yang kedua atau yang terakhir.

<!-- 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('<data:post.url/>');</script>
</div>
<div class='clear'/>
</b:if>
<!-- Artikel Terkait Dengan Gambar End -->
  • Simpan template dan lihat hasilnya...
  • Tradaaaaa...

Nah sobat cukup mudah ya membuat artikel terkait dengan gambar atau thumbnail Versi Horizontal di bawah postingan artikel, mudah-mudahan bisa bermanfaat.

Belum ada Komentar untuk "Cara Buat Artikel Terkait Thumbnail Secara Horizontal"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel