senantiasa belajar: tab view

Showing posts with label tab view. Show all posts

Tuesday, December 20, 2011

Tab view versi senantiasa belajar

kangen ni sama sobat blogger lama idak posting karena ada masalah sama laptop saya maaf juga bila banyak yang belum saya kunjungi dan terimakasih bila soba telah berkunjung disini tak banyak banyak kali ini saya akan berbagi cara membuat tab view versi senaniasa belajar .... tab view ini mirip seperti yang ada di sidebar blog ini lihat gambar

jika soba tertarik simak langkah berikut ini

1. Log In ke blog Anda Edit HTML _

2. Periksa Expand Template Widget dan Pertama Backup template anda buat jagajaga

3. Cari KODE ]]></ b: skin>

Sekarang masukkan kode CSS!

Di bawah kode yang Anda masukkan ke dalam kotak ini Sebelum Atau atas kode ]]></ b: skin>



/* Tabview */
#tabzine{background:#f8f8f8; 
 width:325px; 
 float:right; 
 margin-bottom:3px; 
 padding:0; 
 word-wrap:break-word; 
 overflow:hidden}

ul.tabnav{
 width:325px; 
 background:#000000; 
 padding:8px 0; 
 height:25px; 
 margin:0}

.tabnav li{
 display:inline; 
 list-style:none; 
 float:left; 
 font-size:16px; 
 width:90px; 
 margin-left:10px; 
 font-family:'Oswald',Arial,century gothic,verdana,sans-serif; 
 text-align:center}

.tabnav li a{
 text-decoration:none; 
 font-weight:normal; 
 line-height:30px; 
 padding:0px 0px; 
 color:#fff; 
 text-decoration:none; 
 display:block}

.tabnav li a:active, .tabnav li.ui-tabs-selected a, .tabnav li a:hover{
 text-decoration:none; 
 color:#fff}

.tabdiv{
 background:; 
 padding:5px 10px 10px 10px; 
 margin:0}

.tabdiv li{
 list-style:none; 
 border-bottom:1px solid #eee; 
 display:block; 
 padding:5px 0; 
 text-decoration:none}

.tabdiv li a{
 color:#030b86}

.ui-tabs-hide{
 display:none}

.banner1, .banner2{
 width:125px !important; 
 height:125px !important; 
 float:left; 
 display:inline; 
 background:#eee; 
 padding:10px; 
 margin:10px 0 0 0}

.banner2{
 float:right}

sebenarnya yang Baner1 dan baner 2 buat kode baner buat iklan kalau ga mau hapus aja

selanjutnya
cari CODE : <div id='sidebar-wrapper'>
lengkapnya seperti di bawah ini

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='HTML11' locked='false' title='' type='HTML'/>
<b:widget id='HTML3' locked='false' title='Follow By Email' type='HTML'>
</b:section>

di bawah kode </b:section> anda isi dengan kode HTML di bawah ini

HTML CODE :

<div class='tabview' id='tabzine'>
         <ul class='tabnav'>
           <li class='rec'><a href='#popular'>Popular</a></li>
           <li class='pop'><a href='#recent'>Recent</a></li>
           <li class='fea'><a href='#archives'>Chat</a></li>
         </ul>

         <b:section class='tabdiv' id='popular' preferred='yes'/>

         <b:section class='tabdiv' id='recent' preferred='yes'/>

         <b:section class='tabdiv' id='archives' preferred='yes'/>
       </div>

       <div class='clear'>&#160;</div>

Lihat seperi gambar di bawah

yang terakhir ini adalah kode JAVA script yang akan membuat tampilan Tabview anda Lebih keren dan berjalan lembut saat membuka tabnya copi kode biru ini di atas kode </body>

<script src='http://sitemaphendrytha.googlecode.com/files/hendrythacodejquery-1.2.js' type='text/javascript'/>

seperti ini

tabview sobat sudah selesai sobat save lalu lihat hasilnya

Sunday, December 4, 2011

how to add a nice tabview

tab view is useful for saving space on a regular basis your sidebar and look presentable

1. Log In to your blog's Edit HTML _

2. Check Expand Widget Templates and First Backup your template

3. Find CODE ]]></ b: skin>

Now enter the CSS code!

Under the code you put in this box Before Or Above code ]]></ b: skin>

CSS CODE :


/* Tabview */
#tabzine{background:#f8f8f8; 
 width:325px; 
 float:right; 
 margin-bottom:3px; 
 padding:0; 
 word-wrap:break-word; 
 overflow:hidden}

