Selasa, 07 Februari 2012

Cara Mudah Membuat Menu Tab View


By on 10.39

Cara Mudah Membuat Menu Tab View - Kali ini saya akan berbagi Tutorial Blog yaitu Cara Mudah Membuat Menu Tab View Menu Tab View ini berfungsi untuk menghemat Ruang Sidebar Blog Kamu, dengan Memasang Menu Tab View ini juga memberikan kesan Cantik, biasanya jika kita mencari Cara Membuat Menu Tab View Ini cara membuatnya sangatlah Rumit, tapi kali ini Tidak begitu rumit Caranya Mudah Gampang dan Pasti Bisa Di Pahami, baiklah langsung aja Cara Membuatnya.

1. Login Ke Blog Kamu.
2. Pilih Rancangan Lalu Pilih Edit HTML.
3. Cari Kode </head> lalu Copy Script dibawah ini tepat diatas Kode </head>.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

4. Simpan.
5. Lalu Pilih Rancangan Lagi, Terus Pilih Add Gadget.
6. Pilih HTML JavaScript.
7. Copy Kode Dibawah ini.
<style type="text/css">
.blogtabs {padding: 0px !important;border: 0 solid #bbb;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #ff0000;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}
html .blogtabs h2.active {background: #000;}
.blogtabs .widget-content {border: 1px solid #ff0000;padding: 10px;-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;;background: #fff;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/SimpleTabViewJQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>

8. Perhatikan Gambar Dibawah Ini.


9. Perhatikan Huruf Tab View itu adalah Kode Nomer 7.
10.  Lalu Tab 1,Tab 2,Tab 3 Isi dengan Widget lainnya seperti Recent Post, Random Post, Label dan Lain-lainnya. Maka secara Otomatis 3 Widget yang Berada Di Bawah Kode Tab View akan terseret jadi Tab View. Kaya Gambar Dibawah Ini.


Gimana Sob lebih mudahkan, semoga Sobat dapat memahaminya dan jika ada kesalahan dan tidak paham Coba Tinggalkan Pesan Di Kotak Kometar.

SELAMAT MENCOBA

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

16 komentar:

  1. @All abaut ac milan : Sobat perhatikan Gambar nomer 8, lalu perhatikan Texs yang berwarna Merah "TAB VIEW" itu adalah kode yang yang harus sobat copy dari nomer 7, setelah itu jika sobat meletakan Widget dibawah nya maka secara otomatis Widget itu akan tertarik dan Jadi Menu Tab View,NB Jangan Lupa kasih judul yah pada Widgetnya.

    BalasHapus
  2. bagus artikelnya sob, salam kenal

    BalasHapus
  3. Thanks gan.... Tips'nya T O P bgt.

    Simple, cepat dan efektif.

    BalasHapus
  4. Sobat perhatikan Gambar nomer 8, lalu perhatikan Texs yang berwarna Merah "TAB VIEW" itu adalah kode yang yang harus sobat copy dari nomer 7 ...
    maksudnya gimana sob, saya tidak mengerti dengan penjelasan sbat ..

    BalasHapus
  5. Intinya sobat Copy dulu kode nomor 3, lalu simpan template, setelah itu pilih Add Gadget Copy kode Nomor 7, setelah itu letakan 3 Widget di bawah HTML Java Script hasil Copy nomor 7 tadi, maka secara otomatis 3 Widget itu akan menjadi Menu Tab View

    BalasHapus
  6. ok sob saya mengerti, sedang saya praktekan terimakasih sob atas waktu luang dan infonya ..

    BalasHapus
  7. kq ngg bisa sob, kalau tidak percaya liat di blog saya deh ..
    danangnaxbuaran.blogspot.com
    widgetnya berada di pojok sebelah kiri paling bawah ..

    BalasHapus
  8. makasih sobat.... its work,,, hehehee...

    BalasHapus
  9. Wah, sungguh berterima kasih banyak sob
    ini yang wa cari, klo yg pke kode widget ma uda umum alias bnyk yg tau tpi nih beda haha..

    sekali lagi , makasih yoo.. nice blog^^

    BalasHapus
  10. Sugoiii.. terima kasih banyak bt admin

    BalasHapus
  11. keren..!!
    kunjung`balik blog gue berbagi Ilmu CSS dan HTML !! http://zewdsignet.blogspot.com/

    BalasHapus