Widget Info Jadwal Rilis Auto Seperti Tonansub


Jadwal rilis biasanya dibuat oleh fansub-fansub anime yang sangat berguna bagi visitor yang ingin anime apa saja yang update dihari tertentu. Pada kesempatan sebelumnya saya sudah membagikan Gallery jiul AMP Template Blogger secara gratis, dan pada kesempatan kali ini saya akan membagikan tutorial Cara Membuat Widget Info Jadwal Rilis Auto untuk kalian. Tutorial ini mungkin sangat berguna untuk kalian yang mempunyai blog fansub atau fanshare.

Widget Info Jadwal Rilis Auto ini hampir mirip Tonansub, namun berbeda sedikit di bagian designnya saja, Ok kita mulai saja tutorial kali ini

Cara Membuat Widget Info Jadwal Rilis Auto

1. Buka Blogger > Tema > Edit HTML, Lalu simpan CSS berikut ini di atas </style> dan Save Tema.
/* Informasi Rilis Anime Widget Auto - Arleth98
   ============================================ */
.jadwal{font-size:15px;font-weight:bold}
.jadwal .as{display:none}
.jadwal>marquee{text-align:center}
h2.titlerlis{position:relative;margin-top:0;margin-bottom:5px;text-align:center;display:block;font-size:15px}
h2.titlerlis:before{position:absolute;top:40%;z-index:1;display:block;width:100%;height:1px;border-top:2px solid #ccc;content:""}
h2.titlerlis>span{position:relative;z-index:1;padding:0 20px;background:#fff;display:inline-block}

2. Buka Tata Letak > Tambahkan Widget > HTML/Javascript, lalu simpan Javascript ini di widget tersebut & jangan Lupa edit yang sudah diMarkup.
<div class='jadwal'>
<script type='text/javascript'>
<!--
document.write('<h2 class="titlerlis"><span>Jadwal Rilis Hari Ini</span></h2>');
document.write('<marquee height="78px" behavior="scroll" scrollamount="2" direction="down" onmouseover="this.stop();" onmouseout="this.start();">');
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
var myDays = [
'<a href="LINK POST" target="_blank">Minggu</a>', 
'<a href="LINK POST" target="_blank">Senin</a>', 
'<a href="LINK POST" target="_blank">Selasa</a>', 
'<a href="LINK POST" target="_blank">Rabu</a>', 
'<a href="LINK POST" target="_blank">Kamis</a>', 
'<a href="LINK POST" target="_blank">Jum&#39;at</a>', 
'<a href="LINK POST" target="_blank">Sabtu</a>'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var thisDay = date.getDay(),
thisDay = myDays[thisDay];
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(thisDay);
document.write('<div class="as">' + day + ' ' + months[month] + ' ' + year + '</div>');
document.write('</marquee>');
//-->
</script>
</div>

3. Selesai.

Jika Tidak Aktif Silahkan tambahkan Javascript ini di atas </head>, Jika sudah ada tidak perlu lagi di tambah
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Jika Ingin menambahkan rilisan animenya silahkan tambah <br/>, Contohnya seperti ini
<div class='jadwal'>
<script type='text/javascript'>
<!--
document.write('<h2 class="titlerlis"><span>Jadwal Rilis Hari Ini</span></h2>');
document.write('<marquee height="78px" behavior="scroll" scrollamount="2" direction="down" onmouseover="this.stop();" onmouseout="this.start();">');
var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
var myDays = [
'<a href="LINK POST" target="_blank">Minggu1</a><br/><a href="LINK POST" target="_blank">Minggu2</a>', 
'<a href="LINK POST" target="_blank">Senin1</a><br/><a href="LINK POST" target="_blank">Senin2</a>', 
'<a href="LINK POST" target="_blank">Selasa1</a><br/><a href="LINK POST" target="_blank">Selasa2</a>', 
'<a href="LINK POST" target="_blank">Rabu1</a><br/><a href="LINK POST" target="_blank">Rabu2</a>', 
'<a href="LINK POST" target="_blank">Kamis1</a><br/><a href="LINK POST" target="_blank">Kamis2</a>', 
'<a href="LINK POST" target="_blank">Jum&#39;at1</a><br/><a href="LINK POST" target="_blank">Jum&#39;at2</a>', 
'<a href="LINK POST" target="_blank">Sabtu1</a><br/><a href="LINK POST" target="_blank">Sabtu2</a>'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var thisDay = date.getDay(),
thisDay = myDays[thisDay];
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(thisDay);
document.write('<div class="as">' + day + ' ' + months[month] + ' ' + year + '</div>');
document.write('</marquee>');
//-->
</script>
</div>

DEMO

Ok sekian tutorial kali ini semoga bermanfaat dan sampai jumpa di lain hari.
Related Posts
Disqus Comments