Cara Lengkap Membuat TAB View Di Blog

 Assalamualaikum Wr. Wb.  Kali ini saya akan membahas Cara Membuat Menu TAB View. Menu Tab View itu ialah sebuah kotak yang bisa diisi dengan Script/Javascript. Tak seperti biasanya di blogger itu hanya bisa dipasang disatu Kolom. Nah Menu Tab View ini Bisa membuat Script Lebih dari satu, dan disatu tempat. Seperti di screenshot diatas ini. Trick ini agar mempercepat loading blog, seperti saat ini jika terlalu banyak Script di setiap kolom bar bisa membuat lambat loading.

Nah kita lanjut saja ke Tricknya saja.








1. Silakan Login ke blog kamu
2. Masuk ke tab Perancangan lalu pilih edit HTML
3. Seperti biasa centang "Expand widget templates" untuk menghindari apabila terjadi kesalahan.
4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
5. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini di atas kode ]]></b:skin>

/* 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: #333;
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; color: #ffffff;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:333px; border:1px solid #EFF0F1; padding:0;background: #222222; -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:12px;padding: 3px 5px; text-align:left;}

5. Letakkan kode di bawah ini di atas kode </head>

<script src='http://zuazz.googlecode.com/files/ateonsoft_tab.js' type='text/javascript'/>  

6. Save template
7. Masuk ke tab Elemen laman/Layout
8. Tambahkan widget HTML/JavaScript
9. Silakan letakkan kode di bawah ini di dalam widget HTML/JavaScript


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

Dan terakhir simpan dan Lihat Hasilnya.

Catatan :

 Untuk Font yang Berwarna Hitam, itu ganti dengan judul javascriptnya yang anda inginkan.

Untuk Font Yang Berwarna Merah, Itu Isi dengan Javacript yang ada Inginkan

Jika belum mengerti Untuk Memasang script tersebut. bisa dilihat dibawah contoh ini

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>B-Tmj On FB</a>
<a>Admin Twitter</a>
<a>Buku Tamu</a>
<a>Comment</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
<div class="fb-like-box" data-href="http://www.facebook.com/BTmjBlog" data-width="250" data-height="292" data-colorscheme="dark" data-show-faces="true" data-border-color="#1E90FF" data-stream="true" data-header="true"></div>
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 'auto',
  height: 292,
  theme: {
    shell: {
      background: '#68abde',
      color: '#0a090a'
    },
    tweets: {
      background: '#f7f7f7',
      color: '#141414',
      links: '#079beb'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
  }
}).render().setUser('budi_triatmojo').start();
</script>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=462682&amp;boxtag=l2vne3&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-462682" style="border: 0px solid;" id="cboxmain7-462682"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=462682&amp;boxtag=l2vne3&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-462682" style="border: 0px solid;border-top:0px" id="cboxform7-462682"></iframe></div>
</div>
<!-- END CBOX -->
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
<div class="fb-comments" data-href="http://www.facebook.com/BTmjBlog" data-num-posts="4" data-width="300"></div>
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>