Tab Slick dengan Java Script jQuery - Hallo sahabat Leyssycool, Apa Kabarnya ? Semoga Selalu dalam Keadaan sehat, Untuk itu A-medika Alkes Batang ingin menawarkan sebuah produk kesehatan yang bagus yakni Tab Slick dengan Java Script jQuery, bila sobat amedika ingin membeli, bisa hubungi No HP / Wa 085706666683 kami akan senantiasa membantu segala keperluan sobat. mudah-mudahan Produk Kesehatan Blogger, dapat membantu anda dalam solusi kesehatan. selamat membaca dan belanja terimakasih.

Judul : Tab Slick dengan Java Script jQuery
link : Tab Slick dengan Java Script jQuery

Tab Slick dengan Java Script jQuery

Setelah kemarin membuat artikel tentang bagaimana membuat tab view, kali ini saya akan membuat tab view dengan manggunakan java script JQuery yang biasa di sebut dengan 'Tab Slick' dengan menggunakan Tab slick blogger sobat akan menjadi lebih indah dan dapat mengundang pengunjung blog semakin betah berlama-lama menatap blog anda.

Tanpa banyak basa-basi saya akan memberikan langkah-langkahnya sebagai berikut :

1. Pertama kali tentu saja sobat harus login ke Blogger
2. Setelah masuk ke Blogger, sobat langsung saja menuju ke Tab Rancangan -> Edit HTML
3. Jangan lupa centang di bagian Expand Template Widget
4. Silahkan sobat kopi kode dibawah ini dan letakkan diatas kode ini ]]></b:skin>
   

   /* -------------- * SLICK TAB * ------------------- */
   #slick_area {border:0px solid #cccccc;background-color:#f4f4f4;padding:0px;margin:10px 0;line-height:14px;width:337px;}
   
   #slick_area a{color:#0aaaf5;text-decoration:none;}
   .slick_area a:hover{color:#0aaaf5;}
   ul.slick {margin:5px 5px 8px 0;padding:0px;}
   ul.slick li {list-style:none;display:inline;background-color:#cccccc;padding:6px 14px;text-decoration:none;font-size:10px;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #cccccc;}
   ul.slick li:hover {color:#0aaaf5;}
   ul.slick li.active {background-color:#f4f4f4;border:1px solid #cccccc;}
   .content-slick {background-color:#f4f4f4;border:1px solid #cccccc;color:#121212;min-height:40px;padding:5px 5px 5px;text-align:justify;}
   .content-slick ul {margin:2px;padding:0;}
   .content-slick ul li {list-style:none;border-bottom:0px solid #585858;padding:4px;}
   .content-slick ul li:last-child {border-bottom:none;}
   .content-slick ul li:hover, .content-slick ul li a:hover {display:block;background-color:#cccccc;}
   .content-slick ul li a {text-decoration:none;color:#FFF;display:block;}
   
   #komentar, #terkait { display:none; }
   

5. Setelah langkah diatas sudah dilakukan, kopi kode di bawah ini dan letakkan diatas </head>
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   <script type='text/javascript'>
   $(document).ready(function(){
   $(&#39;#tab2, #tab3, #tab4&#39;).hide();
   $(&quot;ul.slick li&quot;).click(function () {
   $(&quot;.active&quot;).removeClass(&quot;active&quot;);
   $(this).addClass(&quot;active&quot;);
   $(&quot;.content-slick&quot;).slideUp();
   var content_show = $(this).attr(&quot;title&quot;);
   $(&quot;#&quot;+content_show).slideDown();
   });
   });
   </script>
   

   Jangan lupa Save pekerjaan sobat
6. Berikutnya sobat buka tab Edit laman yang masih di bagian Pengaturan, terus sobat klik Tambah Gadget pilih HTML/JavaScript, dan Letakkan kode dibawah ini kedalam kotak Gadget
   

   <div id="slick_area">
   
   <ul class="slick">
   <li title="tab1" class="slick active">Tab1</li>
   <li title="tab2" class="slick">Tab2</li>
   <li title="tab3" class="slick">Tab3</li>
   <li title="tab4" class="slick">Tab4</li>
   </ul>
   
   <div id="tab1" class="content-slick">
   Isi tulisan di Tab1
   </div>
   
   <div id="tab2" class="content-slick">
   Isi tulisan di Tab2
   </div>
   
   <div id="tab3" class="content-slick">
   Isi tulisan di Tab3
   </div>
   
   <div id="tab4" class="content-slick">
   Isi tulisan di Tab4
   </div>
   
   </div>
   

7. Dan Lihaat hasilnya

Semoga tutorial ini dapat membantu sobat supaya blognya tambah keren, jika masih mengalami kesulitan dalam penerapannya silahkan tinggalkan komentar, saya siap membantu

CARA MUDAH BELI Tab Slick dengan Java Script jQuery

Demikian Sedikit Info Tentang Tab Slick dengan Java Script jQuery , mudah-mudahan bisa memberi informasi untuk anda semua. baiklah, sampai jumpa dalam postingan alkes lainnya, bila anda tertarik untuk membeli alat kesehatan jangan lupa untuk menghubungi saya di nomor 085706666683.

Anda sekarang membaca artikel Tab Slick dengan Java Script jQuery dengan alamat link https://leyssycool.blogspot.com/2011/10/tab-slick-dengan-java-script-jquery.html

SHARE THIS