Ok di postingan kali ini saya akan memberikan sebuah tutorial yaitu Cara Buat List Anime Sperti Tonansub
yosh langsung saja ke tutorial
1. Login Blogger dulu
2. Masuk Template -> Edit HTML
3. Widget ini menggunakan Font Awesome jadi cari kode </head> jadi silhakan terapkan kode CSS ini tepat di atas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>4. Lalu cari kode </style> atau ]]></b:skin> (untuk memudahkan pencarian tekan CTRL + F) terpkan kode CSS ini tepat diatas kode </style> atau ]]></b:skin>
/* CSS Anime List Tonansub by Nukodezign */
.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;}
5. Bila sudah Simpan template
6. Lalu buat Laman baru masuk bagian Compose dan pastekan kode HTML di bawah ini
<div class="animelist">
<h2 class="animelist">
<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>
<td width="65%">Yuru yuri san hai</td>
<td width="20%"><i class="fa fa-check-circle"></i> completed</td>
<td width="15%"><a class="tsdl321" href="yuru-yuri-san-hai"><i class="fa fa-download"></i>DOWNLOAD</a></td>
</tr>
</tbody>
</table>
</div>