Membuat Widget Tab View Menu Cara kedua

Membuat Widget Tab View Menu Cara kedua - Diartikel sebelumnya saya pernah menjelaskan Cara Membuat Tab View Menu dan yang akan saya bahas saat ini adalah Membuat Widget Tab View Menu Cara kedua.

Kenapa saya sebut cara kedua? karena cara ini mungkin hanya membutuhkan sedikit langkah saja,dan tentunya anda akan lebih mudah mempraktekannya !

Langsung masuk ke cara pemasangannya

1. Sebelumnya silahkan anda copy kode dibawah ini terlebih dahulu



<div><style type="text/css">
    div.TabView div.Tabs
    {height: 30px;overflow: hidden}
    div.TabView div.Tabs a {float:left; display:block; width: 77px; /* Lebar Menu Utama Atas */
    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
    padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
    border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
    font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #fff ; /* Warna background Menu Utama Atas */ }
    div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; }
    div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
    div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    function tabview_aux(TabViewId, id)
    {
      var TabView = document.getElementById(TabViewId);
      // ----- Tabs -----
      var Tabs = TabView.firstChild;
      while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
      var Tab = Tabs.firstChild;
      var i   = 0;
      do
      {
        if (Tab.tagName == "A")
        {
          i++;
          Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
          Tab.className = (i == id) ? "Active" : "";
          Tab.blur();
        }
      }
      while (Tab = Tab.nextSibling);
      // ----- Pages -----
      var Pages = TabView.firstChild;
      while (Pages.className != 'Pages') Pages = Pages.nextSibling;
      var Page = Pages.firstChild;
      var i    = 0;
      do
      {
        if (Page.className == 'Page')
        {
          i++;
          if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
          Page.style.overflow = "auto";
          Page.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (Page = Page.nextSibling);
    }
    // ----- Functions
    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
    function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
    //]]>
    </script>
    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 240px;" class="Tabs">
    <a>Terbaru</a>
    <a>Komentar</a>
    <a>Visitors</a>
    </div>
    <div style="width:300px; height:300px; " class="Pages">
    <div class="Page">
    <div class="Pad">
   
<script src="http://antigaptek.googlecode.com/files/recentpost.js"></script>
<script>var numposts = 20; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://www.blogdhika.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
<script style="text/javascript" src="http://antigaptek.googlecode.com/files/recentcomment.js">
</script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script> <script src="http://www.blogdhika.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
       </div>
    </div>

    <div class="Page">
    <div class="Pad">
   <a href="http://s08.flagcounter.com/more/6EWk"><img src="http://s08.flagcounter.com/count/6EWk/bg=FFFFFF/txt=000000/border=CCCCCC/columns=2/maxflags=12/viewers=0/labels=1/pageviews=1/" alt="free counters" border="0" /></a><br /><a href="http://www.flagcounter.com/"></a>

<!-- Histats.com  START  (standard)-->
<script type="text/javascript">document.write(unescape("%3Cscript src=%27http://s10.histats.com/js15.js%27 type=%27text/javascript%27%3E%3C/script%3E"));</script>
<a href="http://www.histats.com" target="_blank" title="free tracking" ><script  type="text/javascript" >
try {Histats.start(1,1625442,4,430,112,75,"00011011");
Histats.track_hits();} catch(err){};
</script></a>
<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?1625442&amp;101" alt="free tracking" border="0" /></a></noscript>
<!-- Histats.com  END  -->

<a href="http://www.alexa.com/siteinfo/www.blogdhika.com"><script type='text/javascript' language='javascript' src='http://xslt.alexa.com/site_stats/js/s/a?url=www.blogdhika.com'></script></a>
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script><div></div></div>


2. Setelah kodenya selesai di Copy lalu Masuk ke Rancangan - Elemen Laman
3. Pilih Tambah Gadget - HTML/JavaScript dan pastekan kode tadi diatasnya

Keterangan :
Kode yang berwarna hijau adalah judul menu atas
Yang berwarna Merah adalah Link yang ingin anda tampilkan
Anda juga bisa merubah ukuran dan warnanya untuk menyesuaikan ke Template anda

Bagaimana,mudah bukan untuk mempraktekannya?
Semoga Artikel Membuat Widget Tab View Menu Cara kedua ini dapat Bermanfaat
Terima Kasih

17 komentar:

kuncirahasia mengatakan...

coba dulu teman

Dhika mengatakan...

OK silahkan di coba mas

Singo's Blog mengatakan...

manteb gan...
ini kunjungan balik saya loh....!!!!

Dhika mengatakan...

@Singo's Blog:
Ok terima kasih sudah berkunjung

Oemar mengatakan...

makasih atas tutorialnya..
saya coba di blogsaya. simple dan mudah.

sangat bermanfaat.
salam kenal, salam blogger, salam sahabat.
sukses selalu :D

Dhika mengatakan...

sama-sama mas
terima kasih juga sudah berkunjung ke blog saya
tetap semangat

zidiyuto mengatakan...

makasih tutorialnya mas...
saya langsung cooba dui blog saya nih

Dhika mengatakan...

@zidiyuto
ok sama-sama mas
terima kasih dah berkunjung

angga-fian mengatakan...

Sangat membantu sob...
newbie seperti saya ini......
Thanks krna sudah membantu......

Dhika mengatakan...

ok sama2 mas

Burhan Viehan mengatakan...

Visit Me.....

smkn2tbalai mengatakan...

Tx infonya gan
Mampir jg ya

bLOG iNFORMASI mengatakan...

TRIMS SOB INFONYA

penyakit kolesterol mengatakan...

makasih banyak ya gan buat infonya,,,,

Gejala Epilepsi mengatakan...

Sangat berguna sekali nih ilmunya makasih mo berbagi...

mariyanto widodo mengatakan...

izin coba dulu gan.

Ali hussain mengatakan...

It will be very constructive in regular part of life. I hooked up with your precious work here it’s driving me crazy. I am hoping the same best work from you in the future as well.
heathrow to w2

Posting Komentar

 
Copyright © 2011 Andhika Hutomo Blogdhika.com. Powered by Blogger™