Cara Membuat Link Download Seperti Wardhanime (AWsubs) Di Blog

Kali ini kita akan sedikit mengintip kode sebuah fansub ternama, yaitu Wardhanime atau AWsubs. Saya akan membagikan kepada kalian tutorial blog tentang bagaimana cara membuat link download (Untuk anime) ala yang ada pada AWsubs. Seperti apa? Kalian bisa melihatnya pada gambar di bawah ini atau klik link demo di bawahnya :

Demo

Bagaimana? Kalian tertarik? Dalam tutorial ini, saya mempunyai dua cara untuk membuatnya. Pertama menggunakan HTML dan CSS Internal. Dan yang kedua menggunakan HTML dan CSS Inline. Lebih mudah mana? Tergantung kalian, tapi untuk pemula mungkin lebih mudah cara kedua. Namun jika kalian menggunakan cara kedua, kalian akan memasukkan kode yang lebih banyak ke postingan dari pada cara pertama, karena kita mengikutkan stylenya ke postingan. Dalam mengedit tampilannya juga lebih mudah dengan cara pertama, karena tinggal mengedit CSSnya dari template. Yah, terserah kalian mau menggunakan yang mana. Saya akan berbagi kedua caranya. Nah, langsung saja. Berikut ini adalah caranya :

1. Menggunakan HTML dan CSS Internal.

Pertama, kita akan memasang CSSnya pada template kita. Caranya sebagai berikut :

• Pertama, tentu saja buka dasboard blog kalian.
• Pilih menu Template.
• Pilih Edit HTML.
• Cari kode ]]></b:skin>.
• Masukkan kode di bawah ini tepat di atas kode ]]></b:skin>.

