Menu Tab View

 

Gambar diatas adalah gambar menu tab view pada blog saya. Menu ini saya gunakan untuk memperingkas tempat pada blog sehingga dapat menampung banyak link posting pada tempat yang tersedia. Sebenarnya terdapat beberapa model dari menu tab view, ada yang kotak, oval dan ada juga yang seperti gambar diatas. Kebetulan saya menggunakan yang ini karena tampak lebih bagus.hee…

Untuk membuat menu tab view emang sedikit rumit karena harus mengedit template blog. Tetapi hal itu bukanlah suatu masalah jika kita mau belajar, teliti dan tidak mudah putus asa. Berikut ini akan disajikan bagaimana cara membuat menu tab view.

1.       Login ke Blogger

2.       Dashboard kemudian klik Design dan pilih Edit HTML

3.       Beri tanda centang pada Expand Widged Template

4.       Carilah kode ]]></b:skin>, untuk mempercepat pencarian gunakan Ctrl + F

  Untuk lebih jelasnya perhatikan gambar dibawah ini :

 

5.  Setelah anda menemukan kode ]]></b:skin>, copy paste script dibawah ini dan letakkan tepat diatas kode tersebut.

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

 6.  Kemudian carilah kode </head>, kemudian copy paste script dibawah ini dan letakkan diatas kode tersebut. 

      

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

 

7.       Kemudian simpan template [Save Template]

8.       Setelah anda simpan template, langkah selanjutnya adalah menuju ke tab Page Elemen.

 

9.       Setelah anda klik HTML/Java Script, copy paste script dibawah ini :

<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>

Untuk lebih jelasnya perhatikan gambar dibawah ini

10.       Kemidan klik SAVE untuk menyimpan dan lihatlah perubahan pada blog anda.