16 Juni 2016

Cara Membuat Download Box Seperti Yukisubs

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.

Cara Membuat Download Box Seperti Yukisubs, Cara Membuat Download Box Seperti Fansub, Cara Membuat Download Box Fansub, Cara Membuat Link Download Fansub, Cara Membuat Link Download Seperti Yukisubs, How To Make Download Box Like Fansub, How To Make Download Link Fansub

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.


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

Artikel Terkait

1 komentar so far

Maaf gan bukan bermaksud sok tau, soalnya saya juga banyak belajar dari agan hehe
Tapi kalo diliat dari script di atas berdasarkan pengalaman saya masalah menaruh banyak link di dalam satu postingan jika memakai fungsi target="_blank" kalo diklik bisa muncul 2 tab baru yang sama sekaligus, tapi hanya di browser mozilla firefox saja. Jadi untuk mencegah hal tersebut menurut saya lebih baik memakai target="output". Maaf ya gan saya hanya berbagi pengalaman aja hehe

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.
EmoticonEmoticon