Sebelumnya aku mengalami kesulitan menciptakan Widget Resent Post dengan banyak sekali instruksi HTML untuk tampilan blog aku namun kode-kode tersebut kebanyakan agak dapat di tampilkan di blog aku entak apa permasalahannya aku juga belum dapat memastikan.
Namun dengan Kode HTML ini jadinya Widget Resent Post yang aku inginkan jadinya bis tampil di blog saya, tampilannya cukup sederhana dan mungkin sudah bnyak yang menampilkan Widget Resent Post ini di banyak sekali blog lain.
Namun untuk memudahkan pencrian jikalau sewaktu-waktu aku membutuhkan lagi aku tinggal mencarinya di blog ini dan mungkin bila juga ada yang membutuhkan agar ini dapat di gunakan untuk rujukan dalam pembuatan Widget Resent Post.
Baiklah untuk mempermudah dan mempersingkatnya aku kan coba membagikan HTML nya dan pribadi di terapkan.
Pertama-tama silahkan Copy HTML di bawah ini, Kemudian buka blok anda Klik Tata Letak > Buat Widget Baru dan paste instruksi HTML nya.
<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:75px;margin-right:8px;width:95px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:13px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='no';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzKpPShCCMrvPsZ888bauvAawDzgRhOfAWNtrTvBkXR9g4N67JE4QwWq0S1mHt8C2LoRi1mBgyZmYoB2LLTIRq-RZy5KsK33ShVAL4aJL2actjjBd2kzejXVBRPtjjNA32UsD9k1c1dfA-/"};}};dw+='<li>';dw+='<img alt=" Sebelumnya aku mengalami kesulitan menciptakan Widget Resent Post dengan banyak sekali instruksi HTML Cara Membuat Widget Resent Post Pada Blog Dengan Tampilan Menarik" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="Cara Membuat Widget Resent Post Pada Blog Dengan Tampilan Menarik">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:75px;margin-right:8px;width:95px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:13px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='no';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzKpPShCCMrvPsZ888bauvAawDzgRhOfAWNtrTvBkXR9g4N67JE4QwWq0S1mHt8C2LoRi1mBgyZmYoB2LLTIRq-RZy5KsK33ShVAL4aJL2actjjBd2kzejXVBRPtjjNA32UsD9k1c1dfA-/"};}};dw+='<li>';dw+='<img alt=" Sebelumnya aku mengalami kesulitan menciptakan Widget Resent Post dengan banyak sekali instruksi HTML Cara Membuat Widget Resent Post Pada Blog Dengan Tampilan Menarik" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="Cara Membuat Widget Resent Post Pada Blog Dengan Tampilan Menarik">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>
Lalu lalu Simpan.
Dan lihat hasilnya, bila anda ingin merubah sebagian dari tampilan berikut ini ada keterangan – keterangan dari widget tersebut.
rcp_numposts=5; = Ganti angkan 5 dengan jumlah postingan yang akan ditampilkan.
var rcp_snippet_length=150; = Jumlah abjad isi artikel yang akan ditampilkan ketika hover link judul postingan.
rcp_info='yes'; = Ketik no untuk menyembunyikan keterangan tanggal dan jumlah komentar.
rcp_comment='Comments'; = Nama judul goresan pena dari jumlah komentar.
var rcp_snippet_length=150; = Jumlah abjad isi artikel yang akan ditampilkan ketika hover link judul postingan.
rcp_info='yes'; = Ketik no untuk menyembunyikan keterangan tanggal dan jumlah komentar.
rcp_comment='Comments'; = Nama judul goresan pena dari jumlah komentar.
Silahkan sesuaikan dengan impian anda masing-masing, selamat mencoba dan agar dapat bermanfaat.
Sumber http://www.izhukabenq.web.id
Mari berteman dengan saya
Follow my Instagram _yudha58
0 Response to "Cara Menciptakan Widget Resent Post Pada Blog Dengan Tampilan Menarik"
Posting Komentar