Tutorial Membuat Custom Tab Lirik Lagu Dengan Jquery

Tutorial Membuat Custom Tab Lirik Lagu Dengan Jquery

Tutorial Membuat Custom Tab Lirik Lagu Dengan Jquery - Mempunyai sebuah website yang mempunyai multi fungsi memang sangat di idam-idamkan sebagian orang. Apalagi ketika sobat sedang ingin membuat sebuah Project Website lirik lagu dengan terjemahanNya. Sekarang ini saya ingin membagikan sebuah tutorial simple hasil custom tab dengan Jquery, dimana tab-tab ini akan menampung lirik-lirik lagu tersebut.



Keuntungannya apa aja ketika Sobat memakai custom tab ini? Sudah jelas keuntungan yang sobat dapat yaitu banyak, halaman website terlihat seperti multi-fungsi dan lebih rapih karna lirik2 tersebut di simpan di dalam sebuah Array yang akan keluar ketika pemicuNya di tekan, lalu apa itu pemicuNya? pemicu jelas tombol TAB'nya.

Jangan lupa untuk membaca Artikel Terkait Cara Embed Audio & Video di Blog Dengan Plyr

Tutorial Membuat Custom Tab Lirik Lagu Dengan Jquery

    • Pertama masukkan Jquery berikut sebelum tag </head>
    • <script defer="defer" src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script defer="defer" src='https://cdn.rawgit.com/codepelajar/codepelajar/99d1e6d3/Tab.js'></script>
    • Jika sudah masukkan CSS yang sudah saya buat ini sebelum tag </head>
    • <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/codepelajar/codepelajar/1784d3d4/TAB.css">
      Atau jika Sobat ingin langsung memasukkan'nya kedalam tag <style>
      @import url("https://cdn.rawgit.com/codepelajar/codepelajar/1784d3d4/TAB.css");
    • Jika sudah Save Template/Tema Sobat.
    • Sekali lagi tutorial ini umum, Sobat bisa mengkreasikan nya sesuai platform yang sobat pakai, di tutorial ini saya menjelaskan lebih mengarah ke platform blogger dan wordpress. Jika sobat menggunakan platform yang berbeda & merasa kesulitan silahkan tinggalkanlah komentar, secepatnya akan kami jawab.
    • Lalu buatlah sebuah post baru dengan menggunakan mode HTML > Copy dan terapkan skrip di bawah ini ke dalam Mode HTML
    • <div class="xa-default" role="tabpanel" data-example-id="togglable-tabs">
         <ul id="myTab-1" class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#CP-TAB-1" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">TAB1</a></li>
            <li role="presentation" class=" "><a href="#CP-TAB-2" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">TAB2</a></li>
            <li role="presentation" class=" "><a href="#CP-TAB-3" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">TAB3</a></li>
            <li role="presentation" class=" "><a href="#CP-TAB-4" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">TAB4</a></li>
         </ul>
         <div id="myTabContent-1" class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="CP-TAB-1" aria-labelledby="home-tab">
               <p>CONTENT 1</p>
            </div>
            <div role="tabpanel" class="tab-pane fade in" id="CP-TAB-2" aria-labelledby="home-tab">
               <p>CONTENT 2</p>
            </div>
            <div role="tabpanel" class="tab-pane fade in  " id="CP-TAB-3" aria-labelledby="home-tab">
               <p>CONTENT 3</p>
            </div>
            <div role="tabpanel" class="tab-pane fade in  " id="CP-TAB-4" aria-labelledby="home-tab">
               <p>CONTENT 4</p>
            </div></div></div>
    • Oke sampai sini jika ada kesulitan tinggalkanlah jejak kalian di komentar untuk bertanya.

itulah Tutorial Membuat Custom Tab Lirik Lagu Dengan Jquery selamat mencoba ya, dan jangan lupa untuk share ya.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel