Cara Membuat Link Download Seperti Wardhanime (AWsubs) Di Blog

Cara Membuat Link Download Seperti Awsub

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 :

Contoh Link Download Mirip Wardhanime

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.

18 Responses to "Cara Membuat Link Download Seperti Wardhanime (AWsubs) Di Blog"

  1. Replies
    1. Yah, memang begitulah orang indo, ribet sedikit udah males.. Termasuk saya mungkin.. :3

      Delete
  2. keren mas ! udah ane coba daaaaaan work ^^,
    makasih mas (y)

    ReplyDelete
  3. bang caranya bikin blog yang kaya wardhanime itu gimana ya yang bisa taruh ling download anime gitu

    ReplyDelete
    Replies
    1. Tinggal buat seperti blog biasa saja sob..

      Delete
  4. gan di script nya tuh kan ada blablabla..yondarkness...blablabla gitu
    itu ngaruhnya dimana ya? apa boleh diganti? mohon penjelasannya gan

    ReplyDelete
    Replies
    1. Bisa, disitu sudah ada penjelasannya..

      Delete
  5. gan kok wardhanime itu Web nya kalo di klik ga ada bacaan .html :3 gmna cara nya?

    ReplyDelete
  6. Bro gua kan bingung saat buat halaman selanjutnya misalnya di klik Anime list truskan ada tuh sesuatu gimana buatnya
    Hnya ini makashi

    ReplyDelete
    Replies
    1. Tinggal diberi link ke tempat download animenya sob.. Seperti membuat link biasa di postingan..

      Delete
  7. lewat mana lewat tample atau di post baru ....

    ReplyDelete
  8. TERUS GIMANA Bikin Link bisa di klik ..
    kyk dii klik pindah halaman...
    bantu bro

    ReplyDelete
  9. Makasih gan,udh ane coba work kok gan nih link blog saya ada salah satu yang saya kasi Wardhanime.Namanya Charlotte
    http://hfn-harfanime.blogspot.co.id/

    ReplyDelete
  10. min bisa kirim fidio nya gal sulit min .saya baru beljr

    ReplyDelete
  11. Klo mau diletakan posisinya di tengah gimana ya

    ReplyDelete