Cara Membuat Download Box Seperti Awbatch [Part 3]

Tutorial kali ini ane akan membagikan Cara Membuat Download Box Seperti Awbatch, Download box ini hampir sama dengan download box sebelumnya yaitu Download Box Part 2, yang sebelumnya sudah saya buat, diartikel ini sedikit ada tambahan javascript penambahan attribute target blanknya, jadi tidak perlu lagi ditambahkan satu persatu pada html, gimana? sangat efisien bukan!... wkwkwk...

Tutorial ini sudah saya update versi 2, dengan menambahkan Attribute rel="nofollow" dan target:"_blank".
Download box awbatch ini sebenarnya versi bootstrap namun saya buat menjadi versi html pada umumnya, mungkin agak lebih mudah diedit lagi, kalian bisa lihat contoh jadinya pada tombol berikut.

Demo

Cara Membuat Download Box Seperti Awbatch

1. Buka Blogger > Tema > Edit HTML, simpan CSS berikut ini diatas </style>

/* Download box Awbatch - Arlethdesign
  ==================================== */
#box-download{border:1px solid #2780e3;margin-bottom:20px;background-color:#FFF;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}
#box-download .title-box_download{padding:10px 15px;color:#FFF;background-color:#2780e3}
#box-download .title-box_download h3{font-size:17px;margin:0;line-height:1.1;font-weight:bold;padding:0}
#box-download .title-box_download h3 span{float:right}
#box-download .body-box_download{padding:15px}
#box-download .body-box_download p{margin:0 0 10.5px}
#box-download .body-box_download hr{height:2px;border:none;background-color:#DDD;margin:21px auto}
#box-download .body-box_download p a{color:#2780e3}
#box-download .body-box_download p a:hover{color:#2793e3}



2. Kemudian simpan Javascript berikut ini diatas </body>

<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<script type='text/javascript'>//<![CDATA[
// Target Blank
$(document).ready(function() {$("#box-download .body-box_download p a").attr({rel:"nofollow",target:"_blank"})})
//]]></script>
</b:if>



3. Jika sudah save tema.
4. Kemudian buat post menggunakan HTML berikut dan jangan lupa ganti yang sudah ditandai.

<div id='box-download'>
  <div class='title-box_download'>
    <h3>
      Title Anime Series
      <span><i class="fa fa-download"></i></span>
    </h3>
  </div>
  <center>
    <div class='body-box_download'>
      <p><b>Title Anime 480p</b></p>
      <p><b><a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a></b></p>
      <hr/>
      <p><b>Title Anime 720p</b></p>
      <p><b><a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a> | <a href='LINK DOWNLOAD'>Name Server Host</a></b></p>
    </div>
  </center>
</div>

Ok sekian tutorial Cara Membuat Download Box Seperti Awbatch - Part 3, semoga bermanfaat dan terima kasih.