Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
Biasanya kita suka menyimpan beberapa artikel yang kita buat atau kita juga sering membuat beberapa kotak untuk beberapa link teman - teman kita. Nah seperti yang kita ketahui format pembuatan link ataupun artikel yang kita buat suka memakan banyak tempat membuat aksen yang kurang rapi buat blog kita.

Untuk itulah kali ini gue coba buat format "tabview link friend or your articel ", yang gue dapet dari beberapa suhu blog seperti artikelnya Tips Trik Blogging, O-om dan mas Anas..tapi tentunya dengan beberapa sedikit perubahan yang coba gue sesuaikan.

OK, untuk langkah pertama kamu login kedalam account blog kamu, dan masuk ke area "edit HTML" kemudian masukkan kode dibawah ini. sebelum code ]]></b:skin>
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna 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;
}
langkah selanjutnya adalah kamu copy lagi code berikut, namun letakkan sebelum kode </head>
<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>
Kemudian Simpan.
  • Nah pada langkah yang sudah kamu lakukan tadi, langkah terakhir yang harus kamu lakukan adalah klik menu "Page Element"
  • Klik "Add a Gadget",kemudian pilih "Edit HTML" dan coba Copy kode berikut kedalam Gadget yang sudah kamu pilih tadi :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
  • Terakhir kamu simpan deh.....
nb : kode berwarna hijau adalah judul dari masing - masing kolom yang akan kamu isi


Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

0 Response to "Teknik membuat TabView"

Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |