Cara Menciptakan Widget Latest Episodes

Cara Membuat Widget Latest Episodes - Fitur ini biasa kita temui diblog atau web download anime baik itu fansub/fanshare, pola tutorial ini dapat kalian lihat dibawah ini.

Sebelumnya aku sudah membagikan tutorial wacana Cara Membuat Simple Recent Post By Label, fitur tersebut hampir sama menyerupai ditutorial ini yang membedakannya hanya designnya saja, ok kita mulai saja tutorial kali ini.

Cara Membuat Widget Latest Episodes

1. Silahkan Buka Blogger > Add Widget > HTML/Javascript kemudian salin dan paste instruksi CSS dibawah ini kedalam widget tersebut

<style type="text/css"> ul#recent-posts{list-style:none;margin:0;padding:0} li.recent-posts{clear:both;border-bottom:1px solid #DDD;line-height:13px;margin:0;padding:6px 3px;list-style:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} li.recent-posts:last-child{border-bottom:0;} li.recent-posts:nth-child(odd) {background: #eee;} li.recent-posts a{color:#333;} li.recent-posts:before {content:'SUB';margin-right: 5px;padding: 5px;color: #FFF;background: #333;} li.recent-posts a:hover{text-decoration:underline} </style>



2. Kemudian Tambahkan HTML ini sempurna dibawah CSS yang sudah kalian letakkan di widget tadi

<ul id="recent-posts"></ul>



3. Selanjutnya Salin javascript ini dan paste sempurna dibawah HTML barusan

<script> //<![CDATA[ var homePage = "https://arlethdesign.blogspot.co.id/" , numPosts = 10; function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="Cara Membuat Widget Latest Episodes" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp); //]]> </script>



4. Jika sudah simpan widget

Demo

Tag	Keterangan
https://arlethdesign.blogspot.co.id/	Ganti Dengan link homepage blog kalian

Bagikan Artikel ini