Modifikasi Popular Post dan Random Post Menjadi Thumbnails

Modifikasi Popular Post dan Random Post Menjadi Thumbnails - Beberapa hari ini saya enggak update postingan di blog ini dan juga belum bisa blogwalking ke blog-blog sahabat... karena ada alasan-alasan tertentu yang membuat saya tidak bisa update. Kebetulan saya lagi jalan-jalan ke blog-blog teman saya akhirnya saya menemukan ide posting yaitu Modifikasi Popular Post dan Random Menjadi Thumbnails. Sedikit kasian dengan blog ku yang malang ini, akhirnya aku dapat ide posting yang tutorialnya ane dapat dari Kompiajaib.

Sebenarnya sudah banyak bertebaran tutorial seperti ini dengan modifikasi yang cukup keren. Hasil modifikasinya akan tampil seperti gambar di atas dengan 3 gambar ke kanan dan 3 gambar ke bawah. Bagi yang tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

Baca juga:
Cara Membuat Widget Popular Post Warna Warni Di Blog
Cara Memasang Widget Random Post di Blog

Modifikasi Popular Post Menjadi Thumbnails :
1. Buka Blogger

2. Tentunya Anda harus menambahkan widget popular post dulu. Masuk ke tata letak kemudian tambahkan gadget dan pilih popular post. Kemudian setting popular post-nya dengan pilihan hanya thumbnail dan atur jumlah post yang tampilnya ke angka 9 kemudian save gadgetnya.

3. Jika sudah pergi ke Template -> Back-up Template -> Edit HTML

4. Silahkan copy dan paste kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

#PopularPosts1 {width:100%;background:none;} #PopularPosts1 .widget-content {margin: 0 !important; } #PopularPosts1 ul {margin: 0 !important; padding: 0 !important; } #PopularPosts1 ul li {background:none ;list-style-type: none;margin:0;padding:0 !important} #PopularPosts1 ul li .item-title{display:none} #PopularPosts1 li {float:left;list-style:none;} #PopularPosts1 .item-thumbnail img {float:left;margin-bottom:3px;width:90px;height:90px;border:none;transition:all 400ms ease-in-out;} #PopularPosts1 .item-thumbnail img:hover {opacity:.7}

5.  Silahkan "jump to widget" pilih popular post untuk menuju kode html popular post. Kemudian cari kode ini <!-- (3) Show only thumbnails --> dan geser ke bawah sedikit Anda akan menemukan kode seperti di bawah ini.

<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>

6. Silahkan ganti dengan kode di bawah ini.

<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='thumbnails' expr:src='data:post.thumbnail' expr:title='data:post.title' height='90' width='90'/>
</a>
</div>

*Jika thumbnilnya kurang pas dengan lebar widget blog Anda silahkan tambahkan pada angka 90 (yang berwarna merah pada langkah ke-2 dan ke-3).

7. Simpan template dan selamat mencoba

Modifikasi Random Post Menjadi Thumbnails :

1. Buka Blogger

2. Template -> Back-up Template -> Edit HTML

3. Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

#random-posts{width:100%;background:none;}
#random-posts ul {margin: 0 !important; padding: 0 !important; }
#random-posts ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#random-posts li{float:left;list-style:none;}
#random-posts img{float:left;margin-right:5px;margin-bottom:5px;border:none;width:90px;height:90px;transition:all 400ms ease-in-out;}
#random-posts img:hover {opacity:.7}

2. Jika sudah simpan template, lalu masuk ke tata letak dan tambahkan gadget HTML/JavaScript kemudian masukan script di bawah ini.

<div id="random-posts">
<ul>
<script type='text/javaScript'>
var rdp_numposts=9;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8VsufHmxSJzTsWCm8n8KYOV8BjMBNyMx1RjnCnKJcuh0Zj_6Xmbg63TgW5KsHHntveyzgjjow-9IsZb8-bbKj9dKewE2opbSMY-7ZwVzqOU5oe6tBJxg2aMcl9Ccu6OUX79kC5YMZ5QEU/"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
</div>

3. Untuk mengatur banyaknya post yang ditampilkan silahkan atur pada kode var rdp_numposts=9; dan untuk mengatur size gambarnya silahkan atur pada angka 90 yang berwarna merah pada kode CSS sama kode javascriptnya. Dan setelah saya cek widget ini valid HTML5 dan CSS3 juga tidak mengurangi skor SEO pada Chkme dan image dimention di GTMetrix.