Cara Membuat Tab View Versi 2

Seperti anda tahu dengan Tab View anda bisa mendaftarkan atau menyusun isi dari blog anda untuk lebih mudah dibaca oleh pengunjung blog anda. Sehingga besar kemungkinannya pengunjung blog anda akan berlama-lama di blog anda karena mereka menemukan artikel-artikel yang menarik yang ada pada daftar tab view anda.

Kenapa artikel berikut saya beri judul Tab View Versi 2? ini artinya saya sudah memposting artikel Tab View Versi 1 (Baca: Cara Membuat tab View Versi 1) bahkan Tab View yang menggunakan sentuhan JQuery juga pernah saya posting (Baca: Tab View dengan Jquery) dan pastikan anda tidak melewatinya.

Berikut tutorial untuk membuat Tab View Versi 2 ini:

• Login ke Blogger.com
• Kemudian Tata Letak
• Pilih Edit HTML
• Centang Expand Widget
• Copas kode berikut diatas kode </head>

<script src='http://sites.google.com/site/rasiqzonetwork/javascript/tabview2.js' type='text/javascript'/>

• Setelah itu, Copas kode berikut diatas kode ]]></b:skin>

div.Tab div.TFs
{height: 30px; overflow: hidden;} div.Tab
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:#0080ff;
color: #000;
border-top:0px solid #ccc;
border-right:0px solid #999999;
border-bottom:0px solid #999999;
border-left:0px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tab div.TFs a:hover
{
background: #fff;
border-top:1px solid #0080ff;
border-right:1px solid #0080ff;
border-bottom:1px solid #999;
border-left:1px solid #ccc;}
div.Tab div.TFs a.Active
{ background: #fff; color: #000;
border-top:1px solid #0080ff; border-right:1px solid #0080ff;
border-bottom:1px solid #0080ff;
border-left:1px solid #0080ff; font-weight:bold;}
div.Tab div.Pages { clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1;
padding:0;background: #fff;
-moz-border-radius:5px;}
div.Tab div.Pages div.Page {height: 100%;padding: 0px; overflow: hidden; }
div.Tab div.Pages div.Page div.floor { font-size:11px;padding: 3px 5px; text-align:left;}

• Silahkan ganti ukuran dan warnanya sesuai selera anda, untuk kode warna (Baca: Kode Warna HTML)
• Selanjutnya Save Template
• Langkah selanjutnya Klik Elemen Halaman
• Kemudian Tambahkan Elemen Halaman
• Pilih HTML/JavaScript
• Copas kode berikut pada konten:

<form action="tab.html" method="get">
<div class="Tab" id="Tab">
<div class="TFs">
<a>Tutorial Blogger</a>
<a>Design Template</a>
<a>Widgets</a>
<a>JQuery</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
<ul>
<li><a href="http://rasiqzonetwork.blogspot.com/2009/08/bikin-blog-di-blogger.html">Cara Membuat Blog</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/01/cara-setting-blog-di-blogger.html">Cara Setting Blog</a></li>
</ul>
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
<ul>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/02/cara-mengubah-lebar-kolom-template.html">Cara Mengatur Lebar Template</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/02/cara-menambah-kolom-pada-sidebar.html">Menambahkan Kolom Baru Pada Sidebar</a></li>
</ul>
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
<ul>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/01/cara-pasang-translator-cantik.html">Cara Pasang Translator Cantik</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/02/cara-membuat-shoutmix-buku-tamu.html">Cara Membuat Buku Tamu undefinedShoutmix)</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/02/cara-modifikasi-shoutmix-buku-tamu.html">Cara Modifikasi Buku Tamu undefinedShoutmix)</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/03/cara-membuat-link-berkedip-pelangi.html">Cara Membuat Link Berkedip Pelangi</a></li>
</ul>
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
<ul>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/03/cara-termudah-membuat-tab-animasi.html">JQuery Pada Menu Tab View</a></li>
<li><a href="http://rasiqzonetwork.blogspot.com/2010/03/jquery-pada-multi-kolom-footer.html">JQuery Pada Multi Kolom Footer</a></li>
</ul>
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabardi33_nameundefined'Tab');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="#" target="_blank" title="Tabview Widget">Klik disini cara pasang widget ini</a></div>

• Silahkan ganti yang berwarna merah dan yang lainnya sesuaikan dengan milik anda
• Selanjutnya Save

Semoga Bermanfaat dan membantu anda dalam kegiatan blogging..

Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.