Cara Membuat Download Box Seperti Meongs

Kijin Tutorial on

Sunday, 11 September 2016

Cara Membuat Download Box Seperti Meongs - 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.

Sebelumnya saya sudah posting tentang Cara Membuat Download Box Seperti Yukisubs. Dan pada kesempatan kali ini saya ingin berbagi ilmu tentang Cara Membuat Cara Membuat Download Box Seperti Meongs. Langsung saja mari ikuti langkah-langkah yang ada di bawah ini.

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

/* Download Box Meongs - Aka321 */
#mgdl321{position: relative;font: normal 12px Arial, Sans-Serif}
#dltb321{list-style:none;height: 30px;margin: 0 !important;padding: 0 !important}
#dltb321 li{list-style:none;margin: 0 0 0 2px;float: left;font-weight: 700}
#dltb321 li a{display: block;padding: 0 6px;line-height: 30px;text-decoration: none;color: #398BCE;background-color: #ccc}
#dltb321 li.active a{background-color: #f3f3f3}
#dlctn321 > div{background-color: #f3f3f3;color: #000;padding: 10px 15px;border-bottom: 4px solid #398BCE}
#dlctn321 a{color: #398dcc;text-decoration: none;outline: none;transition: all 0.25s}
#dlctn321 a:hover{color: #222;text-decoration: none}
#tab2, #tab3{display:none;}

Lalu, Terapkan Kode Jquery dibawah ini sebelum </head> (Jika sudah ada lewati langkah ini).

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>

Setelah itu, Salin dan Terapkan kode di bawah ini sebelum </body>

<script type='text/javascript'>
jQuery(document).ready(function($){$('#dltb321 li:first').addClass('active');$('#dlctn321 > div').hide();$('#dlctn321 > div:first').show();$('#dltb321 a').click(function(){$('#dltb321 li').removeClass('active');$(this).parent().addClass('active');var activeTab=$(this).attr('href');$('#dlctn321 > div:visible').hide();$(activeTab).show();return false;});});
</script>

Jika Sudah, Silahkan Simpan Template.

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

<div id="mgdl321">
<ul id="dltb321">
<li><a href="#tab1">Daftar Episode:</a></li>
<li><a href="#tab2">Streaming</a></li>
<li><a href="#tab3">Batch</a></li>
</ul>
<div id="dlctn321">
<div id="tab1">
<!--- Daftar Episode Start --->
Nama Anime = 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 1 </a> | 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 2 </a> | 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 3 </a> | 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 4 </a><br>
Nama Anime = 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 1 </a> | 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 2 </a> | 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 3 </a> | 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 4 </a><br>
Nama Anime = 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 1 </a> | 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 2 </a> | 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 3 </a> | 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 4 </a><br>
Nama Anime = 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 1 </a> | 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 2 </a> | 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 3 </a> | 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 4 </a><br>
<!--- Daftar Episode End --->
</div>
<div id="tab2">
<ul>
<!--- Streaming Start --->
<li><a href=" Link Tujuan " title=" Nama Anime " > Nama Anime </a></li>
<li><a href=" Link Tujuan " title=" Nama Anime " > Nama Anime </a></li>
<li><a href=" Link Tujuan " title=" Nama Anime " > Nama Anime </a></li>
<li><a href=" Link Tujuan " title=" Nama Anime " > Nama Anime </a></li>
<li><a href=" Link Tujuan " title=" Nama Anime " > Nama Anime </a></li>
<li><a href=" Link Tujuan " title=" Nama Anime " > Nama Anime </a></li>
<!--- Streaming End --->
</ul>
</div>
<div id="tab3">
<!--- Batch Start --->
Batch: 
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 1 </a> |
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 2 </a> |
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 3 </a> |
<a href=" Link Tujuan " target="_blank" rel="nofollow"> Server 4 </a>
<!--- Batch End --->
</div>
</div>
</div>

Jika Sudah, silahkan kamu mengganti kode yang sudah ditandai sesuai keinginanmu.

• Live Preview

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

Labels: Download Box, Tutorial

Thanks for reading Cara Membuat Download Box Seperti Meongs. Please share...!