Artikel Terkait dengan tubnail di Bawah Postingan

Cara Membuat ArtikelTerkait dengan tubnail di Bawah Postingan – Artikel terkait atau Rekomendasi Artikel adalah beberapa kumpulan Postingan yang memiliki Label yang sama dengan Postingan yang sedang di bukannya. Artikel terkait ini adalah salah satu widget yang wajib ada di sebuah blog atau website. Widget Artikel terkait ini sangatlah membantu pera pengunjung blog untuk mencari artikel lainnya dengan sangat jelas dan menarik. Widget ini akan menampilkan Gambar dan judul postingan yang berjumlah 6 postingan dengan 2 tingkat.

Maka dari itu kali ini saya akan berikan cara membuatnya. Widget ini sudah di dukung HTML 5 sehingga tidak akan memberatkan Loading Blog sobat atau pun erorr script yang akan terjadi saat memasangnya.bagi sobat yang ingin memasangnya atau sobat yang tertarik untuk mempelajari nya silahkan sobat simak tutorial berikut ini.

baca juga : Cara Membuat Menu DrobDown Menggunakan CSS di Blog

1. buka Blog Sobat > masuk menu “Template” > Edit HTML > Salin kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>  atau </style>
]]></b:skin>  atau </style>

/* Recent By Label */
#tag1, #tag2{margin:0;padding:0 0 30px;width:100%}
#tag1-wrapper h2,#tag2-wrapper h2,#tag1-wrapper h3,#tag2-wrapper h3 {color:#333;text-transform:capitalize;font-size:140%;font-weight:400;padding:15px 0;margin:0 0 15px;border-bottom:1px solid #eee}
#tag1-wrapper .recent-by-tag li,#tag2-wrapper .recent-by-tag li{width:30%;margin-right:5%;margin-bottom:30px;display:block;float:left}
#tag1-wrapper .recent-by-tag li:last-child,#tag2-wrapper .recent-by-tag li:last-child{margin-right:0}
#tag1-wrapper .recent-by-tag img,#tag2-wrapper .recent-by-tag img{width:100%;height:130px}
#tag1-wrapper .recent-by-tag li a,#tag2-wrapper .recent-by-tag li a{color:#454545}
#tag1-wrapper .recent-by-tag li a:hover,#tag2-wrapper .recent-by-tag li a:hover{color:#349acb}
#tag1-wrapper .recent-by-tag li .showdates,#tag2-wrapper .recent-by-tag li .showdates{display:block;font-size:11px;font-weight:bold;color:#a7b0b7}

2. karena widget ini akan di letakkan di bawah postingan, maka sobat perlu menambahkan kerangka baru dengan cara temukan kode berikut.

<b:section class='main' id='main' showaddelement='no'>

Lalu susutkan dengan mengeklik bidang (segitiga) tepat sejajar di sisi kirinya, sehingga menjadi seperti di bawah ini.

<b:section class='main' id='main' showaddelement='no'>...</b:section>

3. salin kode di bawah ini dan letakkan di bagian bawah kode yang di susutkan tadi.

<div id='tag1-wrapper'>
  <b:section class='tags1' id='tags1' showaddelement='yes'>
<div class='clear'/>
  </div>
<div id='tag2-wrapper'>
  <b:section class='tags2' id='tags2' showaddelement='yes'>
<div class='clear'/>
  </div>

4. cari kode </head> lalu letakkan kode di bawah ini tepat di atasnya.

