Cara Membuat Anime List Seperti Tonansub

Cara Membuat Anime List Seperti Tonansub - Anime List atau Daftar Anime, biasanya digunakan oleh Fansub atau Fanshare agar para pengunjung setianya mudah mencari Anime yang di inginkan.

Sebelumnya saya sudah berbagi ilmu tentang Cara Membuat Anime List Seperti Wardhanime tahun 2014 Dan pada kesempatan kali ini saya ingin berbagi ilmu tentang Cara Membuat Anime List Seperti Tonansub. Langsung saja kamu ikuti langkah-langkah yang ada di bawah ini.

Widget ini menggunakan Font Awesome, jadi silahkan tambahkan link CSS berikut sebelum </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>

Jika link diatas sebelumnya sudah terpasang, silahkan lewati bagian ini.

Pertama, Buka Blogger > Edit HTML > Salin dan Terapkan kode di bawah ini sebelum </b:skin> atau </style>

/* CSS Anime List Tonansub - Aka321 */
.tslist321{font-family: 'Open Sans', Sans-serif;font-size: 13px}
.tsjdl321{position: relative;margin-top: 0;margin-bottom: 5px;text-align: center;display: block;font-size: 24px}
.tsjdl321:before{position: absolute;top: 50%;z-index: 1;display: block;width: 100%;height: 1px;border-top: 2px solid #ccc;content: ""}
.tsjdl321 span{position: relative;z-index: 1;padding: 0 20px;background: #fff;display: inline-block}
.tsinf321{color: #408c1f;background-color: #f1ffe0;border: 1px solid #c2e5b3;padding: 15px;border-radius: 4px;font-size: 13px}
.tsinf321 .close{position: relative;color: inherit;opacity: 0.2;filter: alpha(opacity=20);float: right;font-size: 21px;font-weight: bold;cursor: pointer;background: transparent;border: 0}
.tsani321 tr:nth-child(odd){background-color: rgba(90, 186, 198, 0.05)}
.tsani321 td{padding: 8px !important;line-height: 1.5;vertical-align: top;border: 0;border-top: 1px solid #ebebeb;text-transform: capitalize}
.tsani321 td:hover{background:none !important}
.tsani321 i{padding-right: 5px;color: #75c5cf}
.tsdl321{background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,0.06) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#0f000000', GradientType=0 );background-color: #fff;color: #75c5cf !important;text-transform: uppercase;font-weight: bold;padding: 1px 5px;font-size: 12px !important;line-height: 1.5;border-radius: 3px;border: 1px solid #cccccc;display: inline-block;white-space: nowrap;vertical-align: middle;cursor: pointer}
.tsdl321:hover {background: #fff;}

Setelah itu, Salin dan Terapkan kode di bawah ini sebelum </head>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".tsinf321").show(),$(".tsinf321 .close").click(function(){return $(".tsinf321").fadeOut(),!1})});//]]>
</script>

Setelah itu, Silahkan Simpan Template.

Jika sudah, Buat postingan baru di halaman statis > Kemudian tambah kode di bawah ini pada Tab HTML (Bukan Compose).

<div class="tslist321"> 
<h2 class="tsjdl321">
<span>List Anime Subtitle Indonesia</span>
</h2>
<div class="tsinf321">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<i class="fa fa-check"></i> Tekan <b>Ctrl+F</b> Untuk mempercepat pencarian
</div>
<table class="tsani321">
<tbody>
<tr>
<td width="65%">   NAMA ANIME   </td>
<td width="20%"><i class="fa fa-check-circle"></i>   STATUS ANIME   </td>
<td width="15%"><a class="tsdl321" href="   LINK TUJUAN   "><i class="fa fa-download"></i>DOWNLOAD</a></td>
</tr>
<tr>
<td width="65%">   NAMA ANIME   </td>
<td width="20%"><i class="fa fa-check-circle"></i>   STATUS ANIME   </td>
<td width="15%"><a class="tsdl321" href="   LINK TUJUAN   "><i class="fa fa-download"></i>DOWNLOAD</a></td>
</tr>
<tr>
<td width="65%">   NAMA ANIME   </td>
<td width="20%"><i class="fa fa-check-circle"></i>   STATUS ANIME   </td>
<td width="15%"><a class="tsdl321" href="   LINK TUJUAN   "><i class="fa fa-download"></i>DOWNLOAD</a></td>
</tr>
<tr>
<td width="65%">   NAMA ANIME   </td>
<td width="20%"><i class="fa fa-check-circle"></i>   STATUS ANIME   </td>
<td width="15%"><a class="tsdl321" href="   LINK TUJUAN   "><i class="fa fa-download"></i>DOWNLOAD</a></td>
</tr>
</tbody>
</table>
</div>

Terakhir, silahkan kamu mengganti kode yang sudah ditandai sesuai keinginanmu.

• Live Preview

Sekian Tutorial kali ini. Semoga Bermanfaat. Sampai jumpa pada tutorial berikutnya.