Jumat, Agustus 12, 2011

Membuat menu tab view


Hy teman semua ,,
Ni saya mau bagi gabi scrip tantang membuat sebuah menu view
pasti kita semua tahu kan apa itu menu view

saya sudah yakin pasti kita semua sudah tahu apa itu menu view
karena di blog / di web - web yang bagus bagus itu selalu ada yang namanya menu view,,
caranya mudah ko,,
cuma copi paste saja mudah kan
ni di bawah adalah langkah langkah membuat menu view




 - login ter lebih dahulu
  - lalu klik rancangan
  - dan Langsung saja kita masuk ke kolom Edit HTML.
  - Cari kode berikut ]]></b:skin>
  - Letakkan kode di bawah ini di atas ]]></b:skin>

          /* Menu Tab View
          ----------------------------------------------- */
          div.TabView div.Tabs {
          padding-top: 0px;
          height: 24px;
          overflow: hidden;
          }

          /* Menu Utama */
          div.TabView div.Tabs a {
          float: left;
          display: block;
          width: 94px; /* ukuran lebar menu */
          text-align: center;
          height: 24px; /* ukuran tinggi menu */
          padding-top: 3px;
          margin-right:4px; /* jarak antarmenu */
          vertical-align: middle;
          border: 1px solid #2D8AF6; /* warna border menu */
          border-bottom-width: 0;
          font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
          font-size: 12px; /* besar hurup menu */
          letter-spacing: -1px;
          background-color: #E3E4F9; /* warna latar menu */
          color: #000000; /* warna hurup menu */
          -moz-border-radius-topleft:10px;
          -moz-border-radius-topright:10px;
          -webkit-border-top-left-radius:10px;
          -webkit-border-top-right-radius:10px;
          }

          div.TabView div.Tabs a.Active {
          background-color: #B5A574; /* warna background menu aktif */
          color: #823210;
          }

          div.TabView div.Tabs a:hover {
          background-color: #B5A574; /* warna background menu hover */
          color: #000000;
          font-weight: bold;
          }

          /* Kotak Utama */
          div.TabView div.Pages {
          clear: both;
          border: 1px solid #2D8AF6; /* warna border kotak utama */
          overflow: hidden;
          background:url("http://i817.photobucket.com/albums/zz91/hansem_x/Blog/BG-view.png"); /* background kotak utama */
          }

          div.TabView div.Pages div.Page {
          height: 100%;
          padding: 0px;
          overflow: hidden;
          }

          div.TabView div.Pages div.Page div.Pad {
          padding: 3px 5px;
          font-size: 12px; /* besar hurup kotak utama */
          }

- lalu letakakan kode di bawah ini di atas kode </head>

          <script src='http://mezzaluna08.bravehost.com/tab_view.js' type='text/javascript'/>

- Save perubahan tersebut.
- Selanjutnya langsung aja ke Element Halaman dan tambah Gadget pilih HTML/Java Script
- Lalu Copy Paste kode di bawah ini ke dalam Gadget tersebut

    <form action="tabview.html" method="get">

    <div id="TabView" class="TabView">

    <div style="width: 300px;" class="Tabs">

    <a>Bloging Tips</a>

    <a>Rubik Cube</a>

    <a>Club Cooee</a>

    </div>

    <div style="width: 200px;
    height: 150px;" class="Pages">

    <div class="Page">

    <div class="Pad">

    <span style="font-weight:bold;"><span style="font-style:italic;">Bloging tips</span></span>
    <br />
    1. <a href="http://komud.blogspot.com/2010/04/membuat-button-share-di-setiap.html">Membuat Button Share di setiap postingan</a>
    <br />
    2. <a href="http://komud.blogspot.com/2009/06/cara-pasang-info-cuaca-di-blog.html">Cara pasang info Cuaca di blog</a>
    <br />
    3. <a href="http://komud.blogspot.com/2009/06/membuat-link-warna-warni-rainbow-link.html">Membuat Link warna-warni</a>
    <br />
    4. <a href="http://komud.blogspot.com/2009/06/membuat-read-more-otomatis-blog.html">Membuat Read more otomatis blog</a>
    <br />
    5. <a href="http://komud.blogspot.com/2010/06/mengganti-icon-address-bar-vaf-icon.html">Mengganti ikon address bar</a>
    <br />
    6. <a href="hhttp://komud.blogspot.com/2010/06/membuat-tulisan-judul-blog-berjalan.html">Membuat tulisan judul berjalan pada address bar</a>
    <br />
    7. <a href="http://komud.blogspot.com/2009/06/cara-membuat-tulisan-berkedip-kedip.html">Membuat tulisan berkedip-kedip</a>
    <br />
      

    </div>

    </div>

    <div class="Page">

    <div class="Pad">

    <span style="font-weight:bold;"><span style="font-style:italic;">Aplikasi hebat </span></span>
    <br />
    1. <a href="http://www.filebuzz.com/findsoftware/Aplikasi_Pembobol_Pasword_Wifi/1.html">aplikasi pembobol wifi.</a>
    <br />
    2. <a href="http://www.filebuzz.com/findsoftware/Aplikasi_Mempercepat_Wifi_Untuk_Windows_7/1.html">Aplikasi mempercepat wifi </a>
    <br />
    3. <a href="http://www.glatica.com/aplikasi-penyadap-telpon-sms-ponsel-handphone.html">Aplikasi penyadap hanepone</a>
    <br />
    4. <a href="http://www.glatica.com/aplikasi-pengintai-dan-pelacak-isi-hp-pasangan.html" target="_blank&quot;">Aplikasi pengintai ho pasangan</a>
    <br />
    5. <a href="http://www.ziddu.com/download/9946999/rubik-setup.exe.html" target="_blank&quot;">Games for pc(download)</a>
    <br />
    6. <a href="http://www.filebuzz.com/findsoftware/Driver_Pelacak_Sinyal_Hp/1.html">driver pelacak sinyal</a>
    <br />

    </div>

    </div>

    </div>
    </div>

    </form>

    <script type="text/javascript">

    tabview_initialize('TabView');

    </script>

- lalu pastekan scrip nya
- dan yang terakhik klik simpan


By : fahrulrozi

Tidak ada komentar:

Posting Komentar