03 April 2016

Cara Membuat Download Box Seperti Wardhanime

Cara Membuat Download Box Seperti Wardhanime - 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 Wardhanime, Cara Membuat Download Box, Cara Membuat Download Box Fansub, Cara Membuat Download Box Seperti Fansub.

Maka dari itu saya akan berbagi ilmu tentang Cara Membuat Download Box Seperti Wardhanime. Bagaimana tertarik untuk membuatnya? Langsung saja kita ikuti langkah-langkah Cara Membuat Download Box Seperti Wardhanime di bawah ini.

  • Pertama, Buka Blogger > Edit HTML > Salin dan Terapkan kode di bawah ini sebelum  </b:skin> atau </style>

/* CSS Download Box Wardhanime - Aka321 */
.dl-box {background: #f5f5f5;border: 1px solid #e5e5e5;padding: 20px;font-family: tahoma;}
.dl-title {background: #0000ff;color: #ffffff;padding: 10px 30px;margin: 0px 0px 3px;font-size: 12px;font-weight: bold;}
.dl-anime {background: #ffffff;margin-bottom: 2px;padding: 5px 30px;}
.dl-anime a {padding: 0 5px;border-right: 2px solid #0000ff;color: #0033cc;}
.dl-anime a:nth-child(1){padding-left:0;}
.dl-anime a:last-child {border-right: 0px !important;}

  • Jika Sudah, Silahkan Simpan Template.

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

<div class="dl-box">
 <div class="dl-item">
  <h3 class="dl-title">
   Judul Anime [480p]
  </h3>
  <div class="dl-anime">
   <a href="URL/Link Server 1" rel="nofollow" target="_blank">Server 1</a>
   <a href="URL/Link Server 2" rel="nofollow" target="_blank">Server 2</a>
   <a href="URL/Link Server 3" rel="nofollow" target="_blank">Server 3</a>
   <a href="URL/Link Server 4" rel="nofollow" target="_blank">Server 4</a>
  </div>
 </div>
 <div class="dl-item">
  <h3 class="dl-title">
   Judul Anime [720p]
  </h3>
  <div class="dl-anime">
   <a href="URL/Link Server 1" rel="nofollow" target="_blank">Server 1</a>
   <a href="URL/Link Server 2" rel="nofollow" target="_blank">Server 2</a>
   <a href="URL/Link Server 3" rel="nofollow" target="_blank">Server 3</a>
   <a href="URL/Link Server 4" rel="nofollow" target="_blank">Server 4</a>
  </div>
 </div>
</div>

  • Jika sudah, Silahkan kamu ganti kode yang sudah ditandai sesuai dengan keinginanmu.


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

Artikel Terkait

12 komentar

siip bos artikelnya.

thanks tutor nya min

Kalo mau merubah ukuran lebar yg mana yg harus diganti gan? saya kurang faham masalah css

Lebarnya untuk apa diganti gan? itu udah responsive ko..

kalau emang mau diganti, di css .dl-box tambahin "width: 100%;" (tanpa kutip) ubah angka sesuai keinginan. contoh seperti dibawah.

.dl-box {
background: #f5f5f5;
width: 70%;
border: 1px solid #e5e5e5;
padding: 20px;
font-family: tahoma;
}

Agar bisa disesuaikan sama template blog saya gan.
Makasih banyak gan, sangat membantu

Bisa disesuaikan ternyata sekarang gan, kesalahannya ada di css template saya rupanya haha
makasih pencerahannya

kalau download box kayak mownime gimana min?

masuk daftar antrian ya, ditunggu aja

< div class="dl-item">

tnya saja kegunaan code pemanggil ini apaan,
yg bikin heran di bagian CSS ny ngk ad ?

< div class="dl-item">

itu diumpamakan buat bungkusan/wadah untuk kode:

<h3 class="dl-title">
Judul Anime [480p]
</h3>
<div class="dl-anime">
<a href="URL/Link Server 1" rel="nofollow" target="_blank">Server 1</a>
<a href="URL/Link Server 2" rel="nofollow" target="_blank">Server 2</a>
<a href="URL/Link Server 3" rel="nofollow" target="_blank">Server 3</a>
<a href="URL/Link Server 4" rel="nofollow" target="_blank">Server 4</a>
</div>

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