Cara Membuat Download Box Seperti Yukisubs

Kijin Tutorial on

Thursday, 16 June 2016

Cara Membuat Download Box Seperti Yukisubs - Download Box biasa digunakan fansub atau fanshare agar website mereka bagus, rapih, dan juga seperti fansub atau fanshare yang profesional. tapi terkadang ada juga fansub atau fanshare yang belum tahu Cara Membuat Download Box.

Sebelumnya saya sudah posting tentang Cara Membuat Download Box Seperti Animefans. Dan pada kesempatan kali ini saya ingin berbagi ilmu tentang Cara Membuat Download Box Seperti Yukisubs. Langsung saja mari ikuti langkah-langkah yang ada di bawah ini.

Pertama, Buka Blogger > Edit HTML > Salin dan Terapkan kode di bawah ini sebelum </head>

<link rel='stylesheet' href='https://cdn.rawgit.com/XScarlet21/host/master/DL-Yukisubs/fontello.css' media='all'/>

Setelah itu, Salin dan Terapkan kode di bawah ini sebelum </b:skin> atau </style>

/* CSS Download Box Yukisubs - Aka321 */
.dl-pembatas{min-height: 0;border-bottom: 1px dashed rgba(0,0,0,0.1);margin-top: 25px;margin-bottom: 25px}
.judul{font-size: 18px}
.dl-center{text-align: center;margin-bottom: 15px !important}
.bluth.green{color: #FFFFFF;background-color: #64b044}
.bluth.blue{color: #FFFFFF;background-color: #3bd2f8}
.bluth.yellow{color: #505050;background-color: #f6eb3b}
.btn.bluth{background-image: none;border: none;border-radius: 4px 4px 4px 4px;box-shadow: none;padding: 10px 15px;text-shadow: none;margin-bottom: 5px}
.btn i{margin:0px !important}
.btn.bluth:hover{transform: scale(1.03);-ms-transform: scale(1.03);-webkit-transform: scale(1.03);-webkit-transition: background-position 0.1s linear;-moz-transition: background-position 0.1s linear;-o-transition: background-position 0.1s linear;transition: background-position 0.1s linear}
.btn.bluth.green:hover, .btn.bluth.green:focus{color:#FFFFFF;background-color:#498132}
.btn.bluth.yellow:hover, .btn.bluth.yellow:focus{color:#505050;background-color:#d2c931}
.btn.bluth.blue:hover, .btn.bluth.blue:focus{color:#FFFFFF;background-color:#34b3d3}

Jika Sudah, Silahkan Simpan Template.

Kemudian, Saat Kamu membuat postingan baru terapkan Kode Download Box Yukisubs di bawah ini pada Tab HTML (Bukan Compose).

<div class="dl-pembatas"></div>
<p class="dl-center judul">
<strong>JUDUL ANIME [480p]</strong>
</p>
<p class="dl-center">
<a href="    LINK TORRENT    " class="btn bluth green btn- " rel="nofollow" target="_blank">
<i class="icon-emo-happy"></i> Torrent
</a> | 
<a href="    LINK SERVER 1    " class="btn bluth blue btn- " rel="nofollow" target="_blank">
<i class="icon-emo-happy"></i> NAMA SERVER 1
</a> | 
<a href="    LINK SERVER 2    " class="btn bluth blue btn- " rel="nofollow" target="_blank">
<i class="icon-emo-happy"></i> NAMA SERVER 2
</a> | 
<a href="    LINK SERVER 3    " class="btn bluth blue btn- " rel="nofollow" target="_blank">
<i class="icon-emo-happy"></i> NAMA SERVER 3
</a> | 
<a href="    LINK SERVER 4    " class="btn bluth yellow btn- " rel="nofollow" target="_blank">
<i class="icon-emo-happy"></i> NAMA SERVER 4
</a>
</p>
<p class="dl-center judul">
<strong>JUDUL ANIME [720p]</strong>
</p>
<p class="dl-center">
<a href="    LINK TORRENT    " class="btn bluth green btn- " rel="nofollow" target="_blank">
<i class="icon-emo-happy"></i> Torrent
</a> | 
<a href="    LINK SERVER 1    " class="btn bluth blue btn- " rel="nofollow" target="_blank">
<i class="icon-emo-happy"></i> NAMA SERVER 1
</a> | 
<a href="    LINK SERVER 2    " class="btn bluth blue btn- " rel="nofollow" target="_blank">
<i class="icon-emo-happy"></i> NAMA SERVER 2
</a> | 
<a href="    LINK SERVER 3    " class="btn bluth blue btn- " rel="nofollow" target="_blank">
<i class="icon-emo-happy"></i> NAMA SERVER 3
</a> | 
<a href="    LINK SERVER 4    " class="btn bluth yellow btn- " rel="nofollow" target="_blank">
<i class="icon-emo-happy"></i> NAMA SERVER 4
</a>
</p>
<div class="dl-pembatas"></div>

Jika Sudah, silahkan kamu mengganti kode yang sudah ditandai sesuai keinginanmu.

• Live Preview

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

Labels: Download Box, Tutorial

Thanks for reading Cara Membuat Download Box Seperti Yukisubs. Please share...!