ul.tabnav{
 width:325px; 
 background:#000000; 
 padding:8px 0; 
 height:25px; 
 margin:0}

.tabnav li{
 display:inline; 
 list-style:none; 
 float:left; 
 font-size:16px; 
 width:90px; 
 margin-left:10px; 
 font-family:'Oswald',Arial,century gothic,verdana,sans-serif; 
 text-align:center}

.tabnav li a{
 text-decoration:none; 
 font-weight:normal; 
 line-height:30px; 
 padding:0px 0px; 
 color:#fff; 
 text-decoration:none; 
 display:block}

.tabnav li a:active, .tabnav li.ui-tabs-selected a, .tabnav li a:hover{
 text-decoration:none; 
 color:#fff}

.tabdiv{
 background:; 
 padding:5px 10px 10px 10px; 
 margin:0}

.tabdiv li{
 list-style:none; 
 border-bottom:1px solid #eee; 
 display:block; 
 padding:5px 0; 
 text-decoration:none}

.tabdiv li a{
 color:#030b86}

.ui-tabs-hide{
 display:none}

.banner1, .banner2{
 width:125px !important; 
 height:125px !important; 
 float:left; 
 display:inline; 
 background:#eee; 
 padding:10px; 
 margin:10px 0 0 0}

.banner2{
 float:right}

Next steep:

find CODE : <div id='sidebar-wrapper'>

details see the code below:

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label1' locked='false' title='Label' type='Label'/>

<b:widget id='HTML11' locked='false' title='' type='HTML'/>

<b:widget id='HTML3' locked='false' title='Follow By Email' type='HTML'>

</b:section>

Under the HTML code you put in this box Before Or Above code </b:section>

HTML CODE :

<div class='tabview' id='tabzine'>
         <ul class='tabnav'>
           <li class='rec'><a href='#popular'>Popular</a></li>
           <li class='pop'><a href='#recent'>Recent</a></li>
           <li class='fea'><a href='#archives'>Chat</a></li>
         </ul>

         <b:section class='tabdiv' id='popular' preferred='yes'/>

         <b:section class='tabdiv' id='recent' preferred='yes'/>

         <b:section class='tabdiv' id='archives' preferred='yes'/>
       </div>

       <div class='clear'>&#160;</div>

as shown in the picture below

The next step

Find CODE </body>

Copy code java script below before code </ body>

JAVASCRIPT CODE:

<script src='http://sitemaphendrytha.googlecode.com/files/hendrythacodejquery-1.2.js' type='text/javascript'/>

if successful will look like the picture below

Wednesday, July 27, 2011

cara membuat tab view sederhana

berbagi ilmu

cara membuat tab view

mungkin para sobat blog udah pada tau tentang cara membuat tab view mungkin saya posting buat sobat bloger yang baru exis okelah ini contoh dgambarnya

oke deh tanpa basa basi kita mulai bekerja langkah pertama adalah sebagai berikut

cari kode </head>

gunakan ctrl+c untuk mengkopi

Letakan kode berikut sebelum kode </head>

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>

Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

div.TabView div.Tabs

{

height: 30px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 98px; /* Lebar Menu Utama Atas */

text-align: center;

height: 30px; /* Tinggi Menu Utama Atas */

padding-top: 3px;

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: #ffffff; /* 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: #E6E6E6 url(http://i953.photobucket.com/albums/ae20/hendrytha/nav-bg.png) repeat ; /* Warna background Menu Utama Atas */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #BDBDBD; /* Warna border Kotak Utama */

overflow: hidden;

background: #E6E6E6 url(http://i953.photobucket.com/albums/ae20/hendrytha/touto.gif) repeat ; /* Warna background Kotak Utama */

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 20px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

sekarang anda tinggal masuk ke edit laman pilih tambah gadget lalu pilih java/html

</div>

Tab 1.1 <br />

Tab 1.2 <br />

Tab 1.3 <br />

</div>

Tab 2.1 <br />

Tab 2.2 <br />

Tab 2.3 <br />

</div>

Tab 3.1 <br />

Tab 3.2 <br />

Tab 3.3 <br />

</div>

</form>

tabview_initialize('TabView');

</script>

selesai dech selamat mencoba moga sukses yua jangan lupa komentar andan butuh saya juga butuh partisipasi anda terimakasih
anda boleh kopas artikel disini tapi diharap jangan mengubah sumber penerbit

cara membuat ta view sederhana