Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Selasa, 11 Januari 2011

Tab View : Fadding Effect Using Jquery

Kategori :
Tab View
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

    Rancangan

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

    Gadget

  4. lalu pilih yang HTML/Javascript dan masukan kode di bawah ini kedalamnya

    HTML/javascript

    <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

    Simpan

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

13 Komentar untuk Tab View : Fadding Effect Using Jquery

Banyak ilmunya disini, boleh ajari aku doong..?

haduh, jangan ajari donk, saya aja masih dalam tahap belajar

hehehe, makasi sobat atas undangannya. triknya bagus bagus, saya bisa belajar dari sini juga. hehehehe. jangan pernah berhenti untuk memberikan trik trik menarik :)

wach,keren nich ka,tapi blog saya sedang saya bugilin dari segala widget yang menambah bert l0ading....
entar saya coba ach..

Ngga berani pasang nih, blog saya banyak fotonya...takut nambah berat lagi...

keren banget nih tipsnya sob,,,

@all : Thanks ^_^

@sibutiz >> kalau bisa mengoptimasi kodenya dengan benar, tanpa mengurangi widget, kamu bisa mengoptimalkan loading blog.

wah, saya udah betah ama template saya yang sekarang. komen di artikel, follow juga. lalu konfirmasi di cbox. http://www.ch4ndr4.com OK.

keren bro...
jangan lupa untuk selalu mampir ke blog aku ya ?
thank

keren nie tutorial nya . dicoba ah

gan cara bikin navigasi blog gmna ya mohon bantuannya

makasih gan
udh saya cba praktekkan di blog saya yg lain :D
and it's works!