Modifikasi Popular Post dan Random Post Menjadi Thumbnail di Blogspot
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.
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;}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.
#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}
<div class='item-thumbnail'>6. Silahkan ganti dengan kode di bawah ini.
<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>
<div class='item-thumbnail'>*Jika thumbnilnya kurang pas dengan lebar widget blog Anda silahkan tambahkan pada angka 90 (yang berwarna merah pada langkah ke-2 dan ke-3).
<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>
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;}2. Jika sudah simpan template, lalu masuk ke tata letak dan tambahkan gadget HTML/JavaScript kemudian masukan script di bawah ini.
#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}
<div id="random-posts">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.
<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)+"…";};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/AVvXsEimVrR_NT7OBP8HEsIF67Wae2P5Ivcl4jAfMsW3T0szkN27Qh7Q5hmi40mL6oV2LFWvi8r8dxY-LTqVSGqiQGa9Ue_ZEUSRkx7oWPEtv-dUF0M0RWmvg1XE9ItRvHkKGt3pZhnZFZiDgR48/"}}};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>
Sumber : SCH-XP
0 komentar:
Posting Komentar