Cara Membuat "Tab View" pada Blogspot.com Versi II

Sebelunya saya sudah pernah bilang bahwa dalam membuat menu tab view itu ada banyak cara, mulai dari bentuk kolom Tabnya mau pun style dari menu tab viewnya. Dalam pembuatan Menu Tab View sebelumnya saya menerangkan bahwa menu tab view tersebut hanya menggunakan kode HTML pada kolom HTML/JavaScript. Nah untuk tips Menu Tab View ini saya akan memberikan tips yang berurusan dengan edit Template. Terserah sobat blogger mau makai yang mana. Yang penting adalah kita enjoy dengan hobby kita (blogging.red).

Jika sobat blogger telah membaca tulusan saya yang berjudul Membuat "Tab View" pada Blogspot.com Versi I, mungkin sobat sudah kenal dengan yang namanya menu Tab View. Jika sobat sudah tau, silahkan ikuti langkah-langkah di bawah ini, kalau sobat blogger berniat ingin memasangnya pada blog sobat.

Langkah-langkah menampilkan Menu Tab View pada blogspot.com

1. Langkah pertama kali, Masuk/Login ke blogger.com dengan Account anda

2. Kemudian Pilih edit Template

Untuk tampilan blogger yg baru

3. Setelah itu silahkan cari kode ]]></b:skin>

4. Letakkan kode berikut di ATAS kode yang tadi.

/* 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: 0px;
}
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;}

5. Setelah itu, cari kode </head> dan letakkan kode berikut ini di ATASnya

<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>

6.  Kemudian Simpan Template.
7. Lanjut ke langkah berikutnya. Pilih Tata Letak.
8. Kemudian Tambah Gadget.
9. Pilih HTML/JavaScript.
10. Pastekan kode berikut ini di dalam kolom HTML/JavaScript yg tadi.

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab 1</a>
<a>tab 2</a>
<a>tab 3</a>
<a>tab 4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
<a href="http://rockmanticks.blogspot.com/" target="blank">Rockmanticks</a>
Letakkan kode untuk tab 1 Sobat
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<a href="http://rockmanticks.blogspot.com/" target="blank">Rockmanticks</a>
Letakkan kode untuk tab 1 Sobat
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
<a href="http://rockmanticks.blogspot.com/" target="blank">Rockmanticks</a>
Letakkan kode untuk tab 1 Sobat
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
<a href="http://rockmanticks.blogspot.com/" target="blank">Rockmanticks</a>
Letakkan kode untuk tab 1 Sobat
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

Silahkan edit kode yang berwarna Merah di atas.
11. setelah selesai, silahkan di Save, dan lihat perubahannya pada blog anda.
Terima kasih, semoga bermanfaat. (Jkt/2012)