<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var showpostdate = true;
//<![CDATA[
var _0xecb6=["x3Cx75x6Cx20x63x6Cx61x73x73x3Dx22x72x65x63x65x6Ex74x2Dx62x79x2Dx74x61x67x22x3E","x77x72x69x74x65","x65x6Ex74x72x79","x66x65x65x64","x24x74","x74x69x74x6Cx65","x6Cx65x6Ex67x74x68","x6Cx69x6Ex6B","x72x65x6C","x72x65x70x6Cx69x65x73","x74x79x70x65","x74x65x78x74x2Fx68x74x6Dx6C","x68x72x65x66","x61x6Cx74x65x72x6Ex61x74x65","x75x72x6C","x6Dx65x64x69x61x24x74x68x75x6Dx62x6Ex61x69x6C","x63x6Fx6Ex74x65x6Ex74","x3Cx69x6Dx67","x69x6Ex64x65x78x4Fx66","x73x72x63x3Dx22","x22","x73x75x62x73x74x72","","x68x74x74x70x3Ax2Fx2Fx32x2Ex62x70x2Ex62x6Cx6Fx67x73x70x6Fx74x2Ex63x6Fx6Dx2Fx2Dx67x69x6Fx76x61x31x5Ax43x68x2Dx41x2Fx55x7Ax71x36x4Cx38x51x54x4Ax4Ex49x2Fx41x41x41x41x41x41x41x41x41x4Ax63x2Fx55x53x58x69x63x74x54x71x5Fx78x73x2Fx73x37x30x2Dx63x2Fx4Bx4Dx2Bx49x63x6Fx6Ex2Ex70x6Ex67","x70x75x62x6Cx69x73x68x65x64","x73x75x62x73x74x72x69x6Ex67","x4Ax61x6Ex75x61x72x69","x46x65x62x72x75x61x72x69","x4Dx61x72x65x74","x41x70x72x69x6C","x4Dx65x69","x4Ax75x6Ex69","x4Ax75x6Cx69","x41x67x75x73x74x75x73","x53x65x70x74x65x6Dx62x65x72","x4Fx6Bx74x6Fx62x65x72","x4Ex6Fx76x65x6Dx62x65x72","x44x65x73x65x6Dx62x65x72","x3Cx6Cx69x20x63x6Cx61x73x73x3Dx22x63x6Cx65x61x72x22x3E","x3Cx61x20x68x72x65x66x3Dx22","x22x20x74x61x72x67x65x74x20x3Dx22x5Fx62x6Cx61x6Ex6Bx22x20x74x69x74x6Cx65x3Dx22","x22x3Ex3Cx69x6Dx67x20x63x6Cx61x73x73x3Dx22x72x63x74x2Dx74x68x75x6Dx62x22x20x61x6Cx74x3Dx22","x22x20x73x72x63x3Dx22","x22x2Fx3Ex3Cx2Fx61x3E","x3Cx73x74x72x6Fx6Ex67x3Ex3Cx61x20x68x72x65x66x3Dx22","x22x20x72x65x6Cx3Dx22x6Ex6Fx66x6Fx6Cx6Cx6Fx77x22x3E","x3Cx2Fx61x3Ex3Cx2Fx73x74x72x6Fx6Ex67x3E","x3Cx62x72x3E","x3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x73x68x6Fx77x64x61x74x65x73x22x3E","x20","x3Cx2Fx73x70x61x6Ex3E","x3Cx2Fx6Cx69x3E","x3Cx2Fx75x6Cx3E"];function rcentbytag(_0xb075x2){document[_0xecb6[1]](_0xecb6[0]);for(var _0xb075x3=0;_0xb075x3<numposts;_0xb075x3++){var _0xb075x4=_0xb075x2[_0xecb6[3]][_0xecb6[2]][_0xb075x3];var _0xb075x5=_0xb075x4[_0xecb6[5]][_0xecb6[4]];var _0xb075x6;if(_0xb075x3==_0xb075x2[_0xecb6[3]][_0xecb6[2]][_0xecb6[6]]){break };for(var _0xb075x7=0;_0xb075x7<_0xb075x4[_0xecb6[7]][_0xecb6[6]];_0xb075x7++){if(_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[8]]==_0xecb6[9]&&_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[10]]==_0xecb6[11]){var _0xb075x8=_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[5]];var _0xb075x9=_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[12]];};if(_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[8]]==_0xecb6[13]){_0xb075x6=_0xb075x4[_0xecb6[7]][_0xb075x7][_0xecb6[12]];break ;};};var _0xb075xa;try{_0xb075xa=_0xb075x4[_0xecb6[15]][_0xecb6[14]]}catch(h){s=_0xb075x4[_0xecb6[16]][_0xecb6[4]];a=s[_0xecb6[18]](_0xecb6[17]);b=s[_0xecb6[18]](_0xecb6[19],a);c=s[_0xecb6[18]](_0xecb6[20],b+5);d=s[_0xecb6[21]](b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=_0xecb6[22]){_0xb075xa=d}else {_0xb075xa=_0xecb6[23]};};var _0xb075xb=_0xb075x4[_0xecb6[24]][_0xecb6[4]];var _0xb075xc=_0xb075xb[_0xecb6[25]](0,4);var _0xb075xd=_0xb075xb[_0xecb6[25]](5,7);var _0xb075xe=_0xb075xb[_0xecb6[25]](8,10);var _0xb075xf= new Array;_0xb075xf[1]=_0xecb6[26];_0xb075xf[2]=_0xecb6[27];_0xb075xf[3]=_0xecb6[28];_0xb075xf[4]=_0xecb6[29];_0xb075xf[5]=_0xecb6[30];_0xb075xf[6]=_0xecb6[31];_0xb075xf[7]=_0xecb6[32];_0xb075xf[8]=_0xecb6[33];_0xb075xf[9]=_0xecb6[34];_0xb075xf[10]=_0xecb6[35];_0xb075xf[11]=_0xecb6[36];_0xb075xf[12]=_0xecb6[37];document[_0xecb6[1]](_0xecb6[38]);if(showpostthumbnails==true){document[_0xecb6[1]](_0xecb6[39]+_0xb075x6+_0xecb6[40]+_0xb075x5+_0xecb6[41]+_0xb075x5+_0xecb6[42]+_0xb075xa+_0xecb6[43])};document[_0xecb6[1]](_0xecb6[44]+_0xb075x6+_0xecb6[40]+_0xb075x5+_0xecb6[45]+_0xb075x5+_0xecb6[46]);document[_0xecb6[1]](_0xecb6[47]);var _0xb075x10=_0xecb6[22];var _0xb075x11=0;if(showpostdate==true){_0xb075x10=_0xecb6[48]+_0xb075x10+_0xb075xe+_0xecb6[49]+_0xb075xf[parseInt(_0xb075xd,10)]+_0xecb6[49]+_0xb075xc+_0xecb6[50];_0xb075x11=1;};document[_0xecb6[1]](_0xb075x10);document[_0xecb6[1]](_0xecb6[51]);if(_0xb075x3!=numposts-1){document[_0xecb6[1]](_0xecb6[22])};};document[_0xecb6[1]](_0xecb6[52]);}
//]]>
</script>

