Cara Membuat Halaman Kolom Tab View

Halaman Kolom Tab View adalah Satu Kolom yang diisi dengan berbagai kategori dari artikel postingan. Pada halaman kolom Tab view ini bisa anda atur menjadi beberapa bagian kolom yang berguna untuk memperindah halaman Blog anda dan mempersingkat ruang halaman pada blog.

Sebagai contoh bisa anda lihat gambar berikut ini :

Nah, Bagai mana cara membuat Tab View bisa anda lihat langkah-langkahnya sebagai berikut :

Pertama, Login ke blogger dengan ID anda.
Kedua, Lalu Klik Menu Templates.
Ketiga, Klik Sub Menu Edit HTML.
Keempat, Pada Kotak Edit HTML cari Code ]]></b:skin>.
Kelima, Lalu Copy code berikut dan Pastekan diatas code, ]]></b:skin>
Code :
/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}
Keenam, Save Template anda.
Langkah berikutnya, Anda masuk ke Design dan Halaman Element
Lalu Pilih Add Widget Element dan pilih halaman menu Html Javascript.
Selanjutnya Copy Code berikut ini dan Pastekan di halaman Widget Element Html javascript tadi,
Code :
<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>
Keterangan :
Text yang ditandai Dengan Warna Merah, Isi dengan Judul kategorie Untuk Colom
Text Yang Berwarna Biru, Isi dengan Link yang ingin anda munculkan di colom tersebut.
Kemudian Save Widget anda dan lihat hasilnya.

Posted by : BlogTerms ~ SEO | Backlinks | Website | Widget | Ads

Artikel Cara Membuat Halaman Kolom Tab View diposting oleh BlogTermsFriday, July 20, 2012. Terima kasih atas kunjungannya. Mohon Di Share Melalui Widget dibawah ini :

6 comments:

  1. kok muncul di samping, Bos????

  1. Penempatannya Sesuaikan Aja Bro Dengan Selera anda dengan Cara menggeser Widgetnya...

  1. maksudnya Disini letakkan kode untuk tab 1 anda itu apa gan???
    tolong dijelaskan, maklum masih pemula

  1. Udah saya Tambahin lagi gan keterangannya di atas.. mudah-mudahan sudah bisa di mengerti..

  1. Obat Stroke Iskemik Herbal Alami adalah sebuah solusi untuk anda yang bingung mencari obat untuk mengatasi penyakit stroke, selain itu ada juga Obat Untuk Mengobati Stroke Ringan Herbal yang memang banyak dicari karena sekarang ini banyak sekali penderita penyakit stroke ringan. Obat Stroke Tradisional Alami Ampuh, memang sangat ampuh karena terbuat dari bahan-bahan tradisional. Obat Untuk Stroke Ringan Yang Manjur juga sangat ampuh untuk mengatasi stroke ringan. Untuk itu Obat Penyakit Stroke Alami dan Tradisional sangat membantu sekali untuk pengobatan penyakit stroke. Obat Mujarab Untuk mengobati Penyakit Stroke merupakan sebuah obat mujarab yang banyak dijadikan alternatif oleh banyak orang, Obat Penyakit Stroke Alami dan Tradisional dan Obat Alami Untuk Mengobati Penyakit Stroke ini sudah banyak membantu orang-orang yang mengidap penyakit stroke dengan menggunakan Obat Untuk Penyakit Stroke Paling Ampuh. Obat Herbal Untuk Penderita Penyakit Stroke ini sangat aman, karena terbuat dari bahan alami yang 100% herbal. Obat Tradisional Untuk Penyakit Stroke Berat pun tersedia untuk anda yang memang mengalmai stroke berat. Untuk itu baik Obat Tradisional Untuk Menyembuhkan Penyakit Stroke, Obat Untuk Mengobati Stroke Ringan Maupun Berat, ataupun Obat Herbal Yang Mampu Untuk Mengobati Penyakit Stroke sangat baik dan berkhasiat sangat tinggi untuk mengobati penyakit stroke hingga tuntas.

Post a Comment