Tab View : Fadding Effect Using Jquery

Setelah Awesome Tab View Sliding Effect telah saya berikan, kini saya mendapatkan tab view yang berbeda dari yang lain. Namanya adalah Fadding Effect Using Jquery, Menurut saya tab view yang satu ini cukup menarik perhatian pengunjung blog kamu. Coba aja deh lihat demonya di bawah ini.








Alien Black | Okezine | Blue Dark CSS3 | OkeMagazine

Alien Black
Akhirnya jadi juga template untuk di bagikan ke Sahabat blogger Semua, mungkin Template ini simple tapi banyak fitur yang membuat template ini Seo Friendly. karena ke simpleannya loading untuk mengakses blog ini cukup ringan dan cepat. oke kalau mau tau lebih dalam spesifikasi template ini saya akan memperjelaskannya.
Read More >>

Okezine
Akhirnya Jadi juga Template yang saya buat untuk di bagikan secara gratis ke temen-temen yang mau tentunya hehehe. Dengan tampilan yang menggunakan layout magazine style pada elemen post, okezize terlihat elegant. Tidak hanya element yang Magazine Style saja yang di berikan oleh okezine blogger template tapi masih banyak lagi. Apa saja fitur yang di berikan oleh okezine blogger template?
Read More >>

Blue Dark CSS3
Perkembangan CSS3 kian melesat dan mulai di terima hampir di setiap browser, Kemampuan CSS3 untuk mendesain tampilan web/blog bisa di acungin jempol. Kini karena semaraknya tentang CSS3 saya membuat dan memberikan Template versi Template CSS3 dengan konsep gelap terang air template ini berwarna biru tua dengan perpaduan warna biru mudah. Untuk lebih lengkapnya silahkan lihat lebih terperinci tentang template css3 ini.
Read More >>

OkeMagazine
Okemagazine Blogger Template adalah hasil karya ke-2 setelah Alien Black Template yang sudah pernah saya bagikan kepada sobat semua. Sama halnya dengan template hasil karya saya sebelumnya, Okemagazine Blogger Template ini juga akan dibagikan kepada sobat semua yang menginginkannya walaupun g ada yang spesial dan menarik dari template ini, g percaya? liat aja spesifikasinya.
Read More >>

Bagaimana Benar bukan yang saya katakan? Tab View ini memang beda dari yang lain. Tapi kamu jangan terlena dulu dengan effect yang terdapat di trik tips kali ini, karena trik ini dapat membuat blog kamu menjadi lebih berat dari sebelumnya. Klo menurut kamu g ada masalah untuk kecepatan akses, mari lihat cara memasangnya.

1. Login ke blogger
2. Masuk ke Rancangan >> Elemen Halaman
   

3. Setelah itu tambahkan sebuah gadget (untuk tempat pilih dimana saja)
   

4. lalu pilih yang HTML/Javascript dan masukan kode di bawah ini kedalamnya
   
   <script type="text/javascript">
   $(document).ready(function()
   {
   //hide the all div except first one
   $('.msg_body:not(:first)').hide();
   //when the anchor is clicked content gets faded
   $("a.linkclass").click(function()
   {
   $('.msg_body').fadeOut("slow");
   $($(this).attr("href")).fadeIn("slow");
   });
   
   });
   </script>
   <style type="text/css">
   .container {
   width:312px;
   margin-top:20px;
   }
   .msg_body {
   border:1px solid #CCCCCC;
   padding: 5px;
   width: 300px;
   background-color:#F4F4F8;
   text-align:justify;
   position:absolute;
   }
   .linkclass
   {
   font-weight:bold;
   color:#006699;
   }
   
   </style>
   <a href="#home" class="linkclass" >Title/judul tulis disini</a> | <a href="#about_us" class="linkclass" >Title/judul tulis disini</a> | <a href="#service" class="linkclass" >Title/judul tulis disini</a> | <a href="#contact_us" class="linkclass" >Title/judul tulis disini</a>
   
   <div class="container">
   <div id="home" class="msg_body"> <b>Title/judul tulis disini</b><br />Isi dari title, tulis disini.
   <span style="float:right;text-align:right;"><a href="URL-TITLE-TULIS-DISINI">Read More >></a></span>
   </div>
   <div id="about_us" class="msg_body"> <b>Title/judul tulis disini</b><br />Isi dari title, tulis disini
   <span style="float:right;text-align:right;"><a href="URL-TITLE-TULIS-DISINI">Read More >></a></span>
   </div>
   
   <div id="service" class="msg_body"> <b>Title/judul tulis disini</b><br />Isi dari title, tulis disini
   <span style="float:right;text-align:right;"><a href="URL-TITLE-TULIS-DISINI">Read More >></a></span>
   </div>
   <div id="contact_us" class="msg_body"> <b>Title/judul tulis disini</b><br />Isi dari title, tulis disini
   <span style="float:right;text-align:right;"><a href="URL-TITLE-TULIS-DISINI">Read More >></a></span>
   </div></div>
5. Setelah itu simpan dan lihat hasilnya
   

Nah begitulah cara pemasangannya untuk Fadding Effect Using Jquery. Mudah bukan cara pemasangannya? kalau mau ada yang di tanyakan atau kritik dan saran silahkan tinggalkan pesan di bawah ini oke ^_^. Terima kasih dan Happy Blogging.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg