Cara Buat List Anime Sperti Tonansub

11.00.00
Pagi semuanya...
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>

Previous
Next Post »
Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

Tidak ada komentar