Membuat Widget Tab View Menu Cara kedua

Friday, December 6, 2013

Browse » home» cara » kedua » membuat » menu » tab » view » widget » Membuat Widget Tab View Menu Cara kedua

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.blogger.com/feeds/posts/default?orderby=published&alt=json-in-script&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.blogger.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>


<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&101" alt="free tracking" border="0" /></a></noscript>


<a href="http://www.alexa.com/siteinfo/www.blogger.com"><script type=text/javascript language=javascript src=http://xslt.alexa.com/site_stats/js/s/a?url=www.blogger.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

Sambut

Friday, December 6, 2013

Membuat Widget Tab View Menu Cara kedua

No comments:

Post a Comment