5. cari lagi kode </body> lalu letakkan kode di bawah ini tepat di atasnya


<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {$('#tag1-wrapper img,#tag2-wrapper img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
//]]>
</script>

6. Simpan Template. Sekarang kita akan membuat kode pemanggilnya di bagian Tata Letak Blog.

7. masuk menu “ Tata Letak” > Pilih Tambah Widget baru di bagian paling bawah > HTML/Java Script > salin kode di bawah ini dan letakkan di dalam widget yang baru sobat buat tadi.

<script>
document.write("<script src="/feeds/posts/default/-/SEO?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>");
</script>
Cara Membuat Artikel Terkait dengan tubnail di Bawah Postingan

NB : Kata SEO pada kode di atas adalah nama Label di dalam blog, silahkan sobat ganti dengan Judul Label di dalam Blog yang sobat inginkan.

8. simpan Setelan dan lihat hasilnya.

Demikianlah tutorial mengenai Cara Membuat Artikel Terkait dengan tubnail di Bawah Postingan, yang harus di ketahui. jika sobat ada masalah atau sudah berhasil jangan lupa untuk mengisi Kotak komentar di bawah ini. Semoga artikel ini dapat menjadi ilmu yang bermanfaat.

sumber : http://www.bungfrangki.com/2015/09/membuat-widget-label-tertentu-dengan-thumbnail.html