 |
| 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}Jika sudah, kemudian cari kode </body> dan letakan kode dibawah ini diatas kode </body>
.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}
}
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBZeM4EDd_lGWR9pseDUyx4N2enCcp7nPPCccvGuUHpVVTrfstj8Pi0DvYpIOIgwCKr1WgucJ-12juanWrnUgLObCxcwK0_Y4kVpGd87U_Znf1Q4dTyJrC42YItKNTOuuu8KCOfNYt/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