Cara Membuat Widget Menu TAB View di Blogger Dengan Mudah

Tips Blogger.Cara Membuat Widget Menu TAB View Pada Blog. Kali ini saya akan membahas tentang "Cara Membuat Widget Menu TAB View di Blogger Dengan Mudah". Dimana cara ini juga akan membantu untuk meringankan Blog anda sesingga menjadi Fast Loading.

Tentunya sapa sih yang tidak mau blognya Fast loading, pasti banyak yang menginginkan blognya fast loading, saya juga pun demikian, hehe, Karena dengan memasang Menu Tab View di blog anda akan menghemat sidebar pada blog andasehingga tidak terlalu banyak menambahkan widget yang akhirnya dapat memberatkan loading blog anda.

Untuk tampilan demo'nya, bisa anda lihat di sini => DEMO

Jika anda tertarik untuk mencobanya, bisa dengan mudah anda membuatnya, hanya cukup mengikuti beberapa langkah yang sudah saya sediakan dibawah ini, Tapi ingat, anda harus teliti dalam pemasangannya ya..!!!

Cara Membuat Widget Menu TAB View di Blogger

=> Masuk ke Dasboar Blog anda
=> Pilih Template-> Edit HTML
=> Cari kode  ]]></b:skin> (gunakan Ctrl+F untuk memudahkan'nya)
=> Letakkan kode dibawah ini tepat diatas kode  ]]></b:skin>

/* tab model 2 modifit by 4rie-ngr.blogspot.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;}

=> Selanjutnya Letakkan kode dibawah ini tepat diatas kode </head>

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

=> Save / Simpan Template blog anda
=> Selanjutnya, pilih Tata Letak
=> Lalu Tambah Gadget -> Pilih HTML/JavaScript
=> Masukkan kode dibawah ini pada kolom 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>

=> Simpan. dan lihat hasilnya
=> Selesai

Baca juga :
=> Cara Membuat Widget Share Media Sosial di Blog
=> Cara Mempercepat Loading Blog
=> Cara Mengubah Judul Tag di blog untuk mendapatkan traffik tinggi

Sekian artikel yang saya tulis ini tentang "Cara Membuat Widget Menu TAB View di Blogger Dengan Mudah". Semoga bermanfaat dan berguna untuk anda yang ingi mencobanya, Jika anda kurang jelas, bisa memberikan komentarnya di blog anda. Selamat Mencoba.!!

Share :