CARA MEMBUAT RECENT POST MELAYANG DENGAN TOMBOL CLOSE

Posted by KAWULO ALIT on

Jika kemarin telah di bahas cara membuat iklan melayang di sertai tombol Close. Nah untuk saat ini yang akan di bahas yaitu Cara membuat artikel terbaru atau Recent post melayang dengan tombol Close. Yak... Kalau biasanya Artikel terbaru atau recent post terletak di bilah samping kanan maupun kiri atau di bawah postingan dan tepatnya berada di Sidebar. Tapi untuk yang kali ini yaitu Recent post melayang yang di sertai Tombol Close dan iklan banner.

Seperti nampak di gambar bawah ini.

Selain Recent post yang melayang, juga bisa di sisipkan iklan banner loh tepat di bawah recent post tersebut. Lebih unik lagi recent post yang kali ini adalah recent post yang bisa di scroll ke atas jadi tidak akan memenuhi halaman blog sobat.

Fitur:

- Recent post Melayang

- Recent post Scroll ke atas

- Recent post disertai tombol Close dan di sertai iklan banner di bawahnya.

Artikel terbarunya juga di lengkapi thumbnail gambar jadi nampak keren di blog sobat. Blog adpati akan memberikan sedikit script widget di atas. Cara pemasangannya pun cukup mudah. Simak langsung langkah-langkahnya.

1). Masuk akun Blogger

2). Masuk bagian Tata Letak - Tambahkan gadget - dan Copy Kode di bawah ini dan pastekan di situ.

 <script type='text/javascript'>

$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>

<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>

<div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9X7L2vk4rhiSXFRoYlMzwIHU32I1lbPOuREWUN7J9yv7_AS-L203l8Jio_0ixpJ-yYRvGelVqt20QnAtfScdb4dl8o9rXKdPtqDiBgI6QuoZVQkkzUY-F5Pv_0WkveNvdoM39MhGrn-DE/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>

<center>
<div style="border: 0px solid #00FF00; height: 300px; overflow: auto; padding: 3px; width: auto;">
<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}

#recent-posts ul li a{display:block;color:#ff0000;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;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}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=10;

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)+"&#133;";};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/AVvXsEgbqfqHNKtBNiUAtEX3cV1d0r_3vovTQ3Cqoj4HUTSnCuD8iP8Evzvp_SafHSl1zvG4iyZO4z2mhZAe5XjOrhJZR53HDBpgNRcOwPbqIVJxctAaQQ8EF6vxk2BD3XB1NV8MrJbEflIGfBqO/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+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>');
var rcp_snippet_length=75;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
</script>

TARUH KODE IKLAN BANNER DI SINI


</div></center></div> 

3). Save dan lihat hasilnya.

Baca Juga

Apabila script tidak bekerja dengan benar mungkin ada beberapa Element yang perlu di tambahkan ke Template sobat. Untuk Kode iklan banner bisa kalian pasang di bagian bawah. Bisa di cermati bagian script.

Var rcp_numpost = 10 ( bisa di ganti sesuai yang kalian inginkan. Ini adalah jumlah postingan terbaru yang akan di tampilkan.

Demikian mengenai Script Recent post melayang dengan iklan dan tombol Close. Apabila ada pertanyaan bisa tinggalkan komentar di bawah ya.

Semoga membantu..

Labels: BLOG, TUTORIAL

Thanks for reading CARA MEMBUAT RECENT POST MELAYANG DENGAN TOMBOL CLOSE. Please share...!