Cara Menciptakan Download Box Ibarat Awbatch [Part 3]

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

Tutorial ini sudah aku update versi 2, dengan menambahkan Attribute rel="nofollow" dan target:"_blank".
Download box awbatch ini sebetulnya versi bootstrap namun aku buat menjadi versi html pada umumnya, mungkin agak lebih gampang diedit lagi, kalian dapat lihat pola kesannya 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 memakai 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, supaya bermanfaat dan terima kasih.

Bagikan Artikel ini