Cara Membuat Download Box Anime Responsive

Rian
Rian
Cara Membuat Download Box Anime Responsive

Halo sobat MalesTea pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Cara Membuat Download Box Anime" fungsi dari download box ini untuk memperbagus tampilan ketik user ingin mendownload sebuah file disitus Anda, seperti game, anime, music, video dan lainnya.

Download box ini akan sama persis seperti template yang saya share waktu lalu bernama Onimaru dan memang saya mengambil dari sana untuk tutoria saat ini.

Bagaimana hasilnya ? mungkin itu yang ingin diketahui oleh kalian bukan ? daripada penasaran coba di cek dulu "Demo" nya.

Demo

Untuk menambahkan ke "Blogger" kalian tinggal ikuti langkah dibawah ini

Cara Membuat Download Box Anime

  1. Buka Blogger 
  2. Klik Tema > Klik "Edit HTML
  3. Tambahkan kode CSS berikut tepat diatas kode </style> atau </b:skin>
  4. /* Box Download */
    .box-download{padding:0 18px 10px}
    .download-head h2{position:relative;border-bottom:1px solid #ececec;padding:8px 0;line-height:20px;margin:0;font-size:15px}
    .download-option{padding:15px;line-height:21px}
    .download-main{padding:5px 0;text-align:left}
    .download-main strong{padding:5px;margin-left:2px;background:#333333;color:#fff;border-radius:3px;width:40px;display:inline-block;font-size:11px;text-align:center}
    .download-main a{font-size:12px;display:inline-block;padding:5px 10px;background:#3367d6;color:#fff;border-radius:3px;margin-left:4px}
    .download-option:hover a{background:#333333}
    .download-option:hover a:hover{background:#3367d6}
  5. Untuk memanggil kode tersebut, kalian buat artikel dengan "Mode HTML" jangan "Compose"
  6. Salin kode dibawah ini dan paste pada "Mode HTML" 
  7. <!-- [Download] -->
    <div class="box-download">	
        <div class="download-content">		
            <div class="download-head"><h2>Download Anime Episode 00 Subtitle Indonesia [h264]</h2></div>   
          <div class='download-option'>
            <div class="download-main">            
                <strong>720P</strong>      
              	<strong>00MB</strong>  
                <a href="#" rel="nofollow" target="_blank">Drive </a>            
                <a href="#" rel="nofollow" target="_blank">Uptobox</a>            
                <a href="#" rel="nofollow" target="_blank">Mega</a>          
            </div>    
            <div class="download-main">            
                <strong>480P</strong>        
              	<strong>00MB</strong>  
                <a href="#" rel="nofollow" target="_blank">Drive </a>            
                <a href="#" rel="nofollow" target="_blank">Uptobox</a>            
                <a href="#" rel="nofollow" target="_blank">Mega</a>          
            </div>          
            <div class="download-main">            
                <strong>360P</strong>        
              	<strong>00MB</strong>  
                <a href="#" rel="nofollow" target="_blank">Drive </a>            
                <a href="#" rel="nofollow" target="_blank">Uptobox</a>            
                <a href="#" rel="nofollow" target="_blank">Mega</a>          
            </div>          
            <div class="download-main">            
                <strong>240P</strong>      
              	<strong>00MB</strong>  
                <a href="#" rel="nofollow" target="_blank">Drive </a>            
                <a href="#" rel="nofollow" target="_blank">Uptobox</a>            
                <a href="#" rel="nofollow" target="_blank">Mega</a>          
            </div>	
          </div>
        </div>
    	<!-- [Tambah kode] -->	
        <div class="download-content">		
            <div class="download-head"><h2>Download Anime Episode 00 Subtitle Indonesia [h265]</h2></div>    
          <div class='download-option'>
            <div class="download-main">            
                <strong>720P</strong>
              	<strong>00MB</strong>  
                <a href="#" rel="nofollow" target="_blank">Drive </a>            
                <a href="#" rel="nofollow" target="_blank">Uptobox</a>            
                <a href="#" rel="nofollow" target="_blank">Mega</a>          
            </div>          
            <div class="download-main">            
                <strong>480P</strong>     
              	<strong>00MB</strong>  
                <a href="#" rel="nofollow" target="_blank">Drive </a>            
                <a href="#" rel="nofollow" target="_blank">Uptobox</a>            
                <a href="#" rel="nofollow" target="_blank">Mega</a>          
            </div>	
          </div>
        </div>
    </div>
  8. Simpan Tema 
  9. Selesai

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap 3 Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#

Comments : Cara Membuat Download Box Anime Responsive