Cara Menciptakan Recent Post Scroll Melayang Dengan Tombol Close

Jika kemarin telah di bahas cara menciptakan iklan melayang di sertai tombol Close. Nah untuk ketika ini yang akan di bahas yaitu Cara menciptakan 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 dapat di sisipkan iklan banner loh sempurna di bawah recent post tersebut. Lebih unik lagi recent post yang kali ini yaitu recent post yang dapat 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 menunjukkan sedikit script widget di atas. Cara pemasangannya pun cukup mudah. Simak pribadi langkah-langkahnya.
1). Masuk akun Blogger
2). Masuk bab 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/AVvXsEjH3XsB8SZL3Muxd0dFdQI5A7g7Asj_E3QWnmiLcd45In85ld6A8ufrj5l7IBhlIuuSbOsA3ekLBfptrtpGYX7PVw3HWr4xDX-8IbsfVu-LnVGqLyMdCwL-gFjkOWjCcukgjWsmPL3iqewy/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 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} #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} </style> <div id='recent-posts'> <script type='text/javaScript'> var rcp_numposts=10; var rcp_snippet_length=75; var rcp_info='yes'; 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)+"&#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/AVvXsEgvCHJJrRW4pB85dX8OW0moYKPTGc3B0aLbEt9xdM2feTqu-426GFe2MFaAP6s62ZWIFylwoPO8jYg1OXe0X6djmdQDLMkp5Pa7ZICpFGqq_KZuzfE_1lNrvnl545a5N3SAerHhHb0dvNJw/"};}};dw+='<li>';dw+='<img alt="cara menciptakan iklan melayang di sertai tombol Close Cara Membuat Recent Post  Scroll Melayang  Dengan Tombol Close" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="Cara Membuat Recent Post  Scroll Melayang  Dengan Tombol Close">'+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>  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 dapat kalian pasang di bab bawah. Bisa di cermati bab script.

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


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

Bagikan Artikel ini