div.yondarkness-box {background-color: #eeeeee; border: 1px solid #e5e5e5; float: left; font-family: Arial, Tahoma, 'Lucida Sans Unicode', 'Lucida Grande'; font-size: 12px; line-height: 12px; margin: 0px 0px 20px; outline: 0px; overflow: hidden; padding: 20px; vertical-align: baseline; width: 578px;}
div.yondarkness-title {background-color: #0000ff; background-position: 7px 6px; background-repeat: no-repeat no-repeat; border: 1px; color: #ffffff; float: left; font-family: Tahoma; font-size: 11px; font-weight: bold; margin: 0px 0px 3px; outline: 0px; padding: 10px 0px 10px 35px; vertical-align: baseline; width: 543px;}
div.yondarkness-item {background-color: #ffffff; background-position: 7px 6px; background-repeat: no-repeat no-repeat; border: 0px; float: left; font-family: Tahoma; font-size: 11px; font-weight: bold; margin: 0px 0px 2px; outline: 0px; padding: 10px 0px 10px 35px; vertical-align: baseline; width: 543px;}
.yondarkness-link {color: #0000ff}

• Kemudian tinggal disimpan. 

Keterangan :

Kode berwarna ORANGE adalah kode warna border, kalian bisa menggantinya sesuai yang kalian inginkan.

Kode berwarna KUNING adalah kode ukuran garis border, kalian bisa menggantinya sesuai yang kalian inginkan.

Kode berwarna HIJAU adalah kode jenis garis border, kalian bisa menggantinya sesuai yang kalian inginkan.

Kode berwarna CYAN adalah kode warna garis border, kalian bisa menggantinya sesuai yang kalian inginkan.

Kode berwarna BIRU adalah kode jenis font, kalian bisa menggantinya sesuai yang kalian inginkan.

Kode berwarna UNGU adalah kode ukuran teks, kalian bisa menggantinya sesuai yang kalian inginkan.

Kode berwarna PINK adalah kode lebar , kalian bisa menggantinya dengan sesuai yang kalian inginkan. Saya sarankan jangan menggunakan Px, tapi persen (%).

Kode berwarna MERAH adalah kode warna teks atau link, kalian bisa menggantinya sesuai yang kalian inginkan.

Kode yang berefek TEBAL  adalah kode efek teks, kalian bisa menggantinya sesuai yang kalian inginkan.

Untuk cara memasangnya, kalian bisa ikuti cara berikut :

• Masih dasboard blog kalian
• Buatlah sebuah postingan seperti biasa.
• Saat dihalaman untuk membuat postingan atau laman disana ada dua pilihan, Compose dan HTML. Kalian klik yang HTML
• Masukkan kode di bawah ini di tempat kalian inginkan (Biasanya link download terletak di paling bawah atau tengah) :

<div class="yondarkness-box">
<div class="yondarkness-title">
[YONDARKNESS] Download Lorem Ipsum 1 Subtitle Indonesia [480p].mkv</div>
<div class="yondarkness-item">
<span class="yondarkness-link">Sharebeast&nbsp;</span><span class="yondarkness-link">|&nbsp;</span><span class="yondarkness-link">Tusfiles</span><span class="yondarkness-link">&nbsp;</span><span class="yondarkness-link">|&nbsp;Solidfiles&nbsp;|&nbsp;</span><span class="yondarkness-link">Mirrorcreator&nbsp;| Acefile | Aisfile</span></div>
<div class="yondarkness-title">
[YONDARKNESS] Download Lorem Ipsum 1 Subtitle Indonesia [720p].mkv</div>
<div class="yondarkness-item">
<span class="yondarkness-link"><span class="yondarkness-link">Sharebeast</span> </span><span class="yondarkness-link">|&nbsp;</span><span class="yondarkness-link">Tusfiles</span><span class="yondarkness-link">&nbsp;</span><span class="yondarkness-link">|&nbsp;Solidfiles&nbsp;|&nbsp;</span><span class="yondarkness-link">Mirrorcreator</span><span class="yondarkness-link">&nbsp;| Acefile | </span><span class="yondarkness-link">Aisfile</span></div>
<div class="yondarkness-title">
[YONDARKNESS] Download Lorem Ipsum 1 Subtitle Indonesia [720p][10bit].mkv</div>
<div class="yondarkness-item">
<span class="yondarkness-link">Tusfiles</span><span class="yondarkness-link">&nbsp;</span><span class="yondarkness-link">|&nbsp;Solidfiles</span><span class="yondarkness-link">&nbsp;</span><span class="yondarkness-link">|&nbsp;</span><span class="yondarkness-link">Mirrorcreator</span></div>
</div>

• Kembalikan ke Compose. Kemudian tinggal kalian edit judul dan memberi link seperti teks biasa.

2. Menggunakan HTML dan CSS Inline.

Untuk cara yang kedua, kalian bisa ikuti cara berikut :

• Masih dasboard blog kalian
• Buatlah sebuah postingan seperti biasa.
• Saat dihalaman untuk membuat postingan atau laman disana ada dua pilihan, Compose dan HTML. Kalian klik yang HTML
• Masukkan kode di bawah ini di tempat kalian inginkan (Biasanya link download terletak di paling bawah atau tengah) :

<div class="yondarkness-box" style="background-color: whitesmoke; border: 1px solid #e5e5e5; float: left; font-family: Arial, Tahoma, 'Lucida Sans Unicode', 'Lucida Grande'; font-size: 12px; line-height: 12px; margin: 0px 0px 20px; outline: 0px; overflow: hidden; padding: 20px; vertical-align: baseline; width: 578px;">
<div class="yondarkness-title" style="background-color: blue; background-position: 7px 6px; background-repeat: no-repeat no-repeat; border: 1px; color: white; float: left; font-family: Tahoma; font-size: 11px; font-weight: bold; margin: 0px 0px 3px; outline: 0px; padding: 10px 0px 10px 35px; vertical-align: baseline; width: 543px;">
[YONDARKNESS] Download Lorem Ipsum 1 Subtitle Indonesia [480p].mkv</div>
<div class="yondarkness-item" style="background-color: white; background-position: 7px 6px; background-repeat: no-repeat no-repeat; border: 0px; float: left; font-family: Tahoma; font-size: 11px; font-weight: bold; margin: 0px 0px 2px; outline: 0px; padding: 10px 0px 10px 35px; vertical-align: baseline; width: 543px;">
<span style="color: blue;">Sharebeast&nbsp;</span><span style="color: blue;">|&nbsp;</span><span style="color: blue;">Tusfiles</span><span style="color: blue;">&nbsp;</span><span style="color: blue;">|&nbsp;Solidfiles&nbsp;|&nbsp;</span><span style="color: blue;">Mirrorcreator&nbsp;| Acefile | Aisfile</span></div>
<div class="yondarkness-title" style="background-color: blue; background-position: 7px 6px; background-repeat: no-repeat no-repeat; border: 1px; color: white; float: left; font-family: Tahoma; font-size: 11px; font-weight: bold; margin: 0px 0px 3px; outline: 0px; padding: 10px 0px 10px 35px; vertical-align: baseline; width: 543px;">
[YONDARKNESS] Download Lorem Ipsum 1 Subtitle Indonesia [720p].mkv</div>
<div class="yondarkness-item" style="background-color: white; background-position: 7px 6px; background-repeat: no-repeat no-repeat; border: 0px; float: left; font-family: Tahoma; font-size: 11px; font-weight: bold; margin: 0px 0px 2px; outline: 0px; padding: 10px 0px 10px 35px; vertical-align: baseline; width: 543px;">
<span style="color: blue;"><span style="color: blue;">Sharebeast</span> </span><span style="color: blue;">|&nbsp;</span><span style="color: blue;">Tusfiles</span><span style="color: blue;">&nbsp;</span><span style="color: blue;">|&nbsp;Solidfiles&nbsp;|&nbsp;</span><span style="color: blue;">Mirrorcreator</span><span style="color: blue;">&nbsp;| Acefile | </span><span style="color: blue;">Aisfile</span></div>
<div class="yondarkness-title" style="background-color: blue; background-position: 7px 6px; background-repeat: no-repeat no-repeat; border: 1px; color: white; float: left; font-family: Tahoma; font-size: 11px; font-weight: bold; margin: 0px 0px 3px; outline: 0px; padding: 10px 0px 10px 35px; vertical-align: baseline; width: 543px;">
[YONDARKNESS] Download Lorem Ipsum 1 Subtitle Indonesia [720p][10bit].mkv</div>
<div class="yondarkness-item" style="background-color: white; background-position: 7px 6px; background-repeat: no-repeat no-repeat; border: 0px; float: left; font-family: Tahoma; font-size: 11px; font-weight: bold; margin: 0px 0px 2px; outline: 0px; padding: 10px 0px 10px 35px; vertical-align: baseline; width: 543px;">
<span style="color: blue;">Tusfiles</span><span style="color: blue;">&nbsp;</span><span style="color: blue;">|&nbsp;Solidfiles</span><span style="color: blue;">&nbsp;</span><span style="color: blue;">|&nbsp;</span><span style="color: blue;">Mirrorcreator</span></div>
</div>

• Kembalikan ke Compose. Kemudian tinggal kalian edit judul dan memberi link seperti teks biasa.

Untuk keterangannya, sama seperti cara pertama karena kode stylenya tidak berbeda.

Bagaimana? Sudah jadikan? Sekarang link download kalian, terutama yang share link download anime akan semakin bagus, keren, dan rapi. Sekian artikel dari saya. Semoga bermanfaat bagi kita semua. Jangan lupa kunjungi terus blog ini, klik join this site untuk mendapat informasi update, tinggalkan komentar, dan klik tombol like di bawah ini.

Share :

Facebook Google+ Twitter