11 September 2016

Cara Membuat Download Box Seperti Meongs

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.

Cara Membuat Download Box Seperti Meongs, Cara Membuat Download Box, Cara Membuat Download Box Seperti Fansub, Cara Membuat Download Box Fansub, Cara Membuat Download Link Fansub, Cara Membuat Download Link Seperti Meongs, Cara Membuat Fansub, Tutorial Membuat Download Box Seperti Meongs, Tutorial Membuat Download Box Seperti Fansub, Aka321, Tutorial Fanubs, Download Box Fansub

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.


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

Artikel Terkait

10 komentar

Gan ini didalem box bisa ditempelin download box lagi gk ya? box in box gitu... sy bikin malah tabnya jadi gk berfungsi

Bisa kok gan, agan ikutin aja tutorial download box saya. tapi, agan simpan download boxnya sebelum kode <!--- Daftar Episode Start --->

gan pagernya gak di bikin titik atau apa kek biar aman

biar aman seperti apa gan?, mungkin bisa kirim contohnya di chat FP :)

tu kan kalau gitu gue takut tabnya berubah jadi link, btw tu tabelnya gak bisa di panjangin 1 km gk, jieh panjang bener, ya maksudnya kalau gue gunain itu sih mau bikin tempat lirik, jadi perlu yang panjang, moo... mumet au, py y intinya tu panjangnya bisa auto, trus kalau berubah jadi link pa gk pa" y

Tabnya ga akan berubah jadi link kalau agan masangnya bener kok, terus kalau panjang tabelnya bakalan otomatis memanjang sesuai dengan isinya. Kalau isinya sedikit ya panjangnya akan menyesuaikan.

tapi kemaren kok berantakan ya, pas buka tab k 3 semua isi dari tab 1 & 2 malah ngikut

Coba cek pemasangannya mungkin ada yang salah

kak kalok wordpress gimana masang Jquery sama Java script nya.

bukan buat wordpress ya ? kalo iya cara pasangnya gimana?

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