Friday, June 28, 2019

Cara Membuat Featured Post Grid Responsive di Blogspot

Tags

logo blogger
logo blogger

Cara Membuat Featured Post Grid Responsive di Blogspot

hai sobat ladangtekno


pada kesempatan kali ini mimin ingin membagikan lagi cara membuat featured post dalam bentuk grid. featured post dalam bentuk grid ini akan mebuat tampilan website sobat menjadi lebih menarik nah penasaran kan bagaimana caranya, ok langsung saja kita mulai. pertama kita masuk dashboard blogger kemudian pilih tema dan pilih edit html

jika sudah silahkan cari kode ]]></b:skin> atau </styele> di htmlnya, gunakan CTRL+F untuk mempercepat pencarian. jika sudah ketemu letakan kode dibawah ini diatas kode ]]></b:skin>


.featured #md_fpost98 img{margin:0;padding:0;width:150px;height:195px;overflow:hidden}
.featured ul#md_fpost98 h2{color:#fff;bottom:-10px;background:rgba(17,17,17,0.6);width:140px;font-weight:500;padding:3px 5px;font-size:13px;line-height:20px;position:absolute;height:25px;transition:.3s linear;text-align:center}
.featured ul#md_fpost98 h2:hover{height:65px;transition:.3s linear}
.featured .mdinc p{display:none}
.featured ul#md_fpost98{list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none}
.inf-link{font-size:11px;padding:0 5px;border-radius:2px;position:absolute;bottom:10px;right:-5px}
.featured #md_fpost98 a{color:#64707a;transition:all .3s;display:block}
.featured .md_sum{font-size:13px;color:999}
.featured .mdinc{position:absolute;top:0;right:0;margin:5px;border-radius:5px;padding:5px;background:rgba(17,17,17,0.6);color:#FFF;font-size:12px;font-family:arial,sans-serif}
.featured #md_fpost98 li{margin:5px;padding:0;position:relative;display:inline-block;transition:all .3s;overflow:hidden}
@media screen and (max-width:640px){
  .featured #md_fpost98 li{float:left;width:46%}
  .featured #md_fpost98 img{width:auto;height:auto}
}
Jika sudah, kemudian cari kode </body> dan letakan kode dibawah ini diatas kode </body>

<b:if cond="data:blog.url == data:blog.homepageUrl">
<script type="text/javascript">
$('#md_fpost98 img').each(function(){$(this).attr('src',$(this).attr('src').replace(/\/s[0-9]+(\-c)?\//,'/w150-h195-c/'))});
</script>


terakhir silahkan masuk ke pengaturan tata letak dan buat kode javascript di main post, alias postingan utama bisa diatas postingan atau dibawah postingan, kemudian buat widget dan pilih html atau javascript kemudian letakan kode ini di dalam form javascriptnya
<div class='featured'><ul id='md_fpost98'>
<script type='text/javaScript'>
var randomfpost_number=4;var randomfpost_chars=0;var randomfpost_details="yes";var randomfpost_comments="Comment";var randomfpost_commentsd="no";var randomfpost_current=[];var total_randomfpost=0;var randomfpost_current=new Array(randomfpost_number);function randomfpost(a){total_randomfpost=a.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default/-/Bahasa Indonesia?alt=json-in-script&max-results=0&callback=randomfpost"><\/script>');function getvalue(){for(var e=0;e<randomfpost_number;e++){var g=false;var h=get_random();for(var f=0;f<randomfpost_current.length;f++){if(randomfpost_current[f]==h){g=true;break}}if(g){e--}else{randomfpost_current[e]=h}}}function get_random(){var b=1+Math.round(Math.random()*(total_randomfpost-1));return b};
</script>
<script type='text/javaScript'>
function md_fpost(j){for(var p=0;p<randomfpost_number;p++){var n=j.feed.entry[p];var s=n.title.$t;if("content" in n){var m=n.content.$t}else{if("summary" in n){var m=n.summary.$t}else{var m=""}}for(var q=0;q<n.link.length;q++){if("thr$total" in n){var l=n.thr$total.$t+" "+randomfpost_comments}else{l=randomfpost_commentsd}if(n.link[q].rel=="alternate"){var o=n.link[q].href;if("media$thumbnail" in n){var r=n.media$thumbnail.url}else{r="https://2.bp.blogspot.com/-d1lPGC5wgGQ/WBePYBCYCmI/AAAAAAAAAr8/ji8u6T4oPSUHvTdAAeBE2Fc3AWrFCUBcwCLcB/s1600/no-image.png"}}}document.write("<li>");document.write('<a href="'+o+'" rel="nofollow"><img alt="'+s+'" src="'+r+'" width="'+145+'" height="'+185+'"/><h2>'+s+"</h2></a>");if(randomfpost_details=="yes"){document.write('<div  class="mdinc">Bahasa Indonesia <p> '+l)+'</p></div><div style="clear:both"></div></li>'}}}getvalue();for(var i=0;i<randomfpost_number;i++){document.write('<script type="text/javascript" src="/feeds/posts/default/-/Seputartekno?alt=json-in-script&start-index='+randomfpost_current[i]+'&max-results=1&callback=md_fpost"><\/script>')};
</script>
</ul></div>
</b:if>
silahkan ganti angka 4 pada  randomfpost_number=4 menjadi jumlah postingan yang diinginkan, selanjutnya silahkan ganti tulisan Seputartekno menjadi label  yang ingin ditampilkan

OK. sekian postingan mimin kali ini semoga bisan membantu. jangan lupa terus kunjungi ladangtekno dan dapatkan informasi menarik mengenai dunia teknologi

Terimakasih

komentar dengan bijak ya :)
please write comments wisely :)
EmoticonEmoticon