Cara Membuat Menu Tab View Blogger

Cara Membuat Menu Tab View

Kreatif adalah hal utama dalam bloging,untuk itu marilah kita sama sama kreatif meskipun belum bisa sepenuhnya.Hal ini lah yang akan aku Sharing kan ke sobat semua tentang bagaimana cara membuat menu tab view di blogger.Nah,untuk lebih jelasnya,sobat bisa lihat di bawah ini:

1. Silakan Login ke blog sobat
2. Masuk ke tab Perancangan lalu pilih edit HTML
3. Seperti biasa centang "Expand widget templates" untuk menghindaran 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 onlinebisnis11.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;}

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

10.Setelah itu simpan dan lihat hasilnnya

Nah,demikian tadi cara singkat Membuat Menu Tab View untuk Blogger.Gampang dan sangat mudah langsung bisa dipraktekkan.Baca juga Cara Membuat Menu Dropdown Horizontal seperti blog ini yang fixed paling atas.Selamat mencoba.

Ditulis Oleh : Master Online | Prediksi Online Terbaru Hongkong Singapura

Artikel Cara Membuat Menu Tab View Blogger ini ditulis oleh Master Online pada hari ini. Terimakasih atas kunjungan agan pada blog ini. Kritik dan saran tentang Cara Membuat Menu Tab View Blogger dapat agan sampaikan melalui kotak komentar dibawah ini. Bagi agan semua yang ingin mengcopy paste atau menyebar-luaskan artikel ini, tolong letakkan link dibawah ini sebagai sumbernya <a href="http://onlinebisnis11.blogspot.com/2013/03/cara-membuat-menu-tab-view-blogger.html" target="_blank">Cara Membuat Menu Tab View Blogger</a>

Artikel